## Project-11-Landscape

I choose to do a picture I took in Pakistan so I created the images in Illustrator and then created variation in the landscape. and ultimately wanted variation of falling bananas and cows in the distance.

graanak-11
``````//Graana Khan
//Section B

var noiseParam = 0;
var noiseStep = 0.05;
var weeds = [];
var bananaGuy;
var bananas = [];
var cows = [];

bananas[0] = "https://i.imgur.com/DGbCivK.png";
bananas[1] = "https://i.imgur.com/kYS7JBv.png";
bananas[2] = "https://i.imgur.com/oLWOnSw.png";
cows[0] = "https://i.imgur.com/DbRWV09.png";
cows[1] = "https://i.imgur.com/IDXjr5m.png";
cows[2] = "https://i.imgur.com/rHLRVkb.png";

for(var i=0; i < bananas.length; i++){
}

for(var i=0; i < cows.length; i++){
}
}

function setup() {
createCanvas(480, 300);
background(220);
frameRate(10);

strokeWeight(5);

//initializing the noise and array
for(var i=0; i <= 100; i++){
var n = noise(noiseParam);
var value = map(n, 0, 1, 100, height);
weeds.push(value);
noiseParam += noiseStep;
}

}

function draw() {
background(232, 208, 156);

//terrain moving in the background
weeds.shift();
var n = noise(noiseParam);
var value = map(n, 0, 1, 100, height);
weeds.push(value);
noiseParam += noiseStep;

stroke(135, 119, 76);
fill(135, 119, 76);
beginShape();
curveVertex(0, height);
curveVertex(0, height);
for(var i=0; i < 100; i++){
vertex(i*30, weeds[i]);
}
vertex(width, height);
vertex(width, height);
endShape();
noStroke();
fill(96, 78, 41);
rect(0, 229, 480, 71);

//banana truck
image(bananaGuy, 0, 0, 480, 300);

image(bananas[2], 260, 260);
scale(0.5);
image(cows[0], 120, 370);

}
``````

## Project-11

sketch
``````var buildings = [];
var people = [];
var hillVar= 0.009

function setup() {
createCanvas(480, 480);

// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
var ry = random(10, 50);
buildings[i] = makeBuilding(rx);
people[i] = makePeople(rx);
}
frameRate(10);
}

function draw() {
background(33, 28, 77);
drawHill()

displayStatusString();
displayHorizon();

updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();

updateAndDisplayPeople();
removePeople();

drawTrainCart()
}

function makePeople(birthLocationX) {
var k ={x: birthLocationX,
speed:-4,
peopleHeight:round(random(24,30)),
move:peopleMove,
display:peopleDisplay,
color:color(random(50,240),random(50,240),random(50,240))}
return k
}

function peopleMove() {
this.x += this.speed
}

function peopleDisplay() {
push();
fill(this.color)
translate(this.x, height-190);
strokeWeight(1);
stroke(0);
fill(160)
pop()
}

function updateAndDisplayPeople(){
for (var i = 0; i <people.length; i++){
people[i].move();
people[i].display()
}
}
function removePeople(){
var peopleToKeep = [];
for (var i = 0; i <people.length; i++){
peopleToKeep.push(people[i])
}
}
people = peopleToKeep
}

var newPeopleLikelihood=0.1;
if(random(0,1)<newPeopleLikelihood){
people.push(makePeople(width));
}
}

function drawTrainCart(){
noStroke()
var cartwidth = 70
fill(66, 85, 102)
rect(0,0,cartwidth,height)
rect(480-cartwidth,0,cartwidth,height)
rect(cartwidth,0,width-(cartwidth*2),50)
fill(161, 104, 80)

push()
//drink
fill(232, 184, 100)
arc(340,460-10,40,13,0,PI,OPEN)
fill(210, 184, 100)
ellipse(340,430-10,50,15)

//cup
fill(255,255,255,80);
stroke(174, 203, 230)
strokeWeight(4)
line(320,460-10,310,400-10)
line(370,400-10,360,460-10)
arc(340,460-10,40,13,0,PI,OPEN)
fill(191,151,135)
ellipse(340,400-10,60,17)

noStroke()
fill(255, 246, 199,32)

pop()

}

function drawHill() {
push()
noStroke()
fill(6, 31, 12)
beginShape()
for (var h = 0; h<width; h++){
var a = (h*hillVar)+(millis()*0.0002)
var y = map(noise(a),0,1,height/8,height/9*5);
vertex(h,y)
}
vertex(480,480);
vertex(0,480)
endShape()
pop()
}

function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
//trees[i].move();
//trees[i].display();
}
}

function removeBuildingsThatHaveSlippedOutOfView(){
// If a building has dropped off the left edge,
// remove it from the array.  This is quite tricky, but
// we've seen something like this before with particles.
// The easy part is scanning the array to find buildings
// to remove. The tricky part is if we remove them
// immediately, we'll alter the array, and our plan to
// step through each item in the array might not work.
//     Our solution is to just copy all the buildings
// we want to keep into a new array.
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}

// With a very tiny probability, add a new building to the end.
var newBuildingLikelihood = 0.008;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}

// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}

// draw the building and some windows
function buildingDisplay() {
push()
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(12, 12, 51);
stroke(185);
push();
translate(this.x, height - 170);
noStroke()
stroke(200);
for (var i = 0; i < this.nFloors; i++) {
fill(247, 235, 111)
strokeWeight(random(0.1,2))
rect(5, -15 - (i * floorHeight), this.breadth - 10,5);
}
strokeWeight(3)
pop();
}

function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
speed: -3.0,
nFloors: round(random(2,8)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}

function displayHorizon(){
stroke(0);
line (0,height-170, width, height-170);
fill(40, 40, 41)
rect(0,height-170,width,170)
}

function displayStatusString(){
noStroke();
fill(0);
var statusString = "# Buildings = " + buildings.length;
text(statusString, 5,20);
}``````

I was inspired by the view of Hong Kong where there are many skyscrapers but they are always accompanied by a mountain in the backdrop. All of Hong Kong’s major financial districts are close to tall mountain ranges. This creates a very interesting composition in my opinion. I included the people of varying height and color to suggest how crowded it is in Hong Kong. The image shows a person viewing out of a train that has a table attached to the window drinking a glass of apple juice. The surrounding is dark and I think that helps the image tells a more interesting story.

## Project 11-Landscape

sketch
``````/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A

This draws a moving scene.
*/

var buildings = [];
var clouds = [];
var hills = [];
var noiseParam=0;
var noiseStep=0.05;

function setup() {
createCanvas(480, 300);

// create an initial collection of buildings
for (var i = 0; i < 5; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
frameRate(10);

// create an initial collection of clouds
for (var i = 0; i < 10; i++){
var rx = random(width);
clouds[i] = makeCloud(rx);
}

// creates initial hills
for (var i=0; i<width/5; i++) {
var n = noise(noiseParam);
var value = map(n, 0, 1, 0, height);
hills.push(value);
noiseParam+=noiseStep;
}

}

function draw() {
background(255,140,102);
// draws outline around canvas
stroke(0);
strokeWeight(10);
fill(255,140,102);
rect(0,0,width,height);

// draws sun
strokeWeight(3);
fill(183,52,52);
circle(width/2,height/1.2,400);
fill(229,134,81);
circle(width/2,height/1.2,300);
fill(225,185,11);
circle(width/2,height/1.2,200);

// begins the hill shape
var x=0;
stroke(0);
strokeWeight(3);
fill(93, 168, 96);
beginShape();
curveVertex(0, height);
curveVertex(0, height);
// loops through each of the values in the hills array
for (i=0; i<hills.length; i++) {
curveVertex(x, hills[i]);
x+=15;
}
curveVertex(width, height);
curveVertex(width, height);
endShape();
//removes the first value from the list and appends a new one
//onto the end to make the terrain move
hills.shift();
var n = noise(noiseParam);
var value = map(n, 0, 1, 0, height);
hills.push(value);
noiseParam+=noiseStep;

displayHorizon();

updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();

updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutofView();

}

function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}

function updateAndDisplayClouds() {
// update the clouds' positions and display them
for (var i=0; i<clouds.length; i++) {
clouds[i].move();
clouds[i].display();
}
}

function removeBuildingsThatHaveSlippedOutOfView(){
// If a building has dropped off the left edge,
// remove it from the array.  This is quite tricky, but
// we've seen something like this before with particles.
// The easy part is scanning the array to find buildings
// to remove. The tricky part is if we remove them
// immediately, we'll alter the array, and our plan to
// step through each item in the array might not work.
//     Our solution is to just copy all the buildings
// we want to keep into a new array.
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}

function removeCloudsThatHaveSlippedOutofView() {
var cloudsToKeep = [];
for (var i=0; i<clouds.length; i++) {
if (clouds[i].x + clouds[i].width>0) {
cloudsToKeep.push(clouds[i]);
}
}
clouds = cloudsToKeep;
}

var newBuildingLikelihood = 0.007;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}

var newCloudLikelihood = 0.001;
if (random(0,1) < newCloudLikelihood) {
clouds.push(makeCloud(width));
}
}

// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}

// updates the position of every cloud frame
function cloudMove() {
this.x += this.speed;
}

// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(53,156,249);
stroke(0);
strokeWeight(3);
push();
translate(this.x, height - 40);
fill(255);
//rect(this.breath/2, bHeight-20, this.breath/5, bHeight/5);
rect(5, -35, 10, (bHeight/5));
pop();

}

function cloudDisplay() {
fill(255);
noStroke();
//stroke(0);
//strokeWeight(3);
push();
//translate(this.x, height-40);
ellipse(this.x, this.y, this.width, this.height);
ellipse(this.x+this.width/2, this.y+3, this.width, this.height);
ellipse(this.x-this.width/2, this.y+3, this.width, this.height);
pop();
}

function makeBuilding(startX) {
var bldg = {x: startX,
speed: -1.0,
nFloors: round(random(2,8)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}

function makeCloud(startX) {
var cloud = {x: startX,
y: random(20,90),
width: random(10,20),
height: random(10,20),
speed: -1.0,
move: cloudMove,
display: cloudDisplay}
return cloud;
}

function displayHorizon(){
noStroke();
fill(155,27,66);
rect(0, height-50, width, 50);
stroke(0);
strokeWeight(3);
line (0, height-50, width, height-50);

}``````

## Project 11: Generative Landscape

hc
``````var buildings = [];
var mountains = [];
var trees = [];
var noiseParam = 0;
var noiseStep = 0.01;
var people = [];
var img;

//calling the superman image
}

function setup() {
createCanvas(480, 480);
imageMode(CENTER);
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
// mountains
for (var i = 0; i <= width/4; i++) {
var value = map(noise(noiseParam), 0, 1, height * 0.2, height * 0.9);
mountains.push(value);
noiseParam += noiseStep;
}
}

function draw() {
background(204, 241, 255);
//drawing clouds
cloud(50, 70);
push();
scale(0.7);
cloud(480, 150);
pop();
drawMountains(); //drawing the mountains
displayStatusString();
displayHorizon();
//drawing the buildings
updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
image(img, 250, 150, img.width * 0.2, img.height * 0.2); //superman
//drawing the trees
updateAndDisplayTrees();
removeTreesThatHaveSlippedOutOfView();
//drawing the people
updateAndDisplayPeople();
removePeopleThatHaveSlippedOutOfView();
}

function cloud(x, y){
//drawing the cloud
push();
translate(x, y);
noStroke();
fill(255, 237, 209, 95);
ellipse(0, 10, 70, 50);
ellipse(25, 0, 90, 60);
ellipse(50, 10, 80, 45);
pop();
}

//Buildings
function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}

function removeBuildingsThatHaveSlippedOutOfView(){
//removing the buildings
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}

// With a very tiny probability, add a new building to the end.
var newBuildingLikelihood = 0.015;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}

// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}

// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(59, 107, 130);
stroke(100);
push();
translate(this.x, height - 40);
stroke(220);
fill(207, 226, 232);
if (bHeight > 55){
for (var i = 0; i < this.nFloors; i++) {
rect(5, -15 - (i * floorHeight), this.breadth - 40, 10);
rect(35, -15 - (i * floorHeight), this.breadth - 40, 10);
}
}else{
fill(255, 246, 230);
noStroke();
fill(240, 182, 74);
fill(150, 100, 45);
rect(20, 0, this.breadth - 40, -20);
}
pop();
}

function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
speed: -3.5,
nFloors: round(random(2,8)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}

function drawMountains(){
mountains.shift();
var value = map(noise(noiseParam), 0, 1, height * 0.2, height * 0.9);
mountains.push(value);
noiseParam += noiseStep;
stroke(135, 173, 141);
fill(135, 173, 141);
beginShape();
vertex(0, height);
for (var i = 0; i < width/4; i++) {
vertex(i*5, mountains[i]);
vertex((i+1)*5, mountains[i+1]);
}
vertex(width, height);
endShape();
}

//drawing trees
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;
}

var newTreeLikelihood = 0.025;
if (random(0,1) < newTreeLikelihood) {
trees.push(makeTree(width));
}
}

function treeMove() {
this.x += this.speed;
}

function makeTree(birthLocationX) {
var trees = {x: birthLocationX,
speed: -3.5,
treeHeight: round(random(50,100)),
move: treeMove,
display: treeDisplay}
return trees;
}

function treeDisplay() {
push();
translate(this.x, height - 30);
noStroke();
fill(107, 83, 71);
rect(-5, 0, 10, 15); //tree trunk
fill(66, 161, 61);
//leaves
pop();
}

//Drawing people
function updateAndDisplayPeople(){
for (var i = 0; i < people.length; i++){
people[i].move();
people[i].display();
}
}

function removePeopleThatHaveSlippedOutOfView(){
var peopleToKeep = [];
for (var i = 0; i < people.length; i++){
if (people[i].x + people[i].breadth > 0) {
peopleToKeep.push(people[i]);
}
}
people = peopleToKeep;
}

var newPeopleLikelihood = 0.005;
if (random(0,1) < newPeopleLikelihood) {
people.push(makePeople(width));
}
}

function peopleMove() {
this.x += this.speed;
}

function peopleDisplay() {
push();
translate(this.x, height - 25);
noStroke();
fill(0);
rect(-35, 0, 70, 50, 80); //body
push();
ellipse(25, -15, 15, 110); //arm
pop();
pop();
}

function makePeople(birthLocationX) {
var ppl = {x: birthLocationX,
speed: -3.5,
pHeight: round(random(20,25)),
move: peopleMove,
display: peopleDisplay}
return ppl;
}

function displayHorizon(){
fill(53, 97, 44);
rect (0,height-50, width, height-50);
}

function displayStatusString(){
noStroke();
fill(0);
}``````

## Project 11 – Generative Landscape

sketch
``````var houses = [];
var sky;

}

function setup() {
createCanvas(480, 435);
background(220);
for (var i = 0; i < 10; i ++) {
houses[i] = makeHouse(i * 0.5);
}
frameRate(10);
}

function draw() {
background(0, 30, 140);
image(sky, 0, -100, 480, 600);
moon();
updateAndDisplayHouses();
removeHouses();
man();
gondola();
}

function updateAndDisplayHouses() {
for (var i = 0; i < houses.length; i++) {
houses[i].move();
houses[i].display();
}
}

function removeHouses() {
var housesToKeep = [];
for (var i = 0; i < houses.length; i++) {
if (houses[i].x + houses[i].breadth > 0) {
housesToKeep.push(houses[i]);
}
}
houses = housesToKeep;
}

//probability
var newHouseLikelihood = 5;
if (random(0, 200) < newHouseLikelihood) {
houses.push(makeHouse(width));
}
}

function houseMove() {
this.x += this.speed;
}

function houseDisplay() {
//draws the houses
var floorHeight = 10;
var bHeight = this.nFloors * floorHeight;
fill(100);
stroke(0);
strokeWeight(1);
push();
translate(this.x, height);
//windows
for (var i = 0; i < this.nFloors; i++) {
for (var j = 0; j < this.breadth / 20; j++) {
fill(255);
rect(j * 15 + 10, -(i * floorHeight), 5, 5);
}
}
pop();
}

function makeHouse(birthLocationX) {
var hse = {x: birthLocationX,
speed: -1.0,
nFloors: round(random(3,8)),
move: houseMove,
display: houseDisplay}
return hse;
}

function moon() {
fill(255, 255, 181);
noStroke();
circle(240, 400, 300);
}

function gondola() {
noStroke();
fill(0);
rect(150, 420, 200, 20);
ellipse(145, 425, 40, 15);
ellipse(355, 425, 40, 15);
noFill();
stroke(0);
strokeWeight(10);
//oar
stroke(0);
strokeWeight(4);
line(180, 340, 155, 438);
}

function man() {
fill(0);
noStroke();
circle(150, 348, 20);
quad(145, 340, 145, 390, 160, 390, 150, 340);
rect(145, 390, 10, 30);
stroke(0);
strokeWeight(4);
line(155, 370, 170, 370);
line(153, 373, 167, 377);
}
``````

## Project 11 – Generative Landscape

One of my hobbies is collecting adorable dolls, especially teddy bears. I like to decorate my boring room with dolls like teddy bears to lighten up the mood. I have always imagined a shop specifically for teddy bears, so I decided to create a visual of my dream shop in this project. The unique part of this shop is that it has a teddy bear conveyor belt. This conveyor belt has different types of teddy bears with different colors and characteristics. I have made the shop colored in shades of beige to really focus on the bright colors of the teddy bears.

sketch
``````//Stefanie Suk
//15104 Section D

var brownTeddy;
var blueTeddy;
var pinkTeddy;
var purpleTeddy;
var redTeddy;

var base = []; //array for base under teddy bears
var x; //position of base
var speed;

var cloudX = 60;
var cloudY = 100;

var teddyBears =
["https://i.imgur.com/VdXQHac.png",
"https://i.imgur.com/l87wQNo.png",
"https://i.imgur.com/1xcChWa.png",
"https://i.imgur.com/olZHcs2.png",
"https://i.imgur.com/pW0wt4W.png"]

}

function setup() {
createCanvas(450, 450);
frameRate(17);

var dist = 0;
for (var i = 0; i < 500; i++){ //creating 500 variations of teddy bears
base[i] = varBase(dist);
dist += 200; //dist of base and teddy bears
}
}

function draw(){
//drawing shop
drawShop();
//drawing clock
image(clock, 355, 50);
//drawing pattern on conveyor table
image(tablePattern, -150, 325, 310, 13);
image(tablePattern, 157, 325, 310, 13);
//drawing cloud
drawCloud();
translate(200, -20);
drawCloud();
translate(-100, 30);
drawCloud();
//drawing base and belt
showBase();
conveyorBelt();
}

//drawing teddy bear shop
function drawShop(){
noStroke();

//back wall
fill(234, 224, 212);
rect(0, 0, width, 235)

//window
fill(113, 207, 230);
rect(20, 20, 300, 250);

//four borders of window
fill(80, 46, 46);
rect(20, 20, 300, 10);
rect(20, 260, 300, 10);
rect(20, 20, 10, 250);
rect(320, 20, 10, 250);
//division of window
rect(220, 20, 5, 250);
rect(20, 140, 300, 5);

//conveyer belt
fill(88, 87, 86);
rect(0, 235, width, 90);

//bottom conveyor belt table
fill(214, 196, 173);
rect(0, 325, width, 180);

//text on conveyor belt table
textSize(25);
textStyle(ITALIC);
fill(89, 80, 68);
text('S.S Teddy Bear Shop', 110, 395)

}

//drawing cloud in window
function drawCloud(cloudx, cloudy) {
noStroke();
fill(255);
ellipse(cloudX,cloudY,30);
ellipse(cloudX+10,cloudY+10,30);
ellipse(cloudX+20,cloudY-10,50,40);
ellipse(cloudX+30,cloudY+5,30);
}

//variables for base
function varBase(basex){
var base = {x: basex,
basey: 275,
basew: 120,
baseh: 70,
display: createBase,
move: moveBase,
speed: -8.0,
teddyBears: random([brownTeddy, blueTeddy, pinkTeddy, purpleTeddy, redTeddy]) //random teddy bears appear on conveyor belt
}
return base;
}

function createBase(){

fill(209, 165, 109);
ellipse(this.x, this.basey, this.basew, this.baseh); //drawing circular base under teddy bears

//creating different varieties of teddy bears
if(this.teddyBears == brownTeddy){
image(brownTeddy,this.x-42, 180, brownTeddy.width*1.5, brownTeddy.height*1.5);
}
if(this.teddyBears == blueTeddy){
image(blueTeddy,this.x-42, 170, blueTeddy.width*1.5, blueTeddy.height*1.5);
}
if(this.teddyBears == pinkTeddy){
image(pinkTeddy,this.x-42, 175, pinkTeddy.width*1.5, pinkTeddy.height*1.5);
}
if(this.teddyBears == purpleTeddy){
image(purpleTeddy,this.x-42, 165, purpleTeddy.width*1.5, purpleTeddy.height*1.5);
}
if(this.teddyBears == redTeddy){
image(redTeddy,this.x-42, 180, redTeddy.width*1.5, redTeddy.height*1.5);
}

}

//calling move and show function of base
function showBase(){
for(var i = 0; i < base.length; i++){
base[i].display();
base[i].move();
}
}

//speed of base on conveyor best
function moveBase(){
this.x += this.speed;
}

function conveyorBelt(){
for(var i = 0; i < 400; i++) {
var moveBelt = i * 25;
line(x + moveBelt, height, x * moveBelt, height);
}
x += speed;
}``````

## Project 11: Generative Landscape

For this project, I went with a simple scrolling sunset city & mountain view. The sun has a second ring around it just because I felt that it gave it more of a setting sun feeling. Then the buildings have flashing lights because I thought about how dorm/student living buildings when you look at them from the outside. Everyone seems to have different color LED lights lighting up their rooms in all different colors.

``````//Helen Cheng
//helenc1@andrew.cmu.edu
//Project 11
//Section C

var buildings = [];
var hill = [];
var noiseParam = 0;
var noiseStep = 0.01;
var n;
var hillPoint;

function setup() {
createCanvas(640, 240);

// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}

//creates initial set of mountains
for (i=0; i<=width/5; i++) {
n = noise(noiseParam);
hillPoint = map(n, 0, 1, 0, height);
hill.push(hillPoint);
noiseParam += noiseStep;
}

frameRate(10);
}

function draw() {
background(93, 150, 168);

//setting sun
fill(245, 188, 159);
circle(width/2, height/2, 100);
fill(250, 211, 125);
circle(width/2, height/2, 50);

drawHills();

displayHorizon();

updateAndDisplayBuildings();
removeBuildings();
}

function drawHills() {
var x = 0;
beginShape();
vertex(0, height);
stroke(0);
fill(126, 168, 151);

//draws hill shape
for (i=0; i<width/5; i++) {
vertex(5*i, hill[i]);
}

//appends new hill point and removes first
hill.shift();
vertex(width, height);
n = noise(noiseParam);
hillPoint = map(n, 0, 1, 0, height);
hill.push(hillPoint);
noiseParam += noiseStep;

endShape(CLOSE);
}

function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}

function removeBuildings(){
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep;
}

var newBuildingLikelihood = 0.005;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}

// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}

// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
stroke(0);
fill(245, 229, 201);
push();
translate(this.x, height - 40);
stroke(200);
for (var i = 0; i < this.nFloors; i++) {
fill(color(random(255), random(255), random(255)));
rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
}
pop();
}

function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
speed: -2.0,
nFloors: round(random(2,9)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}

function displayHorizon(){
stroke(0);
fill(202, 245, 201);
rect(0,height-50, width, height);
}
``````

## Project 11: A worm dreaming

I wanted to do a little animation/landscape of a worm’s dream 🙂 Flashy colors and big flowers!

sketch
``````var backgroundX = 600;
var trip = [];
var noiseParam = 0;
var noiseStep = 0.02;

var x1 = 250;
}

function setup() {
createCanvas(450, 300);

for (var i = 0; i<width/5 +1; i++) {
var n = noise(noiseParam);
var value = map(n,0,1,0,height+50);
trip.push(value);
noiseParam+=noiseStep;
}
}

function draw() {
// backdrop
image(colorBackground,width/2,height/2);
dream();
imageMode(CENTER);
image(blueFlower, x1, 105, 250, 250);
image(redFlower, x1 - 170, 137, 67, 126);
image(yellowFlower, x1 + 130, 105.5, 210, 210);
image(worm, 94, 190.5, 188, 163);
backgroundX -= 2;
x1 -= 2;
// resetting foreground and background elements
if (backgroundX <= -125) {
backgroundX = 900;
}

if (x1 <= -160) {
x1 = 825
}
}

function dream() {
trip.shift();
var n = noise(noiseParam);
var value = map(n,0,1,0,height+50);
trip.push(value);
noiseParam += noiseStep;

beginShape();
vertex(0,height);
for(var i =0; i <= width/5; i++) {
fill(random(150,200),103,random(100,200));
strokeWeight(4);
vertex((i*5),trip[i]);

}
vertex(width,height);
endShape();
}``````

## Project 11

Continuing my inspiration from the artwork associated with Vaporwave, I decided to pursue my generative landscape project using the aesthetics, color palette, and symbols associated with the genre. Furthermore, to add to the surrealist atmosphere of the piece, I stylistically juxtaposed the Vaporwave landscape with a minimalist depiction of a train and dog. The interior of the train serves as the non-moving element of the drawing and has a window by which the Vaporwave setting can be seen. The two javascript objects that I used were telephone poles, a common symbol in Vaporwave art, that vary in thickness, height, and number of cross beams, and imported images of a marble bust, the Windows 95 logo, and an error message that vary in position and speed. Additionally, I used a noise function to generate a mountain in the background to complete the scene.

sketch – Copy
``````
var telephonePoles = [];
var images = [];
var showImage = [];
var mountainValue = [];
var noiseParam = 0;
var noiseStep = .1;

}

function setup() {
frameRate(100);
// you can change the next 2 lines:
createCanvas(480, 480);
//frameRate(20);
//create telephonePoles
for (var i = 0; i < 5; i++){
var tx = random(width);
var tt = random(1,5);
var th = random(50, height/2 - 70);
var tb = floor(random(1,4));
var pole = makePoles(tx,tt,th,tb);
telephonePoles.push(pole);
var image = makeImages(random(width/2,width),random(130,310));
showImage.push(image);
}
for(var i = 0; i <= width/5; i++){
var n = noise(noiseParam);
var value = map(n,0,1,0,height/2);
mountainValue.push(value);
noiseParam += noiseStep;
}
}

var chooseColor;
function draw() {
// you can replace any of this with your own code:
//var chooseColor = random(floor(0,5));
if (chooseColor == 0){
background(255,113,206);
} else if (chooseColor == 1){
background(1,205,254);
} else if (chooseColor == 2){
background(5,255,161);
} else if (chooseColor == 3){
background(185,103,255);
} else {
background(255,251,150)
}
drawGrid();
drawMountain();
for (var i = 0; i < 5; i++){
var t = telephonePoles[i];
t.move();
t.drawPole();
}
for (var i = 0; i < showImage.length; i++){
var m = showImage[i];
m.moveImg();
m.drawImage();
}
//image(images[0],random(0,width),height/2);
drawTrain();
drawChair();
drawLegs();
push();
translate(width,0);
scale(-1,1);
drawChair();
pop();
drawDog();
newPole();
newImage();
removeImage();
removePole();
moveMountain();
if (frameCount % 100 == 0){
chooseColor = floor(random(0,5));
}
}

function drawTrain() {
noStroke();
fill(193,143,171);
rect(0,0,width,120);
rect(0,320,width,height);
fill(221,194,59);
//window
beginShape();
vertex(0,110);
vertex(width,110);
vertex(width,330);
vertex(0,330);
beginContour();
vertex(10,320);
vertex(width-10,320);
vertex(width-10,120);
vertex(10,120);
endContour();
endShape(CLOSE);
}

function drawChair() {
noStroke();
fill(84,68,70);
beginShape();
vertex(20,height);
vertex(20,280);
curveVertex(40,300);
curveVertex(50,height);
endShape(CLOSE);
rect(30,height - 50, 100, height, 5);
}

function drawDog() {
fill("white");
noStroke();
circle(400,340,50);
//body
fill("white")
ellipse(400,400,60,100);
//tail
fill("black");
beginShape();
vertex(395,445);
curveVertex(405,460);
vertex(375,470);
curveVertex(415,460);
vertex(405,450);
endShape(CLOSE);
//ears
push();
translate(32,-20);
pop();
push();
translate(287,-20);
translate(width,0);
scale(-1,1);
pop();
}

function drawLegs() {
//legs
fill("black");
rect(370,400,20,50,40);
push();
translate(40,0);
rect(370,400,20,50,40);
pop();
}

function drawGrid() {
stroke("white");
strokeWeight(.5);
for (var yShift = 0; yShift < height/2; yShift += 10){
line(0,height/2 + yShift,width,height/2 + yShift);
}
for (var xShift = -width*40; xShift < width*40; xShift += 60){
line(width/2,height/2,xShift,height);
}
}

function poleDraw() {
noStroke();
fill("black");
//trunk
push();
translate(0,-this.tall);
rect(this.x,height/2,this.thickness, this.tall);
//beams
for (var i = 0;i < this.beamNumber; i++){
rect(this.x - 20,height/2, 40, this.thickness/2);
translate(0, this.thickness);
}
pop();
}

function poleMove (){
this.x += this.speed;
}

function newPole() {
var newPoleProb = .7;
if (random(0,1) < newPoleProb){
telephonePoles.push(makePoles(width,random(1,5),random(50, height/2 - 70),
floor(random(1,4))));
}
}

function removePole() {
var polesToKeep = [];
for (var i = 0; i < telephonePoles.length; i++){
if(telephonePoles[i].x > 0){
polesToKeep.push((telephonePoles[i]));
}
}
telephonePoles = polesToKeep;
}

function removeImage() {
var imageKeep = [];
for (var i = 0; i < showImage.length; i++){
if(showImage[i].x > 0) {
imageKeep.push(showImage[i]);
}
}
showImage = imageKeep;
}

function newImage() {
var newImageProb = .009;
if (random(0,1) < newImageProb){
showImage.push(makeImages(width,random(130,310)));
}
}
function makePoles(poleX, poleThick, poleHeight,poleBeam) {
var telephonePole = {x: poleX, thickness: poleThick,
speed: -1.0, drawPole: poleDraw,
tall: poleHeight, beamNumber: poleBeam,
move: poleMove}
return telephonePole;
}

function imageDisplay(){
image(images[this.chooseImage],this.x,this.y);
}

function imageMove(){
this.x += this.speed;
}
function makeImages(imageX,imageY) {
var m = {x: imageX, y: imageY,
speed: random(-6.0,-1.0),
chooseImage: floor(random(0,images.length)),
drawImage: imageDisplay, moveImg: imageMove};
return m;
}

function drawMountain() {
noStroke();
fill(0,100);
for( var i = 0; i < width/5; i++){
beginShape();
vertex(0,height/2);
for( var i = 0; i <= width/5; i++){
vertex(5*i,mountainValue[i]);
vertex(5*(i+1),mountainValue[i+1]);
}
vertex(width,height/2);
endShape(CLOSE);
}
}

function moveMountain() {
mountainValue.shift();
var n = noise(noiseParam);
var value = map(n,0,1,0,height/2);
mountainValue.push(value);
noiseParam += noiseStep;
}``````

## Project 11: Generative Landscape (Among Us)

For this project, I wanted to make my landscape like you are scrolling through the cafeteria in the Among Us game with different crewmates (dead or alive) moving past you.

amongus
``````var diams = [];
var lastOdd = false;
var crewMate = makeCharacter(160, 250);
var buddies = [];

function setup() {
createCanvas(400, 600);
background(165,167,154);
//set up the grid for the cafeteria floor tiles
for (var row=0; row < 7; row++){
d_row = []
if (row % 2 == 0) {
for (var col=0; col < 4; col++){
if (col % 2 == 0) {
d_row.push(smallDiamond(col*105, row*105+35))
}
else {
d_row.push(bigDiamond(col*105+35, row*105+35))
}
}
diams.push(d_row)
}
else {
for (var col=0; col < 5; col++){
if (col % 2 == 0){
d_row.push(bigDiamond(col*105+35, row*105+35))
}
else{
d_row.push(smallDiamond(col*105, row*105+35))
}
}
diams.push(d_row)
}
}
//set up the array for the crew members that appear
for (var i=0; i < 3; i++) {
buddies[i] = (makeCrew());
}
frameRate(8);
}

function draw() {
background(165,167,154);
displayDiamond();
updateFloor();
elimRow();
updateRow();
crewMate.draw();
crewMate.update();
drawbuddies();
removebuddies();
updatebuddies();
}
//update the among us character function drawn so the guy looks like he is walking
function updateCharacter(){
if (this.pos == 5){
this.pos = 1;
}
else {
this.pos += 1;
}
}
//display character with x, y positions and color associated to them
function drawCharacter() {
if (this.pos == 1) {
push();
translate(this.charx, this.chary);
AmongUs1(color(this.col));
pop();
}
else if (this.pos == 2) {
push();
translate(this.charx, this.chary);
AmongUs2(color(this.col));
pop();
}
else if (this.pos == 3) {
push();
translate(this.charx, this.chary);
AmongUs3(color(this.col));
pop();
}
else if (this.pos == 4) {
push();
translate(this.charx, this.chary);
AmongUs4(color(this.col));
pop();
}
else {
push();
translate(this.charx, this.chary);
AmongUs5(color(this.col));
pop();
}
}

//make the guy an object
function makeCharacter(x, y) {
var c = getColor();
var guy = {charx: x, chary: y, pos: 1, update: updateCharacter, draw: drawCharacter, col: c}
return guy;
}

//display crew with x, y positions and color associated to them
function drawCrew() {
if (this.fig == 0) {
if (this.pos == 1) {
push();
translate(this.charx, this.chary)
AmongUs1(color(this.col));
pop();
}
else if (this.pos == 2) {
push();
translate(this.charx, this.chary)
AmongUs2(color(this.col));
pop();
}
else if (this.pos == 3) {
push();
translate(this.charx, this.chary)
AmongUs3(color(this.col));
pop();
}
else if (this.pos == 4) {
push();
translate(this.charx, this.chary)
AmongUs4(color(this.col));
pop();
}
else {
push();
translate(this.charx, this.chary)
AmongUs5(color(this.col));
pop();
}
}
else {
push();
translate(this.charx, this.chary)
pop();
}
}
//updates crewmate positions with different speeds (to go down canvas if walking and up if dead)
function updateCrew() {
if (this.fig == 0) {
this.chary += this.speed;
if (this.pos == 5) {
this.pos = 1;
}
else {
this.pos += 1
}
}
else {
this.chary -= this.speed;
}
}
//choose a random x position for newly generated crewmates
function getX() {
var x = random(20, 330)
if (x >= 160) {
x += 70;
}
else {
x -= 20;
}
return x;
}
//choose starting position at top of canvas for walking crewmates and bottom for dead crewmates so it looks like they are all moving with the screen
function start(f) {
if (f == 0) {
return 0
}
else {
return 600
}
}
//return a random speed from the array, to be assigned to individual crewmate
function getVelocity(status) {
if (status == 0){
return Math.floor(random(1,6));
}
else {
return 5;
}
}
//return a random color from the array, to be assigned to individual crewmate
function getColor() {
var cols = ['red', 'orange', 'yellow', 'limegreen', 'green', 'blue', 'cyan', 'hotpink', 'brown', 'gray', 'white'];
var index = Math.floor(Math.random() * cols.length)
return cols[index];
}

//assign object properties to the crew (crewmates onscreen)
function makeCrew() {
var x = getX();
var f = Math.floor(random(0,2));
var y = start(f);
var v = getVelocity(f);
var c = getColor();
var crew = {charx: x, chary: y, speed: v, update: updateCrew, pos: 1, fig: f, draw: drawCrew, col: c}
return crew
}
//draw new crewmates
function drawbuddies() {
for (var i=0; i < buddies.length; i++){
buddies[i].draw();
}
}

function updatebuddies() {
for (var i=0; i < buddies.length; i++){
buddies[i].update();
}
}
//remove crewmates as they pass offscreen
function removebuddies() {
keep = []
for (var i=0; i < buddies.length; i++){
if (buddies[i].chary +600 > 0) {
keep.push(buddies[i])
}
}
buddies = keep;
}
//add new crewmates with a probability of 2%
var threshold = 0.02
if (random(0,1) < threshold) {
buddies.push(makeCrew())
}
}
//draw all the stages of walking for one crewmate
function AmongUs1(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//body
beginShape();
curveVertex(20,9);
curveVertex(15,29);
curveVertex(15,64);
curveVertex(21,77);
curveVertex(32,75);
curveVertex(33,63);
curveVertex(39,63);
curveVertex(42,75);
curveVertex(52,72);	//front of foot
curveVertex(57,60);
curveVertex(56,42);
curveVertex(59,24);
curveVertex(50,10);
curveVertex(35,3);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}

function AmongUs2(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(15,57);
curveVertex(5,68);
curveVertex(19,78);
curveVertex(34,63);
endShape(CLOSE);
//body
beginShape();
curveVertex(22,6);
curveVertex(15,30);
curveVertex(15,56);
curveVertex(24,65);
curveVertex(34,65);
curveVertex(42,66);
curveVertex(55,79);
curveVertex(68,70);
curveVertex(52,59);	//front of foot
curveVertex(55,47);
curveVertex(55,34);
curveVertex(58,21);
curveVertex(47,7);
curveVertex(33,2);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs3(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(46,56);
curveVertex(48,73);
curveVertex(19,72);
curveVertex(19,62);
endShape(CLOSE);
//body
beginShape();
curveVertex(19,10);
curveVertex(15,35);
curveVertex(17,61);
curveVertex(25,68);
curveVertex(28,75);
curveVertex(24,83);
curveVertex(36,82);
curveVertex(41,71);
curveVertex(39,60);	//front of foot
curveVertex(49,58);
curveVertex(57,50);
curveVertex(56,35);
curveVertex(58,25);
curveVertex(54,14);
curveVertex(45,8);
curveVertex(32,4);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs4(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(40,60);
curveVertex(56,79);
curveVertex(66,65);
curveVertex(54,52);
endShape(CLOSE);
//body
beginShape();
curveVertex(25,4);
curveVertex(16,24);
curveVertex(15,54);
curveVertex(19,61);
curveVertex(8,61);
curveVertex(5,74);
curveVertex(19,76);
curveVertex(28,69);
curveVertex(32,63);	//front of foot
curveVertex(45,63);
curveVertex(56,56);
curveVertex(58,38);
curveVertex(58,26);
curveVertex(54,12);
curveVertex(43,3);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
function AmongUs5(c) {
stroke(0);
strokeWeight(5);
fill(c)
//backpack
beginShape();
curveVertex(16,23);
curveVertex(4,28);
curveVertex(4,57);
curveVertex(18,62);
endShape(CLOSE);
//back leg
beginShape();
curveVertex(32,61);
curveVertex(34,76);
curveVertex(49,76);
curveVertex(50,56);
endShape(CLOSE);
//body
beginShape();
curveVertex(24,3);
curveVertex(17,24);
curveVertex(16,51);
curveVertex(15,59);
curveVertex(23,59);
curveVertex(10,64);
curveVertex(12,72);
curveVertex(32,70);
curveVertex(37,62);	//front of foot
curveVertex(49,62);
curveVertex(56,54);
curveVertex(58,34);
curveVertex(58,23);
curveVertex(54,13);
curveVertex(47,5);
curveVertex(35,1);
endShape(CLOSE);
//goggles
fill(204,227,238);
beginShape();
curveVertex(31,16);
curveVertex(56,18);
curveVertex(59,29);
curveVertex(55,33);
curveVertex(32,33);
curveVertex(24,24);
endShape(CLOSE);
}
stroke(0);
strokeWeight(5);
fill(255);
//bone sticking out
beginShape();
curveVertex(33,39);
curveVertex(32,29);
curveVertex(27,22);
curveVertex(32,18);
curveVertex(35,23);
curveVertex(37,17);
curveVertex(41,21);
curveVertex(38,32);
curveVertex(38,42);
endShape(CLOSE);
fill(c);
//arm
beginShape();
curveVertex(2,39);
curveVertex(12,34);
curveVertex(20,38);
curveVertex(18,60);
curveVertex(6,59);
endShape(CLOSE);
//half body
beginShape();
curveVertex(15,37);
curveVertex(28,40);
curveVertex(34,37);
curveVertex(44,40);
curveVertex(58,38);
curveVertex(57,66);
curveVertex(45,74);
curveVertex(41,62);
curveVertex(35,62);
curveVertex(32,74);
curveVertex(17,73);
curveVertex(14,49);
endShape(CLOSE);

}
//draw the cafeteria floor
//make small diamond tile object
function smallDiamond(x, y) {
var diamond = {diamondx: x, diamondy: y, diamondw: 70, diamondh: 35, speed: -5.0, draw: drawDiamond, update: updateDiamond}
return diamond;
}
//draw small diamond
function drawDiamond() {
noStroke();
fill(133,135,124);
beginShape();
vertex(this.diamondx,this.diamondy);
vertex(this.diamondx+this.diamondw/2,this.diamondy-this.diamondh);
vertex(this.diamondw+this.diamondx, this.diamondy);
vertex(this.diamondx+this.diamondw/2,this.diamondy+this.diamondh);
endShape(CLOSE);
}
//update position of the tile with speed
function updateDiamond() {
this.diamondy += this.speed;
}
//make big diamond tile object
function bigDiamond(cx, cy) {
var bigdiam = {leftD: smallDiamond(cx-70, cy), topD: smallDiamond(cx-35, cy-35), rightD: smallDiamond(cx, cy), bottomD: smallDiamond(cx-35, cy+35), draw: drawBigDiamond, update: updateBigDiamond}
return bigdiam;
}
//make big diamond tile from smaller diamond tiles
function drawBigDiamond() {
this.leftD.draw()
this.topD.draw()
this.rightD.draw()
this.bottomD.draw()
}
//update position of big diamond tiles
function updateBigDiamond() {
this.leftD.update();
this.topD.update();
this.rightD.update();
this.bottomD.update();
}
//draw the diamonds
function displayDiamond() {
for (var i=0; i < diams.length; i++){
for (var j=0; j < diams[i].length; j++){
diams[i][j].draw();
}
}
}
//update the positons of the diamonds as the screen scrolls
function updateFloor() {
for (var i=0; i < diams.length; i++) {
for (var j=0; j < diams[i].length; j++) {
diams[i][j].update();
}
}
}
//get rid of rows that have slipped offscreen
function elimRow(){
keepRow = false;
for (var i=0; i < diams[0].length; i++) {
if (lastOdd == false){
if (i % 2 == 0) {
if (diams[0][i].diamondy + diams[0][i].diamondh > 0) {
keepRow = true
}
}
else {
if (diams[0][i].bottomD.diamondy + diams[0][i].bottomD.diamondh > 0){
keepRow = true
}
}
}
else {
if (i % 2 == 0) {
if (diams[0][i].bottomD.diamondy + diams[0][i].bottomD.diamondh > 0){
keepRow = true
}
}
else {
if (diams[0][i].diamondy + diams[0][i].diamondh > 0){
keepRow = true
}
}
}
}
if (keepRow == false){
diams.shift();
}
}
//update the new rows added such that they match the original cafeteria tile pattern
function updateRow() {
if (diams.length < 7){
n_row = []
if (lastOdd == true){
for (var col=0; col < 4; col++){
if (col % 2 == 0) {
n_row.push(smallDiamond(col*105, 665))
}
else {
n_row.push(bigDiamond(col*105+35, 665))
}
}
diams.push(n_row);
lastOdd = false;
}
else {
for (var col=0; col < 5; col++){
if (col % 2 == 0){
n_row.push(bigDiamond(col*105+35, 665))
}
else {
n_row.push(smallDiamond(col*105, 665))
}
}
diams.push(n_row);
lastOdd = true;
}
}
}``````