Project 11- Landscape

Graham Murtha

Section A

For this project I wanted to make a boat move through a fiery landscape, like the final world in Mario or Mustafar from Star Wars. I made moving embers, meteors, and randomly generated spires in the background to illustrate this volcanic landscape.

sketch
//Graham Murtha
//Section A
//gmurtha@andrew.cmu.edu
//Project 11- moving landscape

// A fire Nation boat sails through Mustafar AND world 8 of Mario - so many universes in one!

var embers = [];
var spire = [];
var meteors = [];

var ship; // fire nation ship from Avatar lol- it seemed to fit the color scheme, and is steam powered

function preload(){ // input boat image
    ship = loadImage("https://i.imgur.com/v5MzkRY.png");
}

function setup() {
    createCanvas(450, 300);
    frameRate(10);

    //initial embers in the sky
    for(var i = 0; i < 6; i++){
        var sx = random(width);
        embers[i] = makeEmber(sx);
    }//initial spires
    for(var i = 0; i < 10; i++){
        var sx = random(width);
        spire[i] = makeSpire(sx);
    }
    //random meteors
    for(var i = 0; i < 1; i++){
        var sx = random(width);
        meteors[i] = makeMeteors(sx);
    }

}

function draw() {
    //fiery sky
    background(200, 100, 0); //mid-tone neutral orange

    // generates sequence of random embers slowly panning left
    updateAndDisplayEmber();
    removeEmberOutOfView();
    addNewEmber();

    // generates sequence of random meteors quickly panning left
    updateAndDisplayMeteors();
    removeMeteorsOutOfView();
    addNewMeteors();

    // generates sequence of random spires quickly panning left
    updateAndDisplaySpire();
    removeSpireOutOfView();
    addNewSpire();

    //water
    fill(120,70,30); // darker orange- reflects sky a bit
    noStroke();
    rect(0, 230, 500, 75);

    //ship stays stagnant, but as its surroundings move left it seems to move right
    image(ship, width/2 - 200, 180, 200, 100);

}

//Ember object
function makeEmber(emberLocationX){
    var ember = {x : emberLocationX,
                y : random(0, 170),
                emberScale : random(0.5, 2.5),
                speed : -1,
                move : moveEmber,
                display : displayEmber}
        return ember;
}

function displayEmber(){
    push();
    translate(this.x, this.y);
    fill('gold');
    noStroke();
    scale(this.emberScale);
    ellipse(0,0,5,5);
    pop();
}

//recoordinates ember positions and display
function updateAndDisplayEmber(){
    for(var i = 0; i < embers.length; i++){
        embers[i].move();
        embers[i].display();
    }
}

function addNewEmber(){
    var newEmberProbability = 0.01;  // controls scarcity of embers in background 
    if (random(0, 1) < newEmberProbability){
        embers.push(makeEmber(width));
    }
}

function removeEmberOutOfView (){
    //if ember dissappears on the left, remove it from the array
    var embersToKeep = [];
    for (var i = 0; i < embers.length; i++){
        if (embers[i].x + 50 > 0) {
            embersToKeep.push(embers[i]);
        }
    }
    //embers left
    embers = embersToKeep;
}

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


//Spire object
function makeSpire(spireLocationX){
    var spire = {xt : spireLocationX,
                yt : 240,
                spireScale : random(0.1, 0.5),
                spireColor : color(random(20,80),0, 0),
                speedT : -6,
                moveT : moveSpire,
                displayT : displaySpire}
    return spire;
}

function displaySpire(){
    push();
    translate(this.xt + 60, this.yt); //add 60 so transitions onto screen
    noStroke();
    scale(this.spireScale);
    
    //Spire defining shape
    noStroke();
    fill(this.spireColor);
    beginShape();
    vertex(-80,-10);
    vertex(80,-10);
    vertex(10,-200);
    vertex(40,-250);
    vertex(0,-300);
    vertex(-40,-250);
    vertex(-10,-200);
    endShape();

    pop();
}

//update spire positions and display
function updateAndDisplaySpire(){
    for(var i = 0; i < spire.length; i++){
        spire[i].moveT();
        spire[i].displayT();
    }
}

function addNewSpire(){
    var newSpireProbability = 0.04; // controls scarcity of rock spires 
    if (random(0, 1) < newSpireProbability){
        spire.push(makeSpire(width));
    }
}

function removeSpireOutOfView (){
    //if ember dissappears on the left, remove it from the array
    var spireToKeep = [];
    for (var i = 0; i < spire.length; i++){
        if (spire[i].xt + 100 > 0) {
            spireToKeep.push(spire[i]);
        }
    }
    //spires left
    spire = spireToKeep;
}

function moveSpire(){
    this.xt += this.speedT;
}



//meteors object
function makeMeteors(locationX){
    var meteors = {xs : locationX,
                ys : random(75, 125),
                meteorsScale : random(0.5, 3),
                speedS : -13,
                moveS : moveMeteors,
                displayS : displayMeteors}
    return meteors;
}

function displayMeteors(){
    push();
    translate(this.xs + 80, this.ys); //adds 80 transitions on screen
    fill("gold");
    noStroke();
    scale(this.meteorScale);
    
    //meteor
    fill('orange');
    triangle(0,6,0,-6,50,0)
    fill(40,20,20)
    ellipse(0,0,20,20);
    fill('orange');
    ellipse(1,2,3,3);
    ellipse(3,6,3,3);
    ellipse(-4,-6,3,3);

    pop();
}

//update Spire positions and display
function updateAndDisplayMeteors(){
    for(var i = 0; i < meteors.length; i++){
        meteors[i].moveS();
        meteors[i].displayS();
    }
}

function addNewMeteors(){
    var newMeteorsProbability = 0.01; // controls scarcity of meteors
    if (random(0, 1) < newMeteorsProbability){
        meteors.push(makeMeteors(width));
    }
}

function removeMeteorsOutOfView (){
    //if ember dissappears on the left, remove it from the array
    var meteorsToKeep = [];
    for (var i = 0; i < meteors.length; i++){
        if (meteors[i].xs + 100 > 0) {
            meteorsToKeep.push(meteors[i]);
        }
    }
    //Spires left
    meteors = meteorsToKeep;
}

function moveMeteors(){
    this.xs += this.speedS;
}

Leave a Reply