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.
/*
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;
}
}