//variables of x and y placement of lines, to be changed under
//each for() statment
var x1;
var y1;
var x2;
var y2;
function setup() {
createCanvas(400, 300);
}
function draw() {
background(100, 100, 130);
// eye pupil
strokeWeight(0);
fill(40);
ellipse(width / 2 - 5, 215, 60, 60);
// eye highlight
fill(200);
ellipse(width / 2 + 10, 205, 15, 15);
// top lid
for( var g2 = 1; g2 < width; g2 += 5){ // group 2 lines
push();
stroke(155, 150, 195);
strokeWeight(1);
translate(20, -80);
rotate(radians(14));
x1 = 0;
y1 = width - g2;
x2 = height + g2;
y2 = g2;
line(x1, y1, x2, y2);
pop();
}
// bottom lid
for( var g1 = 1; g1 < width; g1 += 5){ // group 1 lines
push();
stroke(185, 180, 225);
strokeWeight(.5);
translate(40, height/2 - 30);
rotate(radians(2));
x1 = 0;
y1 = height - g1;
x2 = width - g1;
y2 = g1 ;
line(x1, y1, x2, y2);
pop();
}
// top
for( var g3 = 40; g3 < width; g3 += 5){ // group 3 lines
push();
stroke(195, 190, 235);
strokeWeight(1);
translate(10, -100);
rotate(radians(14));
x1 = 0;
y1 = width - g3;
x2 = height + g3;
y2 = g3;
line(x1, y1, x2, y2);
pop();
}
// head
for( var g4 = .5; g4 < width; g4 += 5){ //group 4 lines
push();
stroke(90, 70, 130);
strokeWeight(2);
translate(-170, -60);
rotate(radians(-25));
x1 = 20;
y1 = width - g4;
x2 = height + g4;
y2 = g4;
line(x1, y1, x2, y2);
pop();
}
}
This project was a bit difficult to wrap my head around, especially how the for() loops affected the line positions. I enjoyed manipulating the different parameters and seeing the various lines and arcs that could be created. My process was more one of discovery, as I played with the parameters to find inspiration. Once I had an idea, I went on from there to try and get more specific in what I wanted to achieve.