merlebac Project-10

Generative Landscape

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-10

var stars = [];
var planets = [];


function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of stars
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        stars[i] = makeStar(rx);
    }
    // create an initial collection of planets
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        planets[i] = makePlanet(rx);
    }
    frameRate(10);
}


function draw() {
    background(0); 

    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability();

    updateAndDisplayPlanets();
    removePlanetsThatHaveSlippedOutOfView();
    addNewPlanetsWithSomeRandomProbability();

    fill(125);
    rectMode(CENTER);
    rect(120, mouseY, 10, 70);
    // Creates laser holder
    fill(0, 0, 255);
    rect(125, mouseY + 35, 40, 10);
    // Creates lower laser
    rect(125, mouseY - 35, 40, 10);
    // Creates upper laser
    quad(80, mouseY + 20, 60, mouseY + 20, 30, mouseY + 40, 50, mouseY + 40);
    // Creates lower fin
    quad(80, mouseY - 20, 60, mouseY - 20, 30, mouseY - 40, 50, mouseY - 40);
    // Creates upper fin
    ellipse(160, mouseY, 60, 40);
    // Creates cockpit
    fill(0);
    ellipse(160, mouseY, 50, 30);
    // Creates cockpit window
    fill(125);
    rect(110, mouseY, 100, 40);
    // Creakes body
    fill(0);
    textAlign(CENTER);
    textSize(18);
    text("MATTHEW", 110, mouseY + 5);
}

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

function removeStarsThatHaveSlippedOutOfView(){
    // If a star has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find stars
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    // Our solution is to just copy all the stars
    // we want to keep into a new array.
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the surviving stars
}


function addNewStarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new star to the end.
    var newStarLikelihood = 0.07; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}


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


// draw the star and some windows
function starDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors;

    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height);
    beginShape();
    vertex(0, -bHeight);
    // Upper point of star
    vertex(0 + 2, -bHeight + 6);
    vertex(0 + 8, -bHeight + 6);
    // Right point of star
    vertex(0 + 3, -bHeight + 9);
    vertex(0 + 4, -bHeight + 16);
    // Lower right point of star
    vertex(0, -bHeight + 11);
    vertex(0 - 4, -bHeight + 16);
    // Lower left point of star
    vertex(0 - 3, -bHeight + 9);
    vertex(0 - 8, -bHeight + 6);
    // Left point of star
    vertex(0 - 2, -bHeight + 6);
    endShape();
    // Creates star shape
    pop();
}


function makeStar(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(0, height)),
                // I changed the range of possible values to the entire height of the canvas
                move: starMove,
                display: starDisplay}
    return bldg;
}


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


function removePlanetsThatHaveSlippedOutOfView() {
    // If a planet has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find planets
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the planets
    // we want to keep into a new array.
    var planetsToKeep = [];
    for (var i = 0; i < planets.length; i++){
        if (planets[i].x + planets[i].breadth > 0) {
            planetsToKeep.push(planets[i]);
        }
    }
    planets = planetsToKeep; // remember the surviving planets
}


function addNewPlanetsWithSomeRandomProbability() {
    // With a very tiny probability, add a new planet to the end.
    var newPlanetLikelihood = 0.007; 
    if (random(0,1) < newPlanetLikelihood) {
        planets.push(makePlanet(width));
    }
}


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


// draw the planet and some windows
function planetDisplay() {

    var floorHeight = 20;
    var bHeight = this.nFloors;


    noStroke();
    push();
    translate(this.x, height);
    for (var i = 0; i < height; i++) {
        fill(this.colorR, this.colorG, this.colorB); 
        ellipse(0, -bHeight, this.r, this.r);
        // Creates the main body of planet
        fill(this.colorR - 50, this.colorG - 50, this.colorB - 50);
        ellipse(0, -bHeight, this.r / this.d1, this.r);
        // Creates horizontal texture of planet
        fill(this.colorR - 50, this.colorG - 50, this.colorB - 50);
        ellipse(0, -bHeight, this.r, this.r / this.d2);
        // Creates vertical texture of planet
        fill(this.colorR, this.colorG, this.colorB);
        ellipse(0, -bHeight, this.r / this.d1 + 10, this.r / this.d2 + 10);
        // Creates center of planet
    }
    pop();
}


function makePlanet(birthLocationX) {
    var bldg = {x: birthLocationX,
                r: round(random(50, 100)),
                d1: random(2, 5),
                d2: random(2, 5),
                // Variables for radius of planet

                colorR: round(random(100, 255)),
                colorG: round(random(100, 255)),
                colorB: round(random(100, 255)),
                // Variables for the color of the planet

                breadth: 50,
                speed: -1.0,
                nFloors: round(random(0, height)),
                move: planetMove,
                display: planetDisplay}
    return bldg;
}

I started out with having no idea what to do for this assignment. I just wasn’t sure how I would be able to create a generative landscape using the code that I had. However, I eventually figured out that I could do a space theme. Implementing this was tricky at first. I didn’t have a full understanding of the code when I first went in, so I made a lot of mistakes. I thought that I was supposed to set the location of each object to random until I realized that this wouldn’t animate it. I then had to undo a large amount of my work and replace it with the sample code. After looking at some of my peers’ projects I decided to add a rocket ship since I felt that the appearance was somewhat bland.