gyueunp – Project-10: Generative Landscape

Generative Landscape

//GyuEun Park
//15-104
//gyueunp@andrew.cmu.edu
//Project-10

var merry = [];
var drops = [];
var terrainSpeed = 0.0003;
var terrainDetail = 0.008;

function setup() {
    createCanvas(480, 240);
    frameRate(10);
//repeat snow falling 
    for (var j = 0; j < 100; j++) {
    drops[j] = new Drop();
  }
}
 
function draw() {
    background(0,123,100);
    for (var t = 0; t < drops.length; t++) {
    	drops[t].fall();
    	drops[t].show();
    }

//add terrain details, filling the horizontal side of canvas
    noStroke();
    fill(255); 
    beginShape(); 
    for (var x = 0; x < width + 5; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

//"MERRY CHRISTMAS" text details
    updateAndDisplayMerry();
    removeMerry();
    addMerry(); 
}

//snow details 
function Drop() {
  this.x = random(width);
  this.y = random(-9, -500);
  this.z = random(0, 20);
  this.len = map(this.z, 0, 20, 10, 20);
  this.yspeed = map(this.z, 0, 50, 1, 20);

//creating functions for snow movements
  this.fall = function() {
    this.y = this.y + this.yspeed;
    var grav = map(this.z, 0, 10, 0, 0.1);
    this.yspeed = this.yspeed + grav;

    if (this.y > height) {
      this.y = random(-200, -100);
      this.yspeed = map(this.z, 0, 20, 4, 10);
    }
  }

  this.show = function() {
    var thick = map(this.z, 0, 1, 0.9, 1);
    strokeWeight(thick);
    stroke(255,random(100,200));
    line(this.x, this.y, this.x, this.y+this.len);
  }
}

function updateAndDisplayMerry(){
//update the text's positions and display 
    for (var i = 0; i < merry.length; i++){
        merry[i].move();
        merry[i].display();
    }
}

function removeMerry(){
    var merryToKeep = [];
    for (var i = 0; i < merry.length; i++){
        if (merry[i].x > 0 & merry[i] < height) {
            merryToKeep.push(merry[i]);
        }
    }
    merry = merryToKeep; 
}

function addMerry() {
    var newMerryLikelihood = 5 ; 
    if (random(0,1) < newMerryLikelihood) {
        merry.push(makeMerry(random(0,width),0));
    }
}

function merryMove() {
    this.x += this.speedx;
    this.y += this.speedy;
}

function merryDisplay() {
	var merryX = this.x;
	var merryY = this.y;
	textSize(random(0,70));
	fill(random(100,255),0,0);
	text("MERRY CHRISTMAS", merryX, merryY+random(20,100));
	fill(255);

//asterisks for small decoration 
	text("*", merryX, merryY+random(0,100));
	text("*", merryX, merryY+random(200,300));
}

function makeMerry(birthLocationX,birthLocationY) {
    var merry = {x: birthLocationX,
    			y: birthLocationY,
                speedx: -4.0,
                speedy: 1.0,
                move: merryMove,
                display: merryDisplay}
    return merry;
}

I created a Christmas-themed landscape in anticipation for the holiday. The background and the text contrast drastically in its stagnancy and chaotic motion, respectively. However, they not only complement each other in terms of the coloration, but also work together to represent Christmas. The other two elements, the terrain and snow, are similar in that they are both white, highlighting the objects of complementary colors. Yet, the terrain travels horizontally, while snow is falling in a vertical motion. I’m wishing for a white Christmas ♥

sketch:

.