Sarita Chen – Project 10 – Landscape

sketch
 

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project 10
var hills = [];
var clouds = [];
var blocks = [];
var pipes = [];


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of hills
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        hills[i] = makeHill(rx);
    }


    for (var i = 0; i < 5; i++){
        var rx = random(width);
        clouds[i] = makeCloud(rx);
    }

    for (var i = 0; i < 5; i++){
        var rx = random(width);
        blocks[i] = makeBlock(rx);
     }   

    for (var i = 0; i < 1; i++){
        var rx = random(width);
        pipes[i] = makePipe(rx);
     } 

    frameRate(20);
}


function draw() {
    background(112,166,255); 
    
    displayHorizon();

    updateAndDisplayHills();
    removeHillsThatHaveSlippedOutOfView();
    addNewHillsWithSomeRandomProbability(); 

    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();

    updateAndDisplayBlocks();
    removeBlocksThatHaveSlippedOutOfView();
    addNewBlocksWithSomeRandomProbability();

    updateAndDisplayPipes();
    removePipesThatHaveSlippedOutOfView();
    addNewPipesWithSomeRandomProbability();

    backgroundDesign();
}


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

function updateAndDisplayClouds(){
 
    for (var i = 0; i <clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}

function updateAndDisplayBlocks(){
 
    for (var i = 0; i < blocks.length; i++){
        blocks[i].move();
        blocks[i].display();
    }
}
function updateAndDisplayPipes(){
 
    for (var i = 0; i < pipes.length; i++){
        pipes[i].move();
        pipes[i].display();
    }
}

function removeHillsThatHaveSlippedOutOfView(){
    var hillsToKeep = [];
    for (var i = 0; i < hills.length; i++){
        if (hills[i].x + hills[i].breadth > 0) {
            hillsToKeep.push(hills[i]);
        }
    }
    hills = hillsToKeep; // remember the surviving buildings
}

function removeCloudsThatHaveSlippedOutOfView(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if(clouds[i].x + clouds[i].breadth > 0){
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

function removeBlocksThatHaveSlippedOutOfView(){
    var blocksToKeep = [];
    for (var i = 0; i < blocks.length; i++){
        if(blocks[i].x + blocks[i].breadth > 0){
            blocksToKeep.push(blocks[i]);
        }
    }
    blocks = blocksToKeep;
}

function removePipesThatHaveSlippedOutOfView(){
    var pipesToKeep = [];
    for (var i = 0; i < pipes.length; i++){
        if(pipes[i].x + pipes[i].breadth > 0){
            pipesToKeep.push(pipes[i]);
        }
    }
    pipes = pipesToKeep;
}

function addNewHillsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newHillLikelihood = 0.007; 
    if (random(0,1) < newHillLikelihood) {
        hills.push(makeHill(width));
    }
}

function addNewCloudsWithSomeRandomProbability(){
    var newCloudLikelihood = 0.007;
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}


function addNewBlocksWithSomeRandomProbability(){
    var newBlockLikelihood = 0.007;
    if (random(0,1) < newBlockLikelihood) {
        blocks.push(makeBlock(width));
    }
}

function addNewPipesWithSomeRandomProbability(){
    var newPipeLikelihood = 0.002;
    if (random(0,1) < newPipeLikelihood) {
        pipes.push(makePipe(width));
    }
}


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

function cloudMove(){
    this.x += this.speed;
}

function blockMove(){
    this.x += this.speed;
}

function pipeMove(){
    this.x += this.speed;
}


// draw the building and some windows
function hillDisplay() {
    var floorHeight = 30;
    var hHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill(255,213,48);
    stroke(255,175,48);
    ellipse(0, -hHeight, this.breadth+50, hHeight+100);
    
    pop();
}

function cloudDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(10,bHeight,this.breadth+100,bHeight/2);
    pop();

    push();
    translate(this.x,height-40);
    fill(170,219,255);
    ellipse(30,-bHeight-200,this.breadth+100,bHeight/2);
    pop();



}

function blockDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(140,78,47);
    rect(30,-bHeight-100,30,30);
    pop();



}

function pipeDisplay(){
    var floorHeight = 10;
    var bHeight = this.nFloors * floorHeight;

    noStroke();
   

    push();
    translate(this.x,height-40);
    fill(77,175,28);
    rect(30,-bHeight-50,50,70);
    rect(20,-bHeight-50,70,10);
    pop();



}


function backgroundDesign(){
    fill(120,224,60);
    noStroke();
    rect(0,350,600,50);


    fill(255,212,71);
    rect(0,370,600,50);

   }

function makeHill(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: hillMove,
                display: hillDisplay}
    return bldg;
}

function makeCloud(birthLocationX){

    var cloudV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(1,10)),
        move: cloudMove,
        display: cloudDisplay}
    return cloudV;
}

function makeBlock(birthLocationX){

    var blockV = {x: birthLocationX,
        breadth: 20,
        speed: -1.0,
        nFloors: round(random(5,5)),
        move: blockMove,
        display: blockDisplay}
    return blockV;
}

function makePipe(birthLocationX) {
    var pipeV = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(1,3)),
                move: pipeMove,
                display: pipeDisplay}
    return pipeV;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

My project is just a remake of the first world in Super Mario. There are pipes, the basic hills in the background, clouds and item blocks.