Project 11 – Landscape

var trees = [];
var cars = [];
var hillHeight = []; //Stores the y values of the hills
var noiseParam = 5;
var noiseStep = 0.02; //Varies the smoothness of the hills
var x = [];

function setup() {
    createCanvas(480, 480);
    background(220);
    //creates a canvas that starts with trees
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trees[i] = makeTree(rx);
    }

    //for loop creates the values for the mountains in the background
    for(var i = 0; i<=width/5; i++){
        var n = noise(noiseParam);
        //Adjust size to fit the canvas
        var value = map(n, 0, 1, 0, .5*height);
        hillHeight.push(value);
        noiseParam += noiseStep;
    }

    frameRate(10);
}

function draw() {
    //sky
    background(0, 230, 255);
    //continually makes the mountains in the background scroll
    if(hillHeight.length>width/5){
        hillHeight.shift();
        for(var i = 0; i <= width / 5; i++){
            var n = noise(noiseParam);
            var value = map(n, 0, 1, 0, .5*height);
            hillHeight.push(value);
            noiseParam += noiseStep;
        }
    }
    //color of the hills
    fill(130, 130, 130);
    //creates the shape of hills to be able to fill under the line
    beginShape();
    vertex(0, height);
    for(var i = 0; i <= width/5; i++){
        vertex(i*5, hillHeight[i])
    }
    vertex(width, height);
    endShape();
    //foreground grass
    fill(0, 255, 0);
    noStroke();
    rect(0, 360, width, 120);
    //road
    fill(35);
    stroke(0);
    rect(0, 260, width, 100);
    //background grass
    fill(0, 225, 0);
    noStroke();
    rect(0, 200, width, 60);

    //creates the trees on the canvas and conditions for new/old
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    //creates the cars on the canvas and conditions for new/old
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();
}


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


function removeTreesThatHaveSlippedOutOfView(){
    //defines trees that have gone off canvas and recreates the array
    //without those trees
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}


function addNewTreesWithSomeRandomProbability() {
    //add a tree at the end based upon a probability
    var newTreeLikelihood = 0.02;
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}


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


function treeDisplay() {
    fill(255);
    stroke(0);
    push();
    translate(this.x, 240);
    fill(133, 87, 35);
    //tree trunk
    rect(0, -this.tHeight, this.breadth, this.tHeight);
    noStroke();
    //tree branches
    fill(78, 105, 26);
    circle(this.breadth/6, -this.tHeight, this.breadth*2);
    circle(this.breadth*(5/6), -this.tHeight, this.breadth*2);
    circle(this.breadth/2, -this.tHeight-this.breadth/2, this.breadth*2);
    pop();
}


function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                //width of the trees
                breadth: random(10, 40),
                speed: -3.0,
                //tree height
                tHeight: random(50, 130),
                move: treeMove,
                display: treeDisplay}
    return tr;
}

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


function removeCarsThatHaveSlippedOutOfView(){
    //defines if a car is off the canvas, recreates the array to keep
    //cars still on canvas and remove ones that have moved off
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep;
}


function addNewCarsWithSomeRandomProbability() {
    // Adds a car based upon a probability
    var newCarLikelihood = 0.02;
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


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

function carDisplay() {
    //colors the car randomly
    fill(this.clr);
    push();
    translate(this.x, 290);
    //body of the car
    rect(0, 0, this.breadth, 30);
    //windows as roof of the car
    fill(255, 255, 255, 50);
    quad(15, 0, this.breadth*.25, -20, this.breadth*.75,
         -20, this.breadth-5, 0);
    //wheels
    fill(0);
    circle(20, 25, 25);
    circle(80, 25, 25);
    pop();
}

function makeCar(startLocationX){
    var car = {x: startLocationX,
               breadth: 100, // length of car
               //random color of each car
               clr: color(random(255), random(255), random(255)),
               //random speeds of cars
               speed: random(-5, -10),
               move: carMove,
               display: carDisplay}
    return car;
}