Ammar Hassonjee – Project 11 – Generative Landscape

Train Landscape

/* Ammar Hassonjee
    ahassonj@andrew.cmu.edu
    Section C
    Project 11
  */

// global variables and arrays declared to hold objects
var traintracks = [];
var tracky = 0; //position of train tracks
var oases = []; // array for oases objects
var trees = []; // array for tree objects

function setup() {
    createCanvas(480, 480);
    // for loop that pushed train track objects to array
    for (var i = 0; i < 480; i += 20) {
        traintracks.push(makeTrainTracks(210, i));
        // creates a random amount of oases to add to the oases array each time
        // the program is loaded
        if (i % 240 === 0) { //random iteration

            // variables initialized to pass as parameters for making the oases objects
            var xloc = int(random(width / 4));
            var yloc = int(random(height));
            var shade = int(random(200, 255));
            var xsize = int(random(60, 100));
            var ysize = int(random(100, 150));
            oases.push(makeOasis(xloc, yloc, shade, xsize, ysize));
        }

    }

    frameRate(20);

}

function draw() {

    background(250, 245, 200);
    fill(97, 74, 66);
    rect(200, 0, 10, height); // train track boundaries
    rect(270, 0, 10, height); // train track boundaries

    strokeWeight(1);
    // calling the track functions to continously move the tracks and add oases objects to canvas
    updateTracks();
    removeTracks();
    addTracks();

    // function called for drawing the train object
    drawTrain();

}

// updating the position of each track and oases in each of the arrays
function updateTracks() {
    // for loop that calls train track objects and moves/displays them
    for (var i = 0; i < traintracks.length; i++) {
        traintracks[i].move();
        traintracks[i].display();
      }

      // for loop that calls oases objects and moves/displays them
    for (var j = 0; j < oases.length; j++) {
        oases[j].move();
        oases[j].display();
    }

          // for loop that calls tree objects and moves/displays them
    for (var k = 0; k < trees.length; k++) {
        trees[k].move();
        trees[k].display();
    }
}

function addTracks() {
    var position = traintracks[traintracks.length - 1].y; // initializing traintracks position
    traintracks.push(makeTrainTracks(210, position + 20)); // adding a traintracks object to the end of the array

    var chance = int(random(0, 40)); // making sure the chance of appending an oases object is low
    if (chance === 2) {
        // variables declared as parameters to pass to the oases object
        var xloc = int(random(width / 4));
        var yloc = height;
        var shade = int(random(200, 255));
        var xsize = int(random(40, 60));
        var ysize = int(random(100, 400));
        oases.push(makeOasis(xloc, yloc, shade, xsize, ysize));
    }

    // varying the chance of the trees appearing
    var chance2 = int(random(0, 25));
    if (chance2 === 4) {  // making sure the trees appear on both sides of the tracks
        var xpo = int(random(180)); // xvariable for first half of the canvas
        var ypo = height;
        var treeColor = int(random(100, 255));
        var treeSize = int(random(20, 40));
        trees.push(makeTree(xpo, ypo, treeSize, treeColor));
    } else if (chance === 6) {
        var xpo = int(random(300, width)); // x variable for second half of the canvas
        var ypo = height;
        var treeColor = int(random(100, 255));
        var treeSize = int(random(20, 30));
        trees.push(makeTree(xpo, ypo, treeSize, treeColor));
    }
}

function removeTracks() {
    // creating a duplicate array to keep track objects that are within the canvas
    var trackKeep = [];
    for (var i = 0; i < traintracks.length; i++) {
        if (traintracks[i].y > -10) {
            trackKeep.push(traintracks[i]);
        }
      }
    traintracks = trackKeep; // reassigning the tracks array to the duplicate array

    // creating a duplicate array to keep track objects that are within the canvas
    var oasesKeep = [];
    for (var i = 0; i < oases.length; i++) {
        if (oases[i].y > -40) {
            oasesKeep.push(oases[i]);
        }
      }
    oases = oasesKeep; // reassigning the oases array to the duplicate array

    // creating a duplicate array to keep track objects that are within the canvas
    var treeKeep = [];
    for (var i = 0; i < trees.length; i++) {
        if (trees[i].y > -40) {
            treeKeep.push(trees[i]);
        }
      }
    trees = treeKeep; // reassigning the trees array to the duplicate array
}

function trackMove() { // moving the position of each track and oases object
    this.y -= 10;
}

function trackDisplay() { // displaying each track object with rectangles
    strokeWeight(1);
    fill(97, 74, 66);
    rect(this.x, this.y, 60, 10);
}

function makeTrainTracks(xpos, ypos) { //object for making traintrack
    var trck = {x: xpos, y: ypos, move: trackMove,
                display: trackDisplay}
    return trck;
}

function makeOasis(xco, yco, color, xscale, yscale) { //object for making oases
    var oasis = {x: xco, y: yco, move: trackMove,
                display: oasisDisplay, tone: color,
                size1: xscale, size2: yscale};
    return oasis;
}

function oasisDisplay() { // displaying the oases objects as an ellipse
    fill(0, this.tone, this.tone);
    noStroke();
    ellipse(this.x, this.y, this.size1, this.size2);
    strokeWeight(1);
    stroke(0);
}

function makeTree(xp, yp, xsize, colour) { //function for making tree objects
    var tree1 = {x: xp, y: yp, move: trackMove, display: treeDisplay,
                    tone: colour, size1: xsize};
    return tree1;

}

function treeDisplay() { // displaying the tree objects by drawing from parameters
    noStroke();
    fill(0, this.tone, 0);
    ellipse(this.x, this.y, this.size1 * 1.5);
    fill(0, this.tone - 50, 0);
    ellipse(this.x, this.y, this.size1);
}

function drawTrain() { // drawing the train object as a static image

    noStroke();
    fill(200, 100, 100);
    rect(207, 220, 67, 160);
    rect(207, 390, 67, 160);

    strokeWeight(4);
    stroke(0);
    noFill()
    rect(230, 382, 20, 7);
    strokeWeight(2);
    rect(220, 230, 40, 120);
    rect(220, 410, 40, 120);

}

For this project, I chose to animate an aerial view over a train moving across a desert. I’ve always been interested in Wild West type scenes, so the image of a train moving past oases and small little cacti is one that stood out to me. I attached a sketch of my thought process at the bottom.