Monica Chang – Project 11 – Generative Landscape

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 11 - Generative Landscapes

//LANDSCAPE DESCRIPTION:
// SURPRISE! THERE IS HIDDEN LAVA BEHIND THE FIRST TERRAIN!

var tethered = [];
var terrainSpeed = 0.0008;// speed of orange terrain and middle terrain
var terrainSpeedThree = 0.0007; // speed of very back mountain
var terrainDetail = 0.008;
var terrainDetailTwo = 0.001;
var terrainDetailThree = 0.02; //smoothness of the terrains

function setup() {
    createCanvas(480, 480);
    frameRate(20);
    //initial lava
    for (i = 0; i < 30; i++) {
        var tx = random(width);
        var ty = random(300, height);
        tethered[i] = makeTethered(tx, ty);
    }
}

function draw() {
    //lavendar background
    background(236, 225, 250);

    //arranging the landscape elements(three terrains, lava spots)
    renderTerrainTwo(); // middle, low-opacity mountain
    renderTerrainThree(); // third mountain in the very back
 
    updateAndDisplayTethered(); //hidden lava behind the front terrain

    renderTerrainOne(); // first terrain int he very front

}



function displayTethered() {
    //drawing the "tethered" lava
    noStroke(); //no outline
    fill(255, 11, 5); //red tethered coat color
    push();
    translate(this.x0, this.y0); //locate lava body at x0, y0
    ellipse(5, 5, 10, 5); //tethered lava body
    pop();
}

function makeTethered(birthLocationX, birthLocationY) {
    var theTethered = {x0: birthLocationX, 
                y0: birthLocationY, 
                tx: random(0, width), 
                ty: random(300, height),
                speed: -3.0,
                move: moveTethered,
                display: displayTethered}
    return theTethered;
}

function moveTethered() {
    this.x0 += this.speed; //speed of lava moving
    if (this.x0 <= -10) { //new lava appears at the right as they disappear to the left
        this.x0 += width + 10;
    }
}

function updateAndDisplayTethered() {
    for(i = 0; i < tethered.length; i++) {
        tethered[i].move();
        tethered[i].display();
    }
}


function renderTerrainThree(){
    // drawing the terrain in the back
    noStroke();
    fill(51, 16, 84); 
    beginShape(); 
    for (i = 0; i < width; i++) {
        var t = (i * terrainDetailThree) + (millis() * terrainSpeedThree);
        //terrains y coordinate
        var y = map(noise(t), 0, 1.5, height / 8, height);
        //keep drawing terrain
        vertex(i, y);
    }
    //terrain constraints
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function renderTerrainTwo() {
    // drawing terrain number two(in the middle)
    noStroke();
    fill(71, 11, 6, 200); //low-opacity color of maroon
    beginShape();
    for(var a = 0; a < width; a++){
        var b = (a * terrainDetail) + (millis() * terrainSpeed);
        var c = map(noise(b), 0, 1, 0, height / 4);
        vertex(a, c);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);

}


function renderTerrainOne() {
    //drawing the terrain in the very front
    noStroke();
    fill(235, 64, 52);
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetailTwo) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0.55, height + 100);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
  
}

I was originally inspired by the horror film, ‘Us’, which was released this year and wanted to illustrate the “Tethered”. However, they ended up looking more like lava due to the color so I ended up creating a landscape with holes of lava. This project was really fun and helpful in making me understand objects better.