Author: Trex

sketch

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var dx13;
var dy13;
var dx14;
var dy14;
var dx15;
var dy15;
var dx16;
var dy16;
var dx17;
var dy17;
var dx18;
var dy18;
var numLines = 30;


function setup() {
    createCanvas(400, 400);
    background("yellow");

    //white middle strings
    dx1 = (180-50)/numLines;
    dy1 = (250-150)/numLines;
    dx2 = (270-340)/numLines;
    dy2 = (200-100)/numLines;
    
    //left white strings
    dx3 = (150-110)/numLines;
    dy3 = (150-100)/numLines;
    dx4 = (260-300)/numLines;
    dy4 = (140-50)/numLines;

    //middle white strings
    dx5 = (150-50)/numLines;
    dy5 = (260-150)/numLines;
    dx6 = (140-90)/numLines;
    dy6 = (30-150)/numLines;

    //upper black strings
    dx7 = (230-100)/numLines;
    dy7 = (280-350)/numLines;
    dx8 = (350-150)/numLines;
    dy8 = (180-280)/numLines;

    //loweer black strings
    dx9 = (320-200)/numLines;
    dy9 = (250-50)/numLines;
    dx10 = (200-250)/numLines;
    dy10 = (300-30)/numLines;

    //left blue strings
    dx11 = (250-150)/numLines;
    dy11 = (80-200)/numLines;
    dx12 = (120-100)/numLines;
    dy12 = (20-250)/numLines;

    //middle blue strings
    dx13 = (240-150)/numLines;
    dy13 = (80-200)/numLines;
    dx14 = (220-100)/numLines;
    dy14 = (120-250)/numLines;

    //right blue strings
    dx15 = (240-150)/numLines;
    dy15 = (80-200)/numLines;
    dx16 = (220-100)/numLines;
    dy16 = (120-250)/numLines;

}

function draw() {
    var x1 = 50;
    var y1 = 150;

    var x2 = 270;
    var y2 = 200;

    var x3 = 50;
    var y3 = 150;

    var x4 = 20;
    var y4 = 150;

    var x5 = 100;
    var y5 = 180;

    var x6 = 90;
    var y6 = 350;

    var x7 = 300
    var y7 = 250;

    var x8 = 250;
    var y8 = 180;

    var x9 = 320;
    var y9 = 250;

    var x10 = 380;
    var y10 = 80;

    var x11 = 150;
    var y11 = 200;

    var x12 = 100;
    var y12 = 250;

    var x13 = 250;
    var y13 = 200;

    var x14 = 80;
    var y14 = 250;

    var x15 = 220;
    var y15 = 200;

    var x16 = 180;
    var y16 = 250;

    for (var i = 0; i <= numLines; i += 1) {
        stroke("white")
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        line(x3, y3, x4, y4);
        x3 -= dx3;
        y3 -= dx3;
        x4 += dx4;
        y4 += dy4;
        line(x5, y5, x6, y6);
        x5 -= dx5;
        y5 -= dx5;
        x6 += dx6;
        y6 += dy6;

        stroke("black")
        line(x7, y7, x8, y8);
        x7 -= dx7;
        y7 -= dx7;
        x8 += dx8;
        y8 += dy8;
        line(x9, y9, x10, y10);
        x9 -= dx9;
        y9 -= dx9;
        x10 += dx10;
        y10 += dy10;

        stroke("blue")
        line(x11, y11, x12, y12);
        x11 += dx11;
        y11 += dx11;
        x12 += dx12;
        y12+= dy12;

        line(x13, y13, x14, y14);
        x13 += dx13;
        y13 += dx13;
        x14 += dx14;
        y14+= dy14;

        line(x15, y15, x16, y16);
        x15 += dx15;
        y15 += dx15;
        x16 += dx16;
        y16+= dy16;



    }
    noLoop();
}

The difficult part of this project was understanding what numbers to change in order to get the shape that I wanted and why it changed, but when I did, I just kept adding to my canvas and adjusting the numbers to get the design I wanted.