For this project, I started with a basic pattern I wanted to achieve, then kept modifying it and exploring what I could do with mouse movements as well. Move your mouse around to reveal the hidden face 😀
zimmy string
function setup() {
createCanvas(400, 300);
background(0);
stroke(255);
}
function draw() {
var xL1 = 0;
var xL2 = 0;
var y1 = 0;
var y2 = 400;
stroke(255, 131, 100);
var y = 0
for(var x = 0; x <= 400; x += 10){
line(x, y, mouseX, mouseY);
} // orange lines that follow mouse and fill in the background
noStroke();
fill(0);
circle (130, 130, 10);
circle(150, 130, 10);
arc(140, 140, 30, 30, 0, PI, CHORD);
// hidden smiley face :D
stroke(255, 210, 235);
for (var y1 = 0; y1 <= 300; y1 +=10) {
line(xL1, y1, xL2, y2);
xL2 += 40;
} // pink lines in bottom left corner
var xR1 = 400;
var xR2 = 400;
var y1 = 0;
var y2 = 400;
for (var y1 = 0; y1 <= 300; y1 +=10) {
line(xR1, y1, xR2, y2);
xR2 -= 40;
} // pink lines in bottom right corner
stroke(255);
xL2 = 0;
for (var y1 = 0; y1 <= 300; y1 +=10) {
line(xL1, y1, xL2, y2);
xL2 += 30;
} // white lines in bottom left corner
stroke(200, 0, 200);
xR2 = 400;
for (var y1 = 0; y1 <= 300; y1 +=10) {
line(xR1, y1, xR2, y2);
xR2 -= 30;
} // purple lines in bottom right corner
stroke(239, 29, 255);
xR2 = 400;
y2 = 0;
for (var y1 = 300; y1 >= 0; y1 -=10) {
line(xR1, y1, xR2, y2);
xR2 -= 10;
} // purple lines in top right corner
stroke(255, 131, 199);
xL2 = 0;
y2 = 0;
for (var y1 = 300; y1 >= 0; y1 -=10) {
line(xR1, y1, xR2, y2);
xR2 -= 10;
} // pink lines in top right
}