Hannah K-Project-04

sketch-213.js

function setup() {
    createCanvas(640, 480);
    background(255,220,240);
}

function draw() {
    // Point given by coordinates (topXmid, topYmid) 
    // is where all lines drawn from left of canvas meet
    var topXmid = width/2;
    var topYmid = 0;
    // Point given by coordinates (rightXmid, rightYmid)
    // is where all lines drawn from top of canvas meet
    var rightXmid = width;
    var rightYmid = height/2;
    // Point given by coordinates (bottomXmid, bottomYmid) 
    // is where all lines drawn from right of canvas meet
    var bottomXmid = width/2;
    var bottomYmid = height;
    // Point given by coordinates (leftXmid, leftYmid)
    // is where all lines drawn from bottom of canvas meet
    var leftXmid = 0;
    var leftYmid = height/2;

    var tX = 0; // Initial x-value of lines drawn from top
    var bX = 640; // Initial x-value of lines drawn from bottom
    var rY = 0; // Initial y-value of lines drawn from top
    var lY = 480; // Intial y-value of lines drawn from bottom

    // tX = Canvas top x-value. Make bigger.
    stroke(72,118,255);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);        
        var tY = 0; // Canvas top y-value is zero
        line(tX, tY, rightXmid, rightYmid);
        // (width/2) / 5 is to create 5 equal 
        // x increments across half the canvas width
        tX = tX+((width/2)/5);
    }

    // rY = Canvas right y-value; Make bigger.
    stroke(39,64,139);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var rX = width;
        line(rX, rY, bottomXmid, bottomYmid);
        // (height/2) / 5 is to create 5 equal
        // y increments across half the canvas height
        rY = rY+((height/2)/5);
    } 

    // bX = Canvas bottom x-value; Make smaller.
    stroke(99,184,255);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var bY = height;
        line(bX, bY, leftXmid, leftYmid);
        bX = bX-((width/2)/5);
    }


    // lY = Canvas left y-value. Make smaller. 
    stroke(0,229,238);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var lX = 0; // Canvas left x-value is zero
        line(lX, lY, topXmid, topYmid);
        lY = lY-((height/2)/5);
    }

}

This project definitely seemed simpler before I started! I did not realize I would need to use as many variables as I ended up using. Drawing a picture and calculating the coordinates before I started really helped.