Jamie Dorst Project 04 String Art

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
Project-04
*/

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

function draw() {
    // variables
    var x1 = 10;
    var y1 = 10;
    var x2 = 20;
    var y2 = 20;
    var x3 = 350;
    var y3 = 15;
    var x4 = 10;
    var y4 = 295;
    var x5 = 10;
    var y5 = 10;
    var x6 = 20;
    var y6 = 20;  
    var x7 = 350;
    var y7 = 15; 
    var x8 = 10;
    var y8 = 295;
// BOTTOM LEFT CORNER

    // draw bottom left white background lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x5 += 9;
        y5 += 11;
        line(0, y5, x5, 300);
    }
    // draw bottom left blue lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('blue');
        x1 += 10;
        y1 += 12;
        line(0, y1, x1, 300);
    }

// TOP RIGHT CORNER

    // draw top right white background lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x6 += 19;
        y6 += 22;
        line(400, y6, x6, 0);
    }
    // draw top right green lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('green');
        x2 += 20;
        y2 += 23;
        line(400, y2, x2, 0);
    }

// TOP LEFT CORNER

    // draw top left white background lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x7 -= 26;
        y7 += 24;
        line(x7, 0, 0, y7);
    }
    // draw top left red lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('red');
        x3 -= 27;
        y3 += 25;
        line(x3, 0, 0, y3);
    }

// BOTTOM RIGHT CORNER

    // draw bottom right yellow lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x8 += 16;
        y8 -= 18;
        line(400, y8, x8, 300);
    }
    // draw bottom right yellow lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('yellow');
        x4 += 15;
        y4 -= 19;
        line(400, y4, x4, 300);
    }
}

For this project I wanted to practice doing for loops. I had trouble figuring out how to move the lines from the bottom left corner, especially getting them into the top left and bottom right corners, because I had to make some values negative. After I figured that out, I wanted to emphasize the shapes of the lines so I made the background black, and added background lines to each corner to make them pop. Overall I found this project sort of difficult, but it was cool once it finally worked.