Matthew Erlebacher Project-04 String Art

Line Art

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-04

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

    var verticalY = height
    // Creates variable for verticle lines
    var horizontalX = width
    // Creates variable for horizontal lines
    var graphSpace = 25
    // Creates space for grid lines
    var SpaceX = 10
    // Creates spacing between

    for (var verticleX = 25; // Gives a variable for the x-coordinate of each line
        verticleX <= 375; // Makes the lines stop at the end of the canvas 
        verticleX += graphSpace /* Increases the x-coordinate of each line */) {
        stroke(255);
        line(verticleX, 0, verticleX, verticalY);
    } // Creates white verticle lines across the canvas

    for (var horizontalY = 25; // Gives a variable for the y-coordinate of each line
        horizontalY <= 275; // Makes the lines stop at the end of the canvas
        horizontalY += graphSpace /* Increases the y-coordinate each line */) {
        stroke(255);
        line(0, horizontalY, horizontalX, horizontalY)
    } // Creates white horizontal lines across the canvas

    for (var greenX = 0; // Creates a variable for the green lines
        greenX < width / 2; // Sets a limit on the green lines
        greenX += SpaceX /* Increases the variable greenX */) {
        stroke(0, 255, 0);
        line(greenX /* Varies the first point */, height / 2, width / 2,
            height / 2 - 10 - greenX /* Makes it so the second point increases and is always over the midpoint */);
    } // Creates pattern of green lines

    for (var redX = 0; // Creates a variable for red lines
        redX < width / 2; // Sets a limit on the red lines
        redX += SpaceX /* Increases the variable redX */) {
        stroke(255, 0, 0);
        line(redX /* Varies the first point */, height / 2, width / 2,
            height / 2 + 10 + redX /* Makes it so the second point increases and is always under the midpoint */);
    } // Creates pattern of red lines

    for (var grayX = 400; // Creates a variable for the gray lines
        grayX > width / 2; // Sets a limit on the gray lines
        grayX -= SpaceX /* Decreases the variable grayX */) {
        stroke(125);
        line(grayX /*Varies the first point */, height / 2, width / 2,
            height / 2 + 410 - grayX /* Makes it so the second point increases and is always under the midpoint */);
    }
    
    for (var blueX = 400; // Creates a variable for the blue lines
        blueX > width / 2; // Sets a limit on the blue lines
        blueX -= SpaceX /* Decreases the variable blueX */) {
        stroke(0, 0, 255);
        line(blueX /* Varies the first point */, height / 2, width / 2,
            height / 2 - 410 + blueX /* Makes it so the second point increases and is always over the midpoint */);
    }

}

When I started this assignment I had no idea what to do for this project. However, after I reviewed the lecture notes and looked at some examples on the internet I eventually figured out what I wanted to do. I decided to have the lines create a diamond formation since it seemed visually appealing. I also decided to include grid lines in the background since it made the lines pop more.