Katherine Hua – Project-10 – Landscape

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-10-Landscape */

var marioLink = "https://i.imgur.com/gaxoRHw.png"
var chutes = [];

function preload() {
	mario = loadImage(marioLink);
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of chutes
    for (var i = 0; i < 10; i++){
        var cx = random(width);
        chutes[i] = makeChute(cx);
    }
    frameRate(10);
}


function draw() {
    background(108, 130, 238); 
    displayHill();
    displayGround();

    updateAndDisplayChutes();
    removeChutes();
    addNewChutes(); 

    imageMode(CENTER);
    image(mario, 50, 330 + random(0, 30));
}


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


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


function addNewChutes() {
    // add a new chute to the end based on the probability
    var newChuteLikelihood = 0.03; 
    if (random(0,1) < newChuteLikelihood) {
        chutes.push(makeChute(width));
    }
}


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

// draw the building and some windows
function chuteDisplay() {
    var floorHeight = 45;
    var bHeight = floorHeight; 
//making the chutes
    push();
    translate(this.x, height - 40);
    strokeWeight(2);
    fill(147, 198, 63); 
    stroke(46, 104,28);
    rect(0, -bHeight - 61, 40, bHeight); // chute body
    rect(-5, -bHeight - 81, 50, 20); // chute head
//clouds
    fill(255, 70);
    noStroke();
    ellipse(0, -bHeight - 300, 100, 50);
    ellipse(10, -bHeight - 290, 90, 60);
    ellipse(20, -bHeight - 320, 110, 70);
//mystery boxes
    fill(233, 159, 87);
    strokeWeight(2);
    stroke(148, 85, 47);
    textSize(16);
    rect(50, -bHeight - 150, 30, 30);
    text('?', 60, -bHeight - 130);

    pop();
}


function makeChute(birthLocationX) {
    var cht = {x: birthLocationX,
                breadth: 70,
                speed: -6.0,
                nFloors: round(random(3,6)),
                move: chuteMove,
                display: chuteDisplay}
    return cht;
}
//making the green hill in the background
function displayHill() {
	var hill = 0.006
 	var hillSec = 0.0007;
 	stroke(71, 153, 44);
 	beginShape();
 	for (i = 0; i < width; i ++) {
 		var h = (millis() * hillSec) + (i * hill);
 		var y = map(noise(h), 0, 1, 300, 200);
 		line(i, y, i, height);
 	}
 	endShape();
}
//making the brick ground
function displayGround(){
	strokeWeight(2);
    stroke(136, 49, 27);
    fill(196, 83, 53);
    rect(0, 380, 480, 100);
    for (var j = 0; j < 50; j ++) {
    	line(j * 10, 380, j * 10, 480);
    	line(0, 380 + j * 10, 480, 380 + j * 10);
    }
}

I decided to my project based off of Super Mario Bros video game. I had trouble with figuring out how to make the chutes create new ones when the new screen comes by. Eventually I figured out if I increased the probability that a new chute is drawn, more will be drawn in the next screen. I also struggled with controlling the number of the chutes and couldn’t figure out how to make them not overlap each other.