Connor McGaffin – Project 10

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-10
*/

var poppies = [];

var terrainSpeed = 0.00001;
var d = 0.0004;
var d2 = 0.0006;

function setup() {
    createCanvas(480, 240); 
    // create an initial collection of poppies
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        poppies[i] = makeFlower(rx);
    }
    frameRate(10);
}

function draw() {
    background(180, 180, 0); 
    noStroke();
    
    sunset();
    //mtn
    displayRocks();

    emeraldCity();
    
    //adjust 
    translate(0, 30);
    displayGrass();

    //poppies behind road
    push();
    translate(0, -40);
    updateAndDisplaypoppies();
    pop();

    //yellow brick road
    ybr();

    //poppies in front of road
    updateAndDisplaypoppies();
    removepoppiesThatHaveSlippedOutOfView();
    addNewpoppiesWithSomeRandomProbability(); 
}

function sunset(){
    //orange 1
    push();
        fill(190, 150, 0);
        rect(0, 50, width, height);
    pop();
    //orange 2
    push();
        fill(200, 130, 0);
        rect(0, 120, width, height);
    pop();
}

function ybr(){
    fill(200,200,0);
    rect(0,180, width, 20);
}

//draw emerald city
function emeraldCity() {
    //halo adjustment
    var scaleFactor = 1.2;
    push();
        //adjustment
        translate(300, -25)
        //halo
        push();
            stroke('rgba(235, 255, 120, 0.4)');
            strokeWeight(3);
            noFill();
            ellipse(125, 100, 110 * scaleFactor);
            strokeWeight(1);
            ellipse(125, 100, 95 * scaleFactor);
            ellipse(125, 100, 50 * scaleFactor);
        pop();
        //city towers
        push();
            //shimmer type 1
            fill(20, random(160,170), 0);
            rect(100, 80, 15, height, 20);
            rect(115, 90, 15, height, 20);
            rect(125, 75, 15, height, 20);
            rect(145, 100, 15, height, 20);
            //shimmer type 2
            fill(20, random(170,180), 0);
            rect(90, 100 , 15, height, 20);
            rect(110, 120 , 15, height, 20);
            rect(130, 90, 15, height, 20);
            rect(150, 130, 15, height, 20);
            //shimmer type 3
            fill(20, random(180,190), 0);
            rect(80, 180, 15, height, 20);
            rect(100, 140, 15, height, 20);
            rect(125, 120 , 15, height, 20);
            rect(145, 150, 15, height, 20);
        pop();
    pop();
}

function updateAndDisplaypoppies(){
    // Update the poppy positions, and display them.
    for (var i = 0; i < poppies.length; i++){
        poppies[i].move();
        poppies[i].display();
    }
}

function removepoppiesThatHaveSlippedOutOfView(){
    // If a poppy has dropped off the left edge,
    // remove it from the array. 
    var poppiesToKeep = [];
    for (var i = 0; i < poppies.length; i++){
        if (poppies[i].x + poppies[i].breadth > 0) {
            poppiesToKeep.push(poppies[i]);
        }
    }
    poppies = poppiesToKeep; // remember surviving poppies
}
function addNewpoppiesWithSomeRandomProbability() {
    // probability of adding a new poppy to the end.
    var newTreeLikelihood = 0.3; 
    if (random(0,1) < newTreeLikelihood) {
        poppies.push(makeFlower(width));
    }
}

// poppy moves every frame
function poppyMove() {
    this.x += this.speed;
}
    
// draw the poppy
function poppyDisplay() {
    var leafDistance = 20;
    var bHeight = this.nGrowth * leafDistance; 
    push();
        translate(this.x, height - this.closeness);
        var distFactor = 4 / this.closeness;
        //stem
        push();
            strokeWeight(25 * distFactor * .6);
            stroke(30, 130, 0);
            line(0, -bHeight * .2, 0, 0);
        pop();
        //flower
        push();
            noStroke();
            fill(200,0,0);
            ellipse(0, -bHeight * .2, 90 * distFactor * .6);
            fill(0);
            ellipse(0, -bHeight * .2, 90 * distFactor * .2);
        pop();
    pop();
}


function makeFlower(birthLocationX) {
    var poppy = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nGrowth: round(random(2,8)),
                closeness: random(20,40),
                move: poppyMove,
                display: poppyDisplay}
    return poppy;
}


function displayGrass() {
//grass
    push();
    fill(0, 90, 0); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * d) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 145, 190);
        vertex(x, y - 20);
        vertex(0, height);
        vertex(width, height); 
    }
    endShape();
    pop();
}

//rocks behind emerald city
function displayRocks() {
    push();
    fill(90, 90, 60); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * d2) + (millis() * terrainSpeed);
        var y = map(noise(t * 3), 0, 1, 160, 190);
        vertex(x, y - 20);
        vertex(0, height);
        vertex(width, height); 
    }
    endShape();
    pop();
}

I started my exploration process by brainstorming which landscape I would like to create. I had a running theme of plants going on as the objects in my array. I started with what I was most familiar with, and sketched out an idea where flowers would be generated at the eye level of a squirrel. Expanding on this, I sketched a quick layout of scrolling plants that I am not familiar with, being in the context of a jungle canopy. And finally, I pushed into a setting that doesn’t even exist with the sketch of the poppies leading up to the Emerald City from The Wizard of Oz.

I ended up going with the Wizard of Oz theme, as it excited me most. In the story, surrounding the shimmering Emerald City, the four protagonists encounter a field of poppies, which push Dorothy into a slumber. I designed this code to provide a panning view of the setting where this plot event happened, as if it were cinematically setting the scene.