String Art

sketch
//Jasmin Kim
//Section D

var numLines = 70;


function setup() {
    createCanvas(400, 300);
}

function draw(){
    background(0);
    var x1 = -10;
    var y1 = -10;
    var x2 = width;
    var y2 = height;
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,150,100);
        line(mouseX, y1*i, x2*i, y2*i);         //right top green line
        stroke(200,i,90);
        line(x1*i,mouseY,x2*i,y2*i);            //left bottom red line
        stroke(i,i,190);
        line(mouseX*i,mouseY*i,width,height);   //blue line going over red and green

    }
    for(var i=0; i<= width; i+=30){
        stroke(255,255,0);                      //yellow curve
        line(mouseX, i, i, height - mouseY)
        line(mouseX, i, i, width - mouseX)
        stroke(255);                            //white curve
        line(width-i,y,x,height-i);     


    }
}

While I was processing this coding, I tried to display contrasting lines depending on each other’s position. I also thought about how the lines will move when my mouse moves towards the left or right.

Leave a Reply