function setup() {
createCanvas(640,480);
}
var endPoint = 304;
function draw() {
background(0);
for (var i = -100; i <= 300; i += 3){
if (mouseIsPressed){
stroke(76);
// left inner curves displayed on mouse press
line(i, height/2, width/2.1, height/2.5 + i);
line(i, height/2, width/2.1, height/1.55 - i);
}
stroke(76);
//left outer lines
line(i, height/2, endPoint, height);
stroke(220);
line(i, height/2, endPoint, 0);
}
for (var i = 700; i >= 300; i -= 3){
stroke(232);
//right inner curves
line(i, height/2, width/2.1, -height/1.55+i);
line(i, height/2, width/2.1, height*1.65-i);
stroke(13);
//right outer lines
line(i, height/2, endPoint, height);
line(i, height/2, endPoint, 0);
}
}
//fun function
function mouseIsPressed() {
console.log(5);
for (var i = -100; i <= 300; i += 3){
}
}
I drew 4 curves first to represent the inner diamond shaped figure. I then encased it with other iterated lines and added a fun function to change the shape on mouse click.
edit: The picture wasn’t meant to fit within the dimensions given