Project-04-String-Art

I used layered color and stroke width within one loop to create overlapping line intersections, so the overlapping create some dimensional ’rounded’ effects. I also didn’t want it to be only static, so I incorporated two mouse-activated line systems to make it more interactive.

lineartok

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

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

function draw() {
	background(100);
    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
    //base black lines
        strokeWeight(0.5);
        stroke('black');
        line(0,x2,400,x1);
        line(x1, y1, x2, y2);
        line(x2,y1+200,x1-400,y2+200);
    //white lines
        stroke('white');
        line(mouseX,mouseY,y1,y2);  
        line(x2,y1+400,x1,y2+400);
        line(0,400,x1,y2-100);
        line(400,200,x1-600,y2);
    //red lines
        strokeWeight(2);
        stroke('red');
        line(x1,x2,mouseX,mouseY);  
        line(x2-200,y1,x1-600,y2);
        line(100,400,x2,y2+400);
        line(x2,0,y2,400);
    //black lines as highest layer
        stroke('black');
        line(x2,y1+200,x1-400,y2);
        line(x2-200,y1,x1-200,y2);
        line(400,100,y1,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}