Project 04: String Art

sketch

// John Henley; jhenley; 15-104 section D

// Initiate variables
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines = 50;

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

function draw() {
    // Set colors
    background(0);
    stroke(255, 255, 255);

    // First set (bottom left)
    dx1 = 0/numLines;
    dy1 = (-mouseY)/numLines;
    dx2 = mouseX/numLines;
    dy2 = 0/numLines;
    var x1 = 0;
    var y1 = 400;
    var x2 = 400;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    // Second set (top right)
    dx3 = 400/numLines;
    dy3 = mouseY/numLines;
    dx4 = mouseX/numLines;
    dy4 = 400/numLines;
    var x3 = 0;
    var y3 = 0;
    var x4 = 400;
    var y4 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    line(0, 0, 400, mouseY);

    // Third set (middle)
    dx3 = 400/numLines;
    dy3 = mouseY/numLines;
    dx4 = mouseX/numLines;
    dy4 = 400/numLines;
    var x3 = 0;
    var y3 = 0;
    var x4 = 400;
    var y4 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    dx3 = mouseX/numLines;
    dy3 = 100/numLines;
    dx4 = 100/numLines;
    dy4 = 0/numLines;
    var x3 = 50;
    var y3 = 400;
    var x4 = 350;
    var y4 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 -= dx3;
        y3 += dy3;
        x4 -= dx4;
        y4 -= dy4;
    }

}

I wanted to make an interactive piece with lines that crossed and span the canvas, transforming based on the position of the mouse.