Category: Section D

I attempted to create a panda using lines. I first created a sketch on Adobe Illustrator to map out the locations of the lines. I will be honest… I did not expect this to be so difficult. I used if statements to confine lines and move them around, so everything is “animated”.

Above, is the sketch I attempted to recreate on p5js.
As you can see… it didn’t turn out as expected.

sketch

/*
Daniel Noh
Section D
dnoh@andrew.cmu.edu
Project-04-String-Art
*/

var x1 = 172;
var y1 = 300;
var x2 = -50;
var y2 = 0;

var x3 = 100;
var y3 = 92;
var x4 = 0;
var y4 = -30;

var x5 = 95;
var y5 = 300;
var x6 = 300;
var y6 = 0;

var x7 = 172;
var y7 = 62;
var x8 = 260;
var y8 = 0;

var x9 = 130;
var y9 = 250;
var x10 = 160;
var y10 = 200;

var x11 = 251;
var y11 = 237;
var x12 = 229;
var y12 = 160;

var x13 = 268;
var y13 = 213;
var x14 = 190;
var y14 = 145;

var x15 = 182;
var y15 = 276;
var x16 = 218;
var y16 = 235;

function setup() {
    createCanvas(400, 300);
    background(255);
}

function draw() {
//red left ear

  stroke(255,0,0);
  strokeWeight(2);
  line(x1,y1,x2,y2);

  if (x1 > -150) {
    x1 = x1 - 50;
  }

  if (x2 < 240) {
    x2 = x2 + 50;
  }

  if (y1 > 180) {
    y1 = y1 - 20;
  }

  //blue left ear

  stroke(0,0,255);
  line(x3,y3,x4,y4);

  if (x3 >= 100 & x3 <= 129) {
    x3 += 15;
    y3 -= 10;
  }
  if (y4 <= 30 & y4 <= 100) {
    x4 -= 50;
    y4 += 50;
  }

  //blue right ear

  stroke(0,0,255);
  line(x5,y5,x6,y6);

  if (x5 >= 95 & x5 <= 400) {
    x5 = x5 + 55;
  }
  if (x6 <= 300 & x6 >= 130) {
    x6 = x6 / 1.04;
  }
  if (x5 > 400) {
    y5 = y5 - 100;
  }

  //red right ear
  stroke(255,0,0);
  line(x7,y7,x8,y8);

  if (x7 <= 205) {
    x7 = x7 + 17;
    y7 = y7 - 3;
  }
  if (x8 >= 210) {
    x8 = x8 - 26;
  }

  //left eye
  stroke(0);
  line(x9,y9,x10,y10);

  if (x9 <= 175) {
    x9 = x9 + 5;
    y9 = y9 + 1;
  }
  if (x10 >= 143) {
    x10 = x10 - 5;
    y10 = y10 - 9;
  }
  if (x10 >= 129 & x10 <= 142) {
    y10 = y10 + 13;
    x10 = x10 - 4;
  }

  //right eye top
  line(x11,y11,x12,y12);

  if (x11 <= 265) {
    x11 = x11 + 5;
    y11 = y11 - 5;
  }
  if (x12 >= 200) {
    x12 = x12 - 7;
    y12 = y12 - 5;
  }

  //right eye bottom
  line(x13,y13,x14,y14);

  if (x13 <= 278) {
    x13 = x13 + 3;
    y13 = y13 - 3;
  }
  if (x14 <= 215) {
    x14 = x14 + 4;
    y14 = y14 + 6;
  }

  //mouth
  line(x15,y15,x16,y16);

  if (x15 <= 205) {
    x15 = x15 * 1.03;
    y15 = y15 * 1.01;
  }
  if (x15 >= 206 & x15 <= 232) {
    x15 = x15 * 1.03;
    y15 = y15 / 1.02 ;
  }
  if (x16 >= 213) {
    x16 = x16 - 4;
    y16 = y16 - 5;
  }
  if (x16 >= 176 & x16 <= 212) {
    x16 = x16 / 1.03;
    y16 = y16 * 1.01;
  }
}

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 04 

// increases
var inc = 15;
var xint = 15;
// positions
var x1 = 1; 
var y1 = 499;
var x2 = 499;
var y2 = 1; 
//colours
var lr;
var lg;
var lb;

function setup(){
    createCanvas(500,500);
    background(0);
}

function draw() {
    
    var m = mouseX/25; // colour gets "redrawn" and changes with mouse 
	for(var i = 0; i < m; i += 1) {
		strokeWeight(1);
        lr = i*mouseX/2-500;
        lg = i*mouseY/2;
        lb = i*-mouseY/2+600;
		stroke(lr,lg,lb); //white

        line(x1, inc * i, inc * i, y1); //bottom left
        line(inc * i, y1, x2, y1 - inc * i); //bottom right
        line(x2 - inc * i, y2, x2, y1 - inc * i); //top right
		line(x2 - inc * i, y2, x1, inc * i); //top left
	}
}

I wanted to create something interactive or something that changes. I always found string art really cool especially the optical illusions. This piece was a little challenging to put together because of the amount of variables it required it gets a little bit confusing

Sharingan

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-04-String Art

var distribution = new Array(360);

function setup() {
    createCanvas(400, 300);
    for(i = 0; i < 275; i++){
        // Controls the properties of the line
        distribution[i] = floor(randomGaussian(350, 200));
    }
}

function draw() {
    background(0);

// Generates a set of random lines radiating from the center of the canvas
    push();
    translate(width/2, height/2);
    for(i = 0; i < 275; i++){
        rotate(TWO_PI/275);
        stroke(200, 0, 0);
        var dist = abs(distribution[i]);
        line(0, 0, dist, 0)
    }
    pop();

    var xBound = width;
    var yBound = height;
    var x = 0;
    var y2 = 0;

    strokeWeight(1)
    stroke(0); // Controls the color of the
// Generates lines which form an arc that moves diagonally
// across the canvas to each corner
// Similar geometry to the Mangekyou Sharigan
    for(i = 0; i < xBound; i +=10){
        var y = i * 3/4;
        line(x, y, i, yBound); //Lower left arc
        line(x, yBound -y, i, y2); // Upper Left arc
        line(xBound, y, xBound - i, yBound); // Lower Right arc
        line(i, y2, xBound, y); // Upper Right arc
    }

// Draws pupil
    fill(0);
    ellipse(200, 150, 75, 75);
}

This week, I was a bit unsure how to approach the assignment. I initially began coding random lines, to simply get a feel for what a happened when I manipulated certain parts of the code. This was extremely helpful, and while my code does not reflect all I wanted to achieve with this assignment, I learnt a lot by playing around with it a bit.

I drew inspiration from the Sasuke Uchiha’s Mangekyou Sharigan. It has been cropped, or zoomed in order to simplify it a bit. I had trouble coding the center petals of the floral pattern seen in his eye. It was a cool project though, definitely want to explore this more.

aboyle String Art

function setup() {
    createCanvas(300, 400);
}

var move=100
var dir=1

function draw(){
    background(mouseX/2+mouseY/2);
    noFill();

//if moving lines hit the center of the circles, they switch direction
    move+=dir*2
    if (move>=300 || move<=100){
      dir=-dir
    }

  for (var i=10; i<=150; i+=10){
      //creates border lines on left
      stroke(0,300-mouseX,300-mouseX)
      line(0,110-i/2,i*2,0);
      line(0,296+i/2,i*2,400);
      //creates border lines on right
      line(300,360-i/2,i*2,400);
      line(300,30+i/2,i*2,0);
      //creates moving lines
      stroke(300-mouseX,0,300-mouseX)
      line(150,move,i-10,0);
      line(150,move,310-i,0);
      line(150,move,i-10,400);
      line(150,move,310-i,400);


    if (i<100){
      //creates side curves
      stroke(300-mouseX,0,0)
      curve(-200-i*4,150,0,155-i/5,0,255+i/5,-200-i*4,250)
      curve(500+i*4,150,300,145-i/5,300,245+i/5,500+i*4,250)
      //creates circles
      ellipse(150,100,30+i/2)
      ellipse(150,300,30+i/2)
      //creates center curves
      stroke(0,0,300-mouseX)
      curve(0,400,0,300,100+i,200,100,0);
      curve(0,400,300,300,100+i,200,100,0);
      //mirror image of curves
      push();
      translate(width,height);
      rotate(PI);
      curve(0,400,0,300,100+i,200,100,0);
      curve(0,400,300,300,100+i,200,100,0);
      pop();

    }
  }
}

I didn’t really have any ideas about what I wanted the final product to look like, so I just started messing around with different lines to see what would happen. I think that string art is visually appealing, so now that I have a basic grasp on for() I’m excited to play around with it in the future. I decided to add some color changes and movement as well, just to spice it up a little. The one thing I had trouble with was creating the center curves; I ended up making one half and then mirroring it with push() and pop(), but I bet there’s a simpler way to do it.