ssontag-Project-04

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.

sketch

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);
    }
}