Bettina-Project10-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 10

var buildings = []; //the big icebergs
var sparkles = []; //yellow sparkles on bottom

function setup() {
    createCanvas(309, 480);
    frameRate(10);
    
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    
    for (var h = 0; h < 5; h ++) {
        var rz = random(width);
        sparkles[h] = makeSparkle(rz);
    }
}   
 


function draw() {
    background("#364442");
    noStroke();
    fill("#5e7d6f");
    rect(0,135,width,346);

    drawBoat();
   
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    
    updateAndDisplaySparkles();
    removeSparklesThatHaveSlippedOutOfView();
    addNewSparklesWithSomeRandomProbability();
    
}

//draw and update position of boat
var boatX = 125;
var boatY = 137;
var boatSpeed = 3

function drawBoat() {
    fill("#141916")
    stroke(2);
    beginShape(); //boat body
    vertex(boatX,boatY);
    vertex(boatX+9,boatY-11);
    vertex(boatX-16,boatY-11);
    vertex(boatX-16,boatY-58);
    vertex(boatX-18,boatY-58);
    vertex(boatX-18,boatY-11);
    vertex(boatX-42,boatY-11);
    vertex(boatX-34,boatY);
    endShape();
    fill("#d5d9b8");
    noStroke();
    beginShape(); //right boat sails
    vertex(boatX-14,boatY-17);
    vertex(boatX-14,boatY-59);
    vertex(boatX+14,boatY-17);
    endShape();
    beginShape(); //left boat sails
    vertex(boatX-20,boatY-17);
    vertex(boatX-37,boatY-17);
    vertex(boatX-20,boatY-47);
    endShape();
    boatX += boatSpeed; //makes boat move left and right across canvas
    if (boatX >=width) {
        boatSpeed *= -1;
    }
    else if (boatX <= 0) {
        boatSpeed *= -1;
    }
}


//Below: set of functions that create the big icebergs
function updateAndDisplayBuildings(){
    // Update the iceberg's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = []; //says building because using code template
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth +30 > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving icebergs
}


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


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

// draw the icebergs
function buildingDisplay() {
    fill("#a4bcad"); 
    noStroke(); 
    push();
    translate(this.x, this.y);
    beginShape(); //draws iceberg shape using vetices
    vertex(this.x,this.y);
    vertex(this.x-69,this.y+93);
    vertex(this.x-143,this.y+105);
    vertex(this.x-193,this.y+31);
    vertex(this.x-179,this.y-114);
    vertex(this.x-139,this.y-229);
    vertex(this.x-120,this.y-213);
    vertex(this.x-93,this.y-120);
    endShape();
    pop();
}


function makeBuilding(birthLocationX) { //creates iceberg objects to store in array
    var bldg = {x: birthLocationX,
                y: 150,
                breadth: random(60,90),
                speed: 1,
                sparklespeed: random(0.5,1),
                nFloors: round(random(1,1.5)),
                move: buildingMove,
                display: buildingDisplay
               }
    return bldg;
}





//Below: set of functions that generate the yellow sparkles
function updateAndDisplaySparkles(){
    for (var i = 0; i < sparkles.length; i++){
        sparkles[i].move();
        sparkles[i].display();
    }
}


function removeSparklesThatHaveSlippedOutOfView(){
    var sparklesToKeep = [];
    for (var i = 0; i < sparkles.length; i++){
        if (sparkles[i].x + sparkles[i].breadth +30 > 0) {
            sparklesToKeep.push(sparkles[i]);
        }
    }
    sparkles = sparklesToKeep;
}


function addNewSparklesWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newSparkleLikelihood = 0.1; 
    if (random(0,1) < newSparkleLikelihood) {
        sparkles.push(makeSparkle(width));
    }
}



function sparkleMove() {
    this.x -= this.speed;
}
    


function sparkleDisplay() { 
    push();
    fill("#ffce71");
    translate(this.x+100, random(30) + this.y);
    ellipse(0, 0, 10);
    pop();
}


function makeSparkle(birthLocationX) {
    var sparkle = {x: birthLocationX,
                y: random(400,420),
                breadth: random(60,90),
                speed: random(2,3),
                transparency: random(100,200),
                move: sparkleMove,
                display: sparkleDisplay
               }
    return sparkle;
}

This project was challenging for me to understand because I’ve never worked with this many helper functions before. It took a while for me to unpack the template code and understand what does what, so I’m happy I finally understand.

First, in setup we fill the array with objects. We make the objects in a separate function; that is the make[name] function. The function that draws the images is the [name]display function. At the same time, the move function is running and since the array with the objects is a global variable, we don’t need to pass the objects between the move and display functions. Finally we have the remove and add functions, which constantly scan the “x” methods of each object in the arrays to remove items that have fallen off the screen and push new objects into the array.

Above: Sketch I drew in Adobe Illustrator prior to implementing in p5