dnoh-sectionD-project4-stringart

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;
  }
}