My project is a simple landscape with hills, trees, buildings, birds, and the sun. The trees vary in size and location, the building varies in width, and the birds vary in location and speed.
Maggie – Generative Landscape
//Maggie Ma
//Section D
//Generative Landscape
var buildings = [];
var hills = [];
var noiseParam = 0;
var noiseStep = 0.02;
var trees = [];
var birds = [];
function setup() {
createCanvas(400, 500);
strokeWeight(4);
// create an initial collection of buildings
for (var i = 0; i < 2; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
//create an initial collection of birds
for (var i = 0; i < 3; i++){
var rx = random(width);
birds[i] = makeBird(rx);
}
// drawing hills in the back
for (var i = 0; i<width/5 +1; i++) {
var n = noise(noiseParam);
var value = map(n,0,1,0,height+50);
hills.push(value);
noiseParam+=noiseStep;
}
frameRate(15);
}
function draw() {
background(255,203,186); //light pink
//sun
fill(253,165,0); //yellow
circle(width/2, height/2-70, 120.438 );
//birds
updateandDisplayBird();
removeBirdThatHaveSlippedOutOfView();
addNewBirdWithSomeRandomProbability();
//hills
drawHills();
displayHorizon();
//building
updateAndDisplayBuilding();
removeBuildingsThatHaveSlippedOutOfView();
addNewBuildingsWithSomeRandomProbability();
//trees
updateAndDisplayTrees();
removeTreesThatHaveSlippedOutOfView();
addNewTreesWithSomeRandomProbability();
}
function drawHills() {
hills.shift();
var n = noise(noiseParam);
var value = map(n,0,1,0,height+50);
hills.push(value);
noiseParam += noiseStep;
beginShape();
vertex(0,height);
for(var i =0; i <= width/5; i++) {
fill(255,163,130); //pink color
strokeWeight(4);
vertex((i*5),hills[i]);
}
vertex(width,height);
endShape();
}
//creating trees
function makeTree(birthLocationX) {
var t = {x: birthLocationX,
breadth: round(random(10,30)),
speed: -5.0,
y: random(10, 40), //randomize tree size and location
w: random(30, 40),
h: random(40, 60),
move: treeMove,
display: treeDisplay}
return t;
}
function treeMove() {
this.x += this.speed;
}
function treeDisplay() {
push();
translate(this.x, height -125);
strokeWeight(4);
fill(80,202,119);
//leaves
ellipse(this.x,this.y, this.w, this.h);
//trunk
line(this.x, this.y+10, this.x, this.y+70);
pop();
}
function updateAndDisplayTrees(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function removeTreesThatHaveSlippedOutOfView(){
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}
function addNewTreesWithSomeRandomProbability() {
var newTreeLikelihood = 0.07;
if (random(0,1) < newTreeLikelihood) {
trees.push(makeTree(width));
}
}
//creating building
function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 70,
speed: -8.0,
w: random(70,110), //randomize width
move: buildingMove,
display: buildingDisplay}
return bldg;
}
function buildingMove() {
this.x += this.speed;
}
function buildingDisplay() {
push();
strokeWeight(4);
fill(253,165,0); //yellow block on right side
rect(this.x ,315.478 ,this.w ,137.574);
rect(this.x - 55.901, 364.514 ,15.016 ,88.538); //yellow pillars
rect(this.x +7.51, 364.514 ,15.016 ,88.538);
rect(this.x-28.083,180.775,23.237,26.131); //yellow top
fill(255,255,255);
rect(this.x-33.153,206.996,33.377,33.377); //middle section
fill(253,165,0);
rect(this.x-21.845,219.566,10.762,20.807);
fill(255,255,255);
rect(this.x-40.661, 240.463,48.108 ,212.59 ); //bottom base
fill(0,195,227);
rect(this.x-40.661,259.105,15.016 ,25.094); //turquoise designs
rect(this.x-40.661,302.931,15.016 ,25.094);
rect(this.x-7.508,259.105,15.016 ,25.094 );
rect(this.x-7.508, 302.931,15.016 ,25.094);
fill(225,43,0);
rect(this.x-40.885,346.758,15.016,106.295); //red designs
rect(this.x-7.508,346.758,15.016,106.295);
line(this.x-25.869,240.8 ,this.x-25.869,453.053);
line(this.x-7.508,240.8 ,this.x-7.508,453.053);
pop();
}
function updateAndDisplayBuilding(){
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}
function removeBuildingsThatHaveSlippedOutOfView(){
var buildingToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingToKeep.push(buildings[i]);
}
}
buildings = buildingToKeep;
}
function addNewBuildingsWithSomeRandomProbability() {
var newBuildingLikelihood = 0.015;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}
//creating birds
function updateandDisplayBird(){
for (var i = 0; i < birds.length; i ++){
birds[i].move();
birds[i].display();
}
}
function removeBirdThatHaveSlippedOutOfView(){
var keepBirds=[];
for (var i = 0; i < birds.length; i++) {
if (birds[i].x < width) {
keepBirds.push(birds[i]);
}
}
birds = keepBirds;
}
function addNewBirdWithSomeRandomProbability(){
var newBirdLikelihood = 0.01;
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBird(15, 15));
}
}
function Birdmove(){
this.x += this.speed;
}
function birdDisplay(){
fill(0);
stroke(0);
push();
translate(this.x, this.y);
//wings
triangle(0, 0, 3, 0, -2, -3);
triangle(0, 0, 3, 0, 2, 3);
pop();
}
function makeBird(birthLocationX, birthLocationY){
var bird = {x: birthLocationX,
y:random(100,200),
speed:random(2, 9),
move: Birdmove,
display: birdDisplay};
return bird;
}
//creating grass horizon line
function displayHorizon(){
fill(106,207,124);
stroke(4);
rect(0, height-50, width, height-50);
}