project 04: string art

/*  atayao
    lab section E
    project 04: string art
*/ 

// incrementing variables
var connectX = 150;    // starting x for all connecting lines
var connectY1a = 75;    // top of shape A
var connectY1b = 125;    // bottom of shape A
var connectY2a = 160;    // top of shape B
var connectY2b = 190;    // bottom of shape B
var connectY3a = 250;    // top of shape C
var connectY3b = 350;    // bottom of shape C
var xa = 200;    // y-point of top share
var xb = 50;    // y-point of middle shape
var xc = 120;    // y-point of bottom shape
var dx1a;    // change in x for top half of top shape
var dx1b;    // change in x for bottom half of top shape
var dx2a;    // change in x for top half of middle shape
var dx2b;    // change in x for bottom half of middle shape
var dx3a;    // change in x for top half of bottom shape

// number of lines that connect two anchors
var numLines = 15;

function setup() {
    createCanvas(300, 400);
    background(0);
    stroke(255);

    // ANCHOR LINES

    stroke(100);
    line(width/2, 0, width/2, 350);    // center line

    stroke(255);
    strokeWeight(1.5);
    // shape A
    line(100, 100, 200, 100);    // anchor 1A (horizontal)
    line(150, 75, 150, 125);    // anchor 1B (vertical)
    line(100, 100, 150, 75);    // anchor 2 (top-left diagonal)
    line(150, 125, 200, 100);    // anchor 3 (bottom-right diagonal)
    // shape B
    line(50, 175, 250, 175);    // anchor 4A (horizontal)
    line(150, 160, 150, 190);    // anchor 4B (vertical)
    line(50, 175, 150, 160);    // anchor 5 (top-left diagonal)
    line(150, 190, 250, 175);    // anchor 6 (bottom-right diagonal)
    // shape C
    line(120, 300, 180, 300);    // anchor 7A (horizontal)
    line(150, 250, 150, 350);    // anchor 7B (vertical)
    line(120, 300, 150, 350);    // anchor 8 (bottom-left diagonal)
    line(150, 250, 180, 300);    // anchor 9 (top-right diagonal)

    // INCREMENTS
    dx1a = (100-xa)/numLines;
    dx1b = (200-100)/numLines;
    dx2a = (250-50)/numLines;
    dx2b = (50-250)/numLines;
    dx3a = (180-120)/numLines;
    dx3b = (120-180)/numLines;
}

function draw () {
    stroke(200);    // color of connecting lines

    // TOP SHAPE
    // top half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY1a, xa, 100);
        xa += dx1a;
    }
    // bottom half
    xa = xa + dx1b
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY1b, xa, 100);
        xa += dx1b;
    }

    // MIDDLE SHAPE
    // top half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY2a, xb, 175);
        xb += dx2a;
    }
    // bottom half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY2b, xb + dx2b, 175);
        xb += dx2b;
    }

    // BOTTOM SHAPE
    // top half
    for (var i = 0; i <=numLines; i++) {
        line(connectX, connectY3a, xc, 300);
        xc += dx3a;
    }
    // bottom half
    xc  = xc + dx3b;
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY3b, xc, 300);
        xc += dx3b;
    }
    noLoop();
}