While working on this project, I became very comfortable with the for() function in p5.js. I started off just writing random for() functions but then saw how easy it was to manipulate the distances and lengths and positions of my shapes and variables. I spent a little too long on this because I wanted to make an eye in the middle of the frame but it was fun!
CLICK ON THE EYE!
sketch
//Seth Henry
//Section B 10:30 Tuesday
//sehenry@andrew.cmu.edu
//Assignment-String Art
function setup() {
createCanvas(640, 480);
text("p5.js vers 0.5.2 test.", 10, 15);
}
function draw() {
background(220);
fill('violet blue'); //randomcolors
rect(0, 0, width, height); //background rectangle
if (mouseIsPressed) {
fill(255);
strokeWeight(2);
ellipse(width/2, height/2, 250, 250); //eyeball
fill(0);
ellipse(width/2, height/2, 100, 100); //pupil
fill(255);
ellipse(width/2+20, height/2-30, 10, 10);//whiteball
strokeWeight(2);
line(width/2-75, height/2-100, width/2+75, height/2-100); //top eyelid
line(width/2-75, height/2+100, width/2+73, height/2+100); //bottom eyelid
line(width/2-40, height/2-100, width/2-40, height/2-120); //eyelashes
line(width/2, height/2-100, width/2, height/2-125);
line(width/2+40, height/2-100, width/2+40, height/2-120);
}
else {
strokeWeight(3);
fill(102,51,150);
ellipse(width/2, height/2, 250, 250); //eyeball
strokeWeight(3);
line(195, 240, 444, 240); //eyelid
line(220, 240, 180, 260); //eyelashes
line(260, 240, 230, 280);
line(380, 240, 410, 280);
line(420, 240, 460, 260);
for (var ln = 280; ln < 380 ; ln+=40){ //middle eyelashes
line(ln, height/2, ln, height/2 + 50);
}
}
strokeWeight(1)
stroke(random(255), random(255), random(255));
// for(var i = 1; i<640; i+=10){ //Makes a sequence of straight lines from the top left to the bottom right
// line(i,50,50,i);
// }
for(var e = 1; e < 640; e += 5){ //Makes a curve arching to the top left of the screen
line(width-e, 50, 50, e);
}
for(var a = 1; a < 640; a += 10){ //Makes a curve arching to the top right
line(a, 50, width - 50, a);
}
for(var o = 1; o < 640; o += 10){ //Makes a curve arching to bottom right
line(width-o, height -50, width - 50, o);
}
for(var p = 1; p < 640; p += 10){ //Makes a curve arching to the bottom left.
line(p, height - 50, 50, p);
}
}
//Previous curves that I decided to exclude
// for(var y = 1; y<640; y+=10){
// line(y,height-y, width-50,y);
// }
// for(var x = 1; x < 640; x+=5){
// line(width-x, height-x, 50, x);
// }