Project 4: String Art

sketch

var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 20;
var numLines2 = 20;
var numLines3 = 20;

function setup() {
    createCanvas(400, 300);
    background(220);
    line(100, 50, 300, 200); // top left triangle
    line(100, 50, 150, 250);
    dx1 = (100-100)/numLines1;
    dy1 = (50-50)/numLines1;
    dx2 = (300-150)/numLines1;
    dy2 = (250-200)/numLines1;
    line(350, 25, 200, 275); // top right triangle
    line(350, 25, 50, 125);
    dx3 = (350-350)/numLines2;
    dy3 = (25-25)/numLines2;
    dx4 = (200-50)/numLines2;
    dy4 = (275-125)/numLines2;
    line(100, 50, 50, 125); // connection lines
    line(350, 25, 300, 200);
    dx5 = (100-50)/numLines3;
    dy5 = (125-50)/numLines3;
    dx6 = (350-300)/numLines3;
    dy6 = (200-25)/numLines3;
}

function draw() {
    var x1 = 100; // top left triangle
    var y1 = 50;
    var x2 = 150;
    var y2 = 250;
    for (var i = 0; i <= numLines1; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 -= dy2;
    }
    var x3 = 350; // top right triangle
    var y3 = 25;
    var x4 = 50;
    var y4 = 125;
    for (var j = 0; j <= numLines2; j += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    var x5 = 100;
    var y5 = 50;
    var x6 = 350;
    var y6 = 25;
    for (var k = 0; k <= numLines3; k += 1) {
        line(x5, y5, x6, y6);
        x5 -= dx5;
        y5 += dy5;
        x6 -= dx6;
        y6 += dy6;
    }
    noLoop();
}

I wanted to see if I could create something that resembled a stage without having a lot of shapes. I ultimately chose to focus on the floor and lights to create both the playing space and the audience that surrounds it.