jooheek-Project10-Generative Landscape

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-10

var animals = [];
var mountainSpeed1 = 0.00005;
var mountainDetail1 = 0.005;
var mountainSpeed2 = 0.0001;
var mountainDetail2 = 0.003;
var mountainSpeed3 = 0.0002;
var mountainDetail3 = 0.001;

function setup() {
    createCanvas(480, 480);

    //creates 5 animals at start
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        animals[i] = makeAnimals(rx);
    }

    frameRate(30);
}


function draw() {
    background(210, 240, 255); 

    makeMountains();
    makeOasis();
    updateAndDisplayAnimals();
    removeAnimals();
    addNewRandomAnimals(); 

}

function makeMountains() {
    //first farthest mountain
    noStroke();
    fill(125, 185, 130);
    beginShape(); 
    for (var m1 = 0; m1 < width; m1++) {
        var mountainOneSpeed = (m1 * mountainDetail1) + (millis() * mountainSpeed1);
        var mountainPeaksOne = map(noise(mountainOneSpeed), 0, 1, width/2, height/4);
        vertex(m1, mountainPeaksOne); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //second mountain
    fill(155, 215, 140);
    beginShape(); 
    for (var m2 = 0; m2 < width; m2++) {
        var mountainTwoSpeed = (m2 * mountainDetail2) + (millis() * mountainSpeed2);
        var mountainPeaksTwo = map(noise(mountainTwoSpeed), 0, 1, width/2 + 10, height/4 + 30);
        vertex(m2, mountainPeaksTwo); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //third closest mountain
    fill(185, 245, 150);
    beginShape(); 
    for (var m3 = 0; m3 < width; m3++) {
        var mountainThreeSpeed = (m3 * mountainDetail3) + (millis() * mountainSpeed3);
        var mountainPeaksThree = map(noise(mountainThreeSpeed), 0, 1, width/2 + 20, height/4 + 60);
        vertex(m3, mountainPeaksThree); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

}


function updateAndDisplayAnimals(){
    for (var i = 0; i < animals.length; i++){
        animals[i].move();
        animals[i].display();
    }
}


function removeAnimals(){
    var animalsToKeep = [];
    for (var i = 0; i < animals.length; i++){
        if (animals[i].x + animals[i].breadth > 0) {
            animalsToKeep.push(animals[i]);
        }
    }
    animals = animalsToKeep;
}


function addNewRandomAnimals() {

    var newAnimals = 0.009; 
    if (random(0,1) < newAnimals) {
        animals.push(makeAnimals(width));
    }
}

function animalsMove() {
    this.x += this.speed;
}
    
function animalsDisplay() {
    noStroke(); 
    push();
    translate(this.x, height - height/4);
    //shadow of animals
    fill(100, 100, 100, 60);
    ellipse(this.size/4, this.size*3/4, 150, 30);
    //the butts of the animals
    fill(this.color); 
    ellipse(0, 0, this.size, this.size);
    ellipse(this.size/2, 0, this.size, this.size);
    //the tails of the animals
    fill(50);
    ellipse(this.size/4, -this.size/2+this.size/4, this.size/8, this.size/4);
    //the legs of the animals
    fill(this.color);
    quad(-this.size/4-5, 0, -this.size/8-5, this.size*3/4, this.size/8-5, this.size*3/4, this.size/4-5, 0);
    quad(this.size/2-(this.size/4-5), 0, this.size/2-(this.size/8), this.size*3/4, this.size/2+(this.size/8), this.size*3/4, this.size/2+(this.size/4+5), 0);
    pop();
}


function makeAnimals(birth) {
    var ANIMALS = {
                x: birth,
                breadth: 50,
                size: 100,
                speed: -7.0,
                move: animalsMove,
                display: animalsDisplay,
                color: [random(50, 255), random(50, 255), random(50, 255)]
            }

    return ANIMALS;
}

function makeOasis() {
    fill(120, 170, 245);
    rect(0, height/2+80, width, 100);

}

I got inspiration for this project from the Lion King, where the animals drink from a pond or lake. I wanted to use this project to show animals drinking from a lake as well while the background (mountains) is moving. There are three mountains that vary in color to show depth and there are animals in the foreground drinking from the water. This is the picture that gave me the inspiration from the movie.