For this project i struggled with creating something visually exceptional because of my limited knowledge of how to use for loops to create interesting visuals. So i added a animation aspect using the position of the mouse to determine the visuals.
function setup() {
createCanvas(400, 300);
}
function draw() {
background(210);
//i used a for loop to iterate the value of i so i could create a
//curve made from lines that have an incremental value based on i
for (var i = 0; i <= 300; i += 20) {
//using the x value of x i made two sets of lines that are connected at the x value of the mouse
// by making two sets the curves can be moved from the left side to the right side of the canvas
stroke(0, 128, 128);
line(i, 0, mouseX, height - i);
line(i, 300, mouseX, i);
stroke(0, 0, 128);
line(width - i, 0, mouseX, height - i);
line(width - i, 300, mouseX, i);
//using the y value of y i made two sets of lines that are connected at the y value of the mouse
// by making two sets the curves can be moved from the top to the bottom of the canvas
stroke(128, 128, 0);
line(0, height - i, width- i, mouseY);
line(400, height - i, i, mouseY);
stroke(0, 128, 0);
line(0, i, width - i, mouseY);
line(400, i, i, mouseY);
}
}