yushano_Project 10

sketch

var choice = [];
var buildings = [];
var trees = [];
var cars = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
 


function setup() {
    createCanvas(480, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}

function draw() {
    background(205,233,233); 


    // display the background
    stroke(0);
    strokeWeight(1);
    drawMountain();
    displayHorizon();
    

    // draw objects
    // Buildings
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    // Trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    // Cars
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();


    // snow
    drawSnow();

    // window frame
    strokeWeight(40);
    stroke(230);
    line(0,0,width,0);
    line(0,0,0,height);
    line(0,height,width,height);
    line(width,0,width,height);
}

function drawMountain() {
    fill(246,255,223); 
    beginShape(); 
    vertex(0, 200);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 30, 200);
        vertex(x, y);    
    }
    vertex(width, 200);   
    endShape();
}

function drawSnow() {
    var xS = 10;
    var yS;
    for (var i=0; i< 50; i++) {
        yS = 0;
        for (var j=0; j< 25; j++){
            fill(255);
            noStroke();
            ellipse(xS, yS, 5);
            yS += random(5,20);
        }
        xS += random(8,25);    
    }
}

    

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


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


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.02; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255,255,0); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    var wGap = this.breadth/16;
    var xW = this.breadth/16;
    //draw the windows
    for (var j=0; j < 5; j++) {
        for (var i = 0; i < this.nFloors; i++) {
            fill(153,204,255);
            stroke(102,178,255);
            rect(xW, -15 - (i * floorHeight), wGap*2 , 10);
        }
        xW += wGap*3;
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                nFloors: round(random(3,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

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


function removeTreesThatHaveSlippedOutOfView() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the current trees
}


function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.03; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}


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

// draw the tree and some ornaments
function treeDisplay() { 
    stroke(0); 
    push();
    translate(this.x, 0-this.treeH/3);
    fill(0,102,51)
    triangle(0, height-40, this.breadth/2, height-this.treeH-80, this.breadth, height-40); 
    fill(108,22,22)
    rect(this.breadth/2-10, height-40, 20, this.treeH/3);
    var x0 = this.breadth/6;
    for (var i=0; i<5; i++){
        fill(255,0,0);
        ellipse(x0, height-40-5, 6);
        x0 += this.breadth/6;
    }
    pop();
}


function makeTree(birthLocationX) {
    var tree = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                treeH: round(random(30,80)),
                move: treeMove,
                display: treeDisplay}
    return tree;
}

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


function removeCarsThatHaveSlippedOutOfView() {
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep; // remember the current cars
}


function addNewCarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new car to the end.
    var newCarLikelihood = 0.02; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


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

// draw the car
function carDisplay() {
    stroke(0); 
    push();
    translate(this.x, 0);
    fill(180)
    rect(0, height-40-this.carWid/6, this.carWid, this.carWid/6);
    rect(this.carWid/4, height-40-this.carWid/30*11, this.carWid/5*3, this.carWid/5); 
    ellipse(this.carWid/6, height-40, this.carWid/6);
    ellipse(this.carWid/6*5, height-40, this.carWid/6);
    
    
    pop();
}


function makeCar(birthLocationX) {
    var car = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                carWid: round(random(30,50)),
                move: carMove,
                display: carDisplay}
    return car;
}


// Draw the soil 
function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
    fill(132, 75,47);
    rect (0, height-50, width, 50);
}

So, I started from the example code that professor provided for us. I tried to understand how all the things work. Then, I added more elements into the landscape. First, I added the mountain landscape in the background. Then, I change the orientations of the windows in the house. Then, I added the Christmas trees into the scene. Next, I added vehicles- cars to make the picture more fun. At last, I was inspired by the movie “The Power of Ten”. So, I give the animation a picture frame, making it look like people watching outside of a window. Also, I simulated the feeling of snowing to add more fun.