// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-11
// global variables declared to hold objects
// array for tree objects
var trees = []
function setup() {
//color preprared for the gradient effect
c1 = color(250, 100, 0);
c2 = color(204, 143, 0);
createCanvas(480, 480);
frameRate(100);
}
function draw() {
//draw the gradient background
for (var i = 0; i < height; i++) {
var inter = map(i, 70, 110, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, i, width, i);
}
//draw the sun in the background
noStroke();
fill(234, 120, 120, 200);
ellipse(100, 60, 90, 90);
fill(255, 146, 128, 200);
ellipse(100, 60, 76, 76);
mountainBackground(); //mountain
land()
updatetrees();
removetrees();
newtrees();
}
function updatetrees(){
// Update the x positions of the trees and display them
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function removetrees(){
//remove the building from the array once it dropped off the left edge
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
// the exsiting trees will be kept
trees = treesToKeep;
}
function newtrees() {
// add a new tree to the end
var probability = 0.017;
if (random(0,1) < probability) {
trees.push(drawtrees(width));
}
}
//update position of tree every frame
function treesMove() {
this.x += this.speed;
}
//display the trees
function treesDisplay() {
noStroke();
//leaves
fill(50, 235, 173);
triangle(this.x - 15, 350, this.x + 15, 350, this.x, 320);
triangle(this.x - 20, 370, this.x + 20, 370, this.x, 330);
triangle(this.x - 30, 400, this.x + 30, 400, this.x, 350);
//trunk
stroke(194, 245, 228);
line(this.x, 350, this.x, 420);
}
function drawtrees(px) {
var dt = {x: px,
//trees obeject properties
breadth: 30,
speed: -1.0,
move: treesMove,
display: treesDisplay}
return dt;
}
function mountainBackground() {
//makes mountains in the back
terrain = 0.009;
terrain2 = 0.014;
terrainSpeed = 0.0003;
//use noise function to draw random background contour of the furthest mountains
stroke(30, 148, 143,200);
beginShape();
//make slowly rolling hills
for (var j = 0; j < width; j++) {
var t = (j * terrain) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 200, 10);
line(j, y2, j, height);
}
endShape();
//use noise function to draw random background contour of the closer mountains
stroke(65, 158, 155);
beginShape();
for (var j = 0; j < width; j++) {
var t = (j * terrain2) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 400, 10);
line(j, y2, j, height);
}
endShape();
}
function land() {
//makes the land in the foreground appear
fill(46, 84, 78);
rect(0, 420, 480, 130);
}
When I thought about the “generative landscape”, the first idea that prompted my mind is a landscape with mountains and trees. There are two layers of mountains to show the depth of this generative landscape. There are pine trees in the foreground. I have chosen the colors strategically so that the whole composition can be read clearly and aesthetically pleasing.