rkondrup-project-10-Landscape

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// project-10



var trains = [];

function setup() {
    createCanvas(480, 480);

    frameRate(30);
}


function draw() {
    background(177, 214, 144); //light green
    drawTracks();

    updateAndDisplayTrains();
    removeTrainsThatHaveSlippedOutOfView();
    addNewTrainsWithSomeRandomProbability();
    textMessage();

}


function updateAndDisplayTrains(){
    // Update the train's positions, and display them.
    for (var i = 0; i < trains.length; i++){
        trains[i].move();
        trains[i].display();
    }
}


function removeTrainsThatHaveSlippedOutOfView(){
    // If a train has dropped off the left edge,
    // remove it from the array.
    //     Our solution is to just copy all the trains
    // we want to keep into a new array.
    var trainsToKeep = [];
    for (var i = 0; i < trains.length; i++){
        if (trains[i].x + trains[i].carWidth > 0) {
            trainsToKeep.push(trains[i]);
        }
    }
    trains = trainsToKeep; // remember the surviving trains
}


function addNewTrainsWithSomeRandomProbability() {
    // With a very tiny probability, add a new train to the end.
    var newtrainLikelihood = 0.005;
    if (random(0,1) < newtrainLikelihood) {
        trains.push(maketrain(width));
    }
}


// method to update position of train every frame
function trainMove() {
    this.x += this.speed;
}


// draw the train and some windows
function trainDisplay() {
    var floorHeight = 100;
    var bHeight = this.nFloors * floorHeight;
    stroke(0);
    push();
    noStroke();

    //to draw each of the 8 trains and assign different speeds

    translate(this.x, 0);
    push();
    fill(214, 128, 131);//red
    rect(0, 0 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(214+30, 128+30, 131+30);
    rect(0, 0 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*1.5, 0);
    push();
    fill(81, 176, 185);//turquoise
    rect(0, 60 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(81+30, 176+30, 185+30);
    rect(0, 60 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x, 0);
    push();
    fill(146, 95, 182);//purple
    rect(0, 60*2 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(146+30, 95+30, 182+30);
    rect(0, 60*2 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x*1.5, 0);
    push();
    fill(145, 205, 129);//green
    rect(0, 60*3 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(145+30, 205+30, 129+30);
    rect(0, 60*3 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*1.2, 0);
    push();
    fill(216, 174, 107);//yellow
    rect(0, 60*4 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(216+30, 174+30, 107+30);
    rect(0, 60*4 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x, 0);
    push();
    fill(92, 129, 213);//blue
    rect(0, 60*5 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(92+30, 129+30, 213+30);
    rect(0, 60*5 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(-this.x, 0);
    push();
    fill(222, 157, 104);//orange
    rect(0, 60*6 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(222+30, 157+30, 104+30);
    rect(0, 60*6 + 13, this.carWidth, 30)//top lighter shade rect
    pop();

    translate(this.x*2, 0);
    push();
    fill(222, 104, 179);
    rect(0, 60*7 + 8, this.carWidth, 40, 5);//main traincar mass
    fill(222+30, 104+30, 179+30);
    rect(0, 60*7 + 13, this.carWidth, 30)//top lighter shade rect
    pop();



    stroke(200);
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight*10), this.carWidth - 10, 10);
    }
    pop();
}


function maketrain(birthLocationX) {
    var trn = {x: birthLocationX,
                carWidth: 100,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: trainMove,
                display: trainDisplay}
    return trn;
}

function drawTracks() {
    fill(235, 230, 235);//long track color
    noStroke();
    for(i = 0; i < 20; i++) {
        for (j = 0; j < 200; j++) { //railroad ties
            push();
            fill(194, 175, 166); //tie color
            rect(5 + 15*j, + 5 + i*60, 5, 46);
            pop();
        }
        rect(0, 30*i + 10, width, 6);
    }
}
// to make text appear once each minute
function textMessage() {
    var s = second();
    textSize(14)
    fill(255);
    noStroke();
    if (s == 0) {
        text("ALL ABOARD !", width/2-30, height/2-28);
    }
    else if (s == 20) {
        text("CHOOCHOO !", width/2-30, height/2-28);
    }
    else if (s == 40) {
      text("ZOOM !", width/2-30, height/2-28);
    }

}

With this project, i very much wanted to avoid the elevation view that seemed to be trending among early submissions. I also wanted to create something somewhat whimsical, and so i eventually decided that rainbow trains were a childish sort of drawing that could spice up my ideate experience. I aimed for a very simple, clean aesthetic for this drawing, trying to show as little as was necessary in order to identify the moving objects. Many trains are the same base length, while others are elongated to add some variation. The trains also seem to converge at the left end of the page, which confused me but I also saw it like a visual point of interest, as if the trains are racing to be the first one across the page.