![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
/*
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.
