Project 4 – String Art

I had a lot of fun changing the colors and locations of the lines based on mouse movement. It was also cool to see the strings and colors overlap and interact together.

Maggie String Art
//Maggie Ma
//Section D

var dx1;
var dy1;
var dx2;
var dy2;
var numLines =100;

function setup() {
    createCanvas(400, 500);
    background(200);
    line(0, 0, 0, 400);
    line(0, 400, 0, 500);
    dx1 = (0)/numLines;
    dy1 = (500-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (500-500)/numLines;
}

function draw() {
	background(mouseX,mouseY,100); //colorful background changes w/ mouse
	strokeWeight(.75);

    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 400;
    for (var i = 0; i <= numLines; i += 1) {

    	stroke(0,0,255) //bottom left lines (blue)
        line(x1, y1, x2+mouseX, y2);

        stroke(255,0,0); //top right lines (red)
        line(x1+400+mouseX, y1+500, x2-400, y2-400);

        stroke(0,255,0); //top left green lines
        line(x1,y1, x2-400+mouseX, mouseY);

        stroke(mouseY); //moving lines black to white
        line(width/2*(i/20), height/2*(i/20), mouseX*20, mouseY*20);
        line(mouseX,400,i*5,mouseY);
        line(i*5, mouseY, mouseX, 500);
        line(mouseX,i*5, 400, mouseY);

        stroke(mouseX,100,mouseY); //moving lines colorful
        line(0,i*5, mouseX, 0);
        line(0,mouseY, 0, i*10);
     	line(mouseX, i*5, 0, 500);


        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}

Leave a Reply