## enwandu-Project-10-Landscape

``````// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-10: Generative Landscape

var clouds = [];
var birds = [];
var frames = [];
var mS1 = 0.0003;
var mD1 = 0.03;
var mS2 = 0.0005;
var mD2 = 0.01;

// Images for the bird flight cycle
var filenames = [];
filenames[0] = "https://i.imgur.com/RXatjYL.png";
filenames[1] = "https://i.imgur.com/tUdWerm.png";
filenames[2] = "https://i.imgur.com/4RK7a5B.png";
filenames[3] = "https://i.imgur.com/tUdWerm.png";
filenames[4] = "https://i.imgur.com/RXatjYL.png";
filenames[5] = "https://i.imgur.com/yZgWcpm.png";
filenames[6] = "https://i.imgur.com/wT9v4PU.png";
filenames[7] = "https://i.imgur.com/0Ss2jc0.png";

// Load images into frames array for birds
for(i = 0; i < filenames.length; i++){
}
}

function setup(){
createCanvas(480, 320);
frameRate(10);
}

function draw(){
Sky(0, 0, width, height);
makeMountain();
makeBird();

updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutOfView();

updateAndDisplayBirds();

Airplane();
}

function Sky(x, y, w, h) {
var c1, c2;

c1 = color(251, 234, 192);
c2 = color(118, 85, 45);
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
function updateAndDisplayClouds(){
for (var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].display();
}
}

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

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

// Spawn a new cloud to the right edge of the canvas
var newCloudLikelihood = 0.02; //clouds are spawned relatively often
if (random(0,1) < newCloudLikelihood) {
clouds.push(makeCloud(width));
}
}

// Spawn a new bird to the right edge of the canvas
var newBirdLikelihood = 0.005; //birds spawn less frequently than the clouds
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBird(width));
}
}

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

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

function cloudDisplay() {
var cHeight = this.altitude * 25;

push();
translate(this.x, height - 260);

// Draws Clouds of various sizes
fill(191, 175, 159);
// Variables randomize the positioning and size of the clouds
pop();
}

function birdDisplay(){
push();
translate(this.x, this.height);
for (i = 0; i< this.size; i++){
var frame = frameCount % 5; //cycles through bird images
image(frames[frame + i],this.x-this.disX*i,0-this.disY*i);
}
pop();
}

function makeCloud(birthLocationX) {
var clouds = {x: birthLocationX,
speed: -1.2,
altitude: round(random(-1,2)),
move: cloudMove,
display: cloudDisplay}
return clouds;
}

function makeBird(birthLocationX){
var birds = {x: birthLocationX,
disX: random(15, 40),
disY: random(30),
size:floor(random(1, 5)),
speed: random(-5, -2),
height: round(random(75, 100)),
move: birdMove,
display: birdDisplay}
return birds;
}

function makeMountain(){
// Generates the terrain
// Larger background mountains
noStroke();
fill(98, 89, 79);
beginShape();
for(x1 = 0; x1 < width; x1++){
var t1 = (x1 * mD1) + (millis() * mS1);
var y1 = map(noise(t1), 0, 1, 0, height);
vertex(x1, y1 - 10);
}
vertex(width,height);
vertex(0,height);
endShape();

// Middlegorund mountains
fill(63, 57, 53);
beginShape();
for(x2 = 0; x2 < width; x2++){
var t2 = (x2 * mD2) + (millis() * mS2);
var y2 = map(noise(t2), 0, 1, 0, height);
vertex(x2, y2 + 80);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function Airplane(){
// Wing
noStroke();
fill(193, 173, 146);
quad(401, 247, 176, 124, 208, 121, 454, 175);
fill(67, 63, 52);
quad(401, 247, 200, 146, 228, 143, 444, 232);
fill(73, 58, 47);
triangle(176, 124, 208, 121, 187, 129);
fill(68, 39, 18);
quad(176, 124, 208, 121, 158, 70, 147, 66);

// Window Frame
beginShape();
noStroke();
fill(23, 16, 16);
vertex(0, 0);
vertex(0, 320);
vertex(480, 320);
vertex(480, 0);
vertex(450, 0);
vertex(430, 158);
vertex(426, 177);
vertex(416, 203);
vertex(400, 237);
vertex(373, 270);
vertex(350, 283);
vertex(333, 290);
vertex(295, 300);
vertex(250, 307);
vertex(211, 309);
vertex(163, 302);
vertex(121, 294);
vertex(87, 275);
vertex(56, 245);
vertex(39, 203);
vertex(20, 0);
endShape();

// Window Frame Highlight
beginShape();
noStroke();
fill(86, 66, 59);
vertex(0, 90);
vertex(19, 214);
vertex(31, 255);
vertex(44, 277);
vertex(59, 292);
vertex(67, 299);
vertex(86, 312);
vertex(97, 320);
vertex(81, 320),
vertex(70, 312);
vertex(51, 299);
vertex(43, 292);
vertex(28, 277);
vertex(15, 255);
vertex(0, 214);
endShape();

beginShape();
vertex(480, 52);
vertex(467, 109);
vertex(456, 182);
vertex(447, 226);
vertex(428, 261);
vertex(411, 279);
vertex(378, 304);
vertex(347, 320);
vertex(363, 320);
vertex(394, 304);
vertex(427, 279);
vertex(444, 261);
vertex(463, 226);
vertex(472, 182);
vertex(480, 109);
endShape();
}
``````

I really wanted to show the view from a plane, because I love flying. I think there is something very calming about being in the air and I wanted my project to encapsulate this idea. Being in the air offers new perspectives, and I would love it if I could fly. Added some birds, clouds and mountains in the background.

## elizabew- project – 10-landscape

``````//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 10

var coralspeed = 0.0004;
var coralDetail = 0.005;
var largercoralspeed = 0.0001;
var largercoralDetail = 0.01;
var terrainSpeed = 0.0005;
var terrainDetail = 0.002;

var filearray = [];
var files = [
"https://i.imgur.com/iWIzq30.png",//coral image
"https://i.imgur.com/UaGovr7.png",//fish image
"https://i.imgur.com/kzzaYE9.png"]//golden fish image
var corals = []; //5 every time
var fishes = []; //8 every time
var rarefishes = [];

for (i = 0; i < files.length; i++){ //preload body
}
}

function setup() {
createCanvas(400, 400);
frameRate(10);

for(i = 0; i < 5; i++){
corals.push(makeCoral()); //number of coral
}
for(i = 0; i < 8; i++){
fishes.push(makeFish()); //number of fish
}
for(i = 0; i < 1; i++){
rarefishes.push(makeRareFish()); //one gold fish
}

}

function draw(){
background(3,23,71);
sandandcoral();

for(i = 0; i < corals.length; i++){ //drawing and moving coral
corals[i].draw();
corals[i].move();
}
for(i = 0; i < fishes.length; i++){ //drawing and moving fish
fishes[i].draw();
fishes[i].move();
}
for(i = 0; i < rarefishes.length; i++){ //drawing and moving rarefish
rarefishes[i].draw();
rarefishes[i].move();
}

}

//rarefish

function makeRareFish(){
var rarefish = { rimage: filearray[2],
rxPos: random(0, width),//random initial x position
ryPos: random(50, 200), //random y position
rwidth: random(45, 80), //random width
rheight: random(45, 70), //random height
rSpeed: random(-2, -6), //random speed
}
rarefish.draw = drawRareFish; //calls to drawFish
rarefish.move = moveRareFish; //calls to moveFish
return rarefish;

}

function drawRareFish(){ //draws rare fish
image(this.rimage, this.rxPos, this.ryPos, this.rwidth, this.rheight);

}

function moveRareFish(){ //moves rare fish
this.rxPos += this.rSpeed;
if (this.rxPos < 0){
this.rxPos = width; //remakes fish once it hits the end
}
}

//FISH

function makeFish(){
var fish = { fimage: filearray[1],
fxPos: random(0, width),//random initial x position
fyPos: random(50, 250), //random y position
fwidth: random(45, 80), //random width
fheight: random(45, 70), //random height
fSpeed: random(-2, -6) //random speed
}
fish.draw = drawFish; //calls to drawFish
fish.move = moveFish; //calls to moveFish
return fish;
}

function drawFish(){ //draws fish
image(this.fimage, this.fxPos, this.fyPos, this.fwidth, this.fheight);

}

function moveFish(){ //moves fish
this.fxPos += this.fSpeed;
if (this.fxPos < 0){
this.fxPos = width; //remakes fish once it hits the end
}
}

//CORAL

function makeCoral(){ //object coral
var coral = { cimage: filearray[0],
cxPos: random(0, width), //random initial x position
cyPos: random(300, 350), //random y position
cSize: random(35, 100), //random size
cSpeed: random(-5, -10) //random speed
}
coral.draw = drawCoral; //calls to drawCoral function
coral.move = moveCoral; //calls to moveCoal function
return coral;
}

function drawCoral(){ //draw coral
image(this.cimage, this.cxPos, this.cyPos, this.cSize, this.cSize);

}

function moveCoral(){ //moving coral
this.cxPos += this.cSpeed;
if (this.cxPos < 0){
this.cxPos = width; //remakes coral once it hits the end
}
}

//TERRAIN

function sandandcoral() {

//larger coral background
beginShape();
noStroke();
fill(2,13,39);
for (var x = 0; x < width; x++) {
var t = (x * largercoralDetail) + (millis() * largercoralspeed);
var y = map(noise(t), 0,1, 300, height-400);
vertex(0,480);
vertex(480,480);
vertex(x, y);
}
endShape();

//coral background
beginShape();
noStroke();
fill(37,62,103);
for (var x = 0; x < width; x++) {
var t = (x * coralDetail) + (millis() * coralspeed);
var y = map(noise(t), 0,1, 400, height-250);
vertex(0,480);
vertex(480,480);
vertex(x, y);
}
endShape();

//sand
beginShape();
noStroke();
fill(167,159,146);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 300, height);
vertex(0,480);
vertex(480,480);
vertex(x, y);
}
endShape();

}
``````

I had a lot of difficulty with this project since I still wasn’t fully comfortable with making objects and I ran into a the issue of having too many ideas and not knowing how to implement all of them.

My initial idea was to randomize different colored fish with a shark appearing onlysometimes while pieces of coral moved by with the sand terrain.

My final idea only implements randomly sized fish, one randomly sized golden fish, and some coral that moves past with the changing terrain. However, I’m pretty happy with the final product. It doesn’t look the exact way I wanted it too, but happy accidents are okay too.

## NatalieKS-Project10

``````//Natalie Schmidt
//nkschmid@n=andrew.cmu.edu
//Section D
//Project-10-Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
//x position of rock
var rx = 470;
//y position of rock
var ry = 280;
//array to store all the rainbow rocks
var clouds = [];

function setup() {
createCanvas(480, 300);
frameRate(10);
//load the clouds ito the array
//code came from example
for (var i = 0; i < 10; i++) {
var rx = random(width);
clouds[i] = makeClouds(rx);
}
frameRate(10);
}

function draw() {
background(32, 46, 71);
noStroke();
//draw clouds - came from example
updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutOfView();
//draw the moon
fill(255, 255, 255, 220);
ellipse(30, 30, 40);
noFill();
beginShape();
//draw the terrains
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 10, height);
//create 2 terrains so it looks dimensional
vertex(x, y);
vertex(x + 10, y);
//fill the terrain with lines
stroke(47, 73, 121, 80);
line(x, y, x, height);
}
endShape();
//draw the "horizon"
fill(32, 46, 71, 90);
rect(0, 255, width, 45);
//draw the rocks
rainbowRock1();
rainbowRock2();
rainbowRock3();
rainbowRock4();
rainbowRock5();
rainbowRock6();
rainbowRock7();

// if they disappear off screen, enter again
// from the right
if (rx + 195 < 0) {
rx = width;
}
else {
rx -= 8;
}

}

//draw the first stack of rocks
function rainbowRock1() {
noStroke();
fill(0);
ellipse(rx, ry, 35, 30);
fill(0, 0, 255);
ellipse(rx, ry - 14, 35, 30);
fill(236, 223, 21);
ellipse(rx, ry - 28, 35, 30);
fill(255);
ellipse(rx, ry - 42, 35, 30);
fill(255, 0, 0);
ellipse(rx, ry - 56, 35, 30);
}

//draw the second stack
function rainbowRock2() {
fill(21, 112, 49);
ellipse(rx + 70, ry, 35, 30);
fill(177, 157, 120);
ellipse(rx + 70, ry - 14, 35, 30);
fill(0);
ellipse(rx + 70, ry - 28, 35, 30);
fill(114, 113, 108);
ellipse(rx + 70, ry - 42, 35, 30);
fill(0, 0, 255);
ellipse(rx + 70, ry - 56, 35, 30);
}

//draw third stack
function rainbowRock3() {
fill(161, 52, 116);
ellipse(rx + 110, ry, 35, 30);
fill(255, 113, 151);
ellipse(rx + 110, ry - 14, 35, 30);
fill(255, 0, 0);
ellipse(rx + 110, ry - 28, 35, 30);
fill(255, 107, 59);
ellipse(rx + 110, ry - 42, 35, 30);
fill(216, 208, 28);
ellipse(rx + 110, ry - 56, 35, 30);
fill(14, 97, 36);
ellipse(rx + 110, ry - 70, 35, 30);
}

//draw fourth stack
function rainbowRock4() {
fill(213, 180, 30);
ellipse(rx + 160, ry, 35, 30);
fill(255, 107, 59);
ellipse(rx + 160, ry - 14, 35, 30);
fill(255, 0, 0);
ellipse(rx + 160, ry - 28, 35, 30);
fill(255, 97, 139);
ellipse(rx + 160, ry - 42, 35, 30);
}

//draw fifth stack
function rainbowRock5() {
fill(255, 97, 139);
ellipse(rx + 220, ry, 35, 30);
fill(209, 198, 174);
ellipse(rx + 220, ry - 14, 35, 30);
fill(0, 0, 255);
ellipse(rx + 220, ry - 28, 35, 30);
fill(213, 180, 30);
ellipse(rx + 220, ry - 42, 35, 30);
}

//draw sixth stack
function rainbowRock6() {
fill(157, 150, 130);
ellipse(rx + 260, ry, 35, 30);
fill(0);
ellipse(rx + 260, ry - 14, 35, 30);
fill(179, 31, 109);
ellipse(rx + 260, ry - 28, 35, 30);
}

//draw seventh stack
function rainbowRock7() {
fill(255, 0, 0);
ellipse(rx + 310, ry, 35, 30);
fill(179, 31, 109);
ellipse(rx + 310, ry - 14, 35, 30);
fill(0, 0, 255);
ellipse(rx + 310, ry - 28, 35, 30);
fill(14, 97, 36);
ellipse(rx + 310, ry - 42, 35, 30);
fill(217, 199, 33);
ellipse(rx + 310, ry - 56, 35, 30);
fill(255, 80, 49);
ellipse(rx + 310, ry - 70, 35, 30);
}

//code below comes from example, modified to make clouds
function updateAndDisplayClouds() {
for (var i = 0; i < clouds.length; i++) {
clouds[i].move();
clouds[i].display();
}
}

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

var newCloudsLikelihood = 0.20;
if (random(0, 1) < newCloudsLikelihood) {
clouds.push(makeClouds(width));
}
}

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

function cloudsDisplay() {
var floorHeight = 10;
var bHeight = this.nFloors * floorHeight;
fill(66, 69, 85, 100);
push();
translate(this.x, height - 40);
ellipse(0, -bHeight - 115, bHeight, this.breadth);
pop();
}

function makeClouds(birthLocationX) {
var cloud = {x: birthLocationX,
speed: -5.0,
nFloors: round(random(5, 12)),
move: cloudsMove,
display: cloudsDisplay}
return cloud;
}
``````

This project was really rough. I had a hard time using objects for this particular assignment, so I couldn’t really implement what I originally wanted. I’m okay with the final product, but it is a very simplified version of what I originally intended to make. I wish I had a better understanding of these functions, so I could better use them for my own purposes.

Here’s my original idea sketched out on paper:

Here’s also where my inspiration came from:

These are the “Seven Magic Mountains,” an installation in Nevada somewhere by the highway to Las Vegas. My family and I have driven from home (California) to Las Vegas several times, and we always pass by these enormous, brightly statues.

## alchan-Project 10-Generative Landscape

``````var ruins = [];
var farRuins = [];
var fog = [];

var skyColor;

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

for (var c = 0; c < 10; c++) {
// populate arrays
var ruinX = random(width);
var farRuinX = random(width);
ruins[c] = makeRuin(ruinX);
farRuins[c] = makeFarRuin(farRuinX);
for(var d = 0; d<2; d++){
var fogX = random(width);
fog[c] = makeFog(fogX);
}
}
skyColor = color(220, 233, 239);

}

function draw() {
background(skyColor);

sunDraw();
sunMove();

fill(210, 223, 229);
noStroke();
rect(0, 180, width, 120);

// draw the rest of the objects in the scene
for(var i = 0; i < farRuins.length; i++) {
farRuins[i].draw();
farRuins[i].move();
}

for(var i = 0; i < ruins.length; i++) {
ruins[i].draw();
ruins[i].move();
}

for(var i = 0; i < fog.length; i++) {
fog[i].draw();
fog[i].move();
}
}

// FOG
function fogDraw() {
push();
translate(this.xPos, this.yOffset);
stroke(255, 255, 255, 40);
strokeWeight(this.fHeight);
line(0, 0, this.fSize, 0);
pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function fogMove() {
this.xPos += this.speed;
if(this.xPos < 0 - this.fSize - 30) {
this.fHeight = random(10, 50);
this.fSize = random(30, 150);
this.xPos = width + this.fSize + random(-25, 25);
}
}

function makeFog() {
var fog = {xPos: random(width), //, width*4
speed: random(-0.4, -0.3),
fSize: random(30, 150),
fHeight: random(20, 60),
yOffset: random(50, height),
draw: fogDraw,
move: fogMove};
return fog;
}
// END FOG

// SUN
var sun = {xPos: 20, size: 20, speed:.1};

function sunDraw() {
var sunColor = color(234, 229, 228);
noStroke();
fill(252, 202, 191);
ellipse(sun.xPos, 60, sun.size);

// make a gradient, centered around the sun
for (var s = 0; s <= width; s += 5) {
var amt = map(s, 0, height, 0, 1);
var gradient = lerpColor(sunColor, skyColor, amt);
noFill();
strokeWeight(5);
ellipse(sun.xPos, 60, sun.size + s);
}
}

function sunMove() {
sun.xPos += sun.speed;
if (sun.xPos > width + sun.size) {
sun.xPos = 0 - sun.size;
}
}
// END SUN

// RUINS
function ruinDraw(){
push();
translate(this.xPos - this.rWidth/2, height-40+this.yPosOffset);
noStroke();
fill(245, 245, 255);
beginShape();
vertex(0 + this.rWidth/2, 0 + this.yOffset);
vertex(0 - this.rWidth/2, 0 + this.yOffset);
vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
endShape(CLOSE);
// draw reflections
scale(1, -1);
fill(245, 245, 255, 60);
beginShape();
vertex(0 + this.rWidth/2, 0 - this.yOffset);
vertex(0 - this.rWidth/2, 0 - this.yOffset);
vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
endShape(CLOSE);
pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function ruinMove(){
this.xPos += this.speed;
if (this.xPos < 0 - this.rWidth) {
this.rHeight = random(15, 40);
this.rWidth = random(10, 60);
this.lean = random(0, 20);
this.xPos = width + this.rWidth + this.lean + random(-5, 50);
}
}

function makeRuin(x) {
var ruin = {xPos: x,
rHeight: random(15, 60),
rWidth: random(10, 80),
lean: random(0, 20),
spike1: random(0, 10),
valley1: random(0, 10),
spike2: random(0, 10),
valley2: random(0, 10),
spike3: random(0, 10),
valley3: random(0, 10),
yOffset: random(-5, 5),
yPosOffset: random(-15, 15),
speed: random(-.4, -.5),
draw: ruinDraw,
move: ruinMove}
return ruin;
}
// END RUINS

// FAR RUINS
function farRuinDraw(){
push();
translate(this.xPos - this.rWidth/2, height-90);
noStroke();
fill(233, 237, 244);
beginShape();
vertex(0 + this.rWidth/2, 0 + this.yOffset);
vertex(0 - this.rWidth/2, 0 + this.yOffset);
vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
endShape(CLOSE);
// draw reflections
fill(233, 237, 244, 60);
scale(1, -1);
beginShape();
vertex(0 + this.rWidth/2, 0 - this.yOffset);
vertex(0 - this.rWidth/2, 0 - this.yOffset);
vertex(0 - this.rWidth/2 - this.lean, -this.rHeight - this.spike1);
vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight + this.valley1);

vertex(0 - this.rWidth/2 + this.valley1, -this.rHeight - this.spike2);
vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight + this.valley2);

vertex(0 - this.rWidth/2 + this.valley1 + this.valley2, -this.rHeight - this.spike2);
endShape(CLOSE);
pop();
}

// move objects across canvas, when they hit the edge
// move them back to the far edge with randomized attributes
function farRuinMove(){
this.xPos += this.speed;
if (this.xPos < 0 - this.rWidth) {
this.rHeight = random(50, 100);
this.rWidth = random(40, 100);
this.lean = random(0, 50);
this.xPos = width + this.rWidth + this.lean + random(-5, 50);
}
}

function makeFarRuin(x) {
var farRuin = {xPos: x,
rHeight: random(50, 100),
rWidth: random(40, 100),
lean: random(0, 50),
spike1: random(0, 10),
valley1: random(0, 10),
spike2: random(0, 10),
valley2: random(0, 10),
spike3: random(0, 10),
valley3: random(0, 10),
yOffset: random(-15, 15),
speed: random(-.4, -.2),
draw: farRuinDraw,
move: farRuinMove}
return farRuin;
}
// END FAR RUINS
``````

I wanted to create a landscape that had something to do with water, and ended up going with icebergs or jagged ruins drifting through a pale sea. The size and shape of the icebergs are all randomly determined, as are the fog clouds. I had also wanted to extra “surprise” elements to the landscape (a sunken ship, and a glimpse of a sea serpent) but I ran out of time and wasn’t able to implement them the way I had planned.

## hqq – secE – project 10 – generative landscape

``````//hamza qureshi
//hqq@cmu.edu
//section e
//project 10: generative landscapes

var bird = []; //new index to draw image of bird
var frame = 0; //frames
var aspeed = 0.0005; //speeds for various cloud layers
var bspeed = 0.0007;
var cspeed = 0.0009;
var dspeed = 0.00099;
var change = 0.007;
var bchange = 0.009;
var cchange = 0.006;
var dchange = 0.005;

var birdframes = []; //each frame of bird image
birdframes[0] = "https://i.imgur.com/bQsrqmu.png"
birdframes[1] = "https://i.imgur.com/K5dXjwK.png"
birdframes[2] = "https://i.imgur.com/kK4kW4t.png"
birdframes[3] = "https://i.imgur.com/K5dXjwK.png"

for (var i = 0; i < birdframes.length; i++){
bird.push(loadImage(birdframes[i])); //push bird frames into array
}
}

function setup(){
createCanvas(480,480);
frameRate(10);
}

function draw(){
background(220,240,225);

fill(230, 240, 225);
rect(0,width/5,width,height);
fill(240,240, 200);
rect(0, width/4, width, height);
fill(250,241,185);
rect(0,width/3,width,height);
fill(255,208,121); //sun
ellipse(width/2,height/2,200,200);

backclouds(); //functions for the cloud layers
backmiddle();
frontmiddle();
frontclouds();

//bird 1
push();
scale(0.4);
image(bird[frameCount%4], 800, 100);
frame += 1;
if (frame > bird.length){
frame = 0;
}
pop();

//bird 2
push();
scale(0.1);
image(bird[frameCount%4],1400, 1400);
frame += 1;
if (frame > bird.length){
frame = 0;
}
pop();

//bird 3
push();
scale(0.2);
image(bird[frameCount%4], 1000, 1000);
frame += 1;
if (frame > bird.length){
frame = 0;
}
pop();

//airplane wing
push();
noStroke();
fill(255,150,150);
triangle(360,200,420,240,370,160);
fill(248);
triangle(480,480,360,200,480,280);
fill(254);
triangle(360,200,480,280,480,210);

//airplane window
stroke(245);
strokeWeight(70);
noFill();
rect(0,0,width,height,75,75);
pop();

}

function backclouds(){ //back row of clouds
push();
noStroke();
beginShape();
fill(219,241,252);
for (var x = 0; x < width; x++){
var k = (x*change) + (millis()*aspeed);
var y = map(noise(k), 0,1, 190, height/2); //noise remaps change vs speed
vertex(0, height); //to draw high and low-points in the shape
vertex(width, height);
vertex(x,y)
}
endShape();
pop();
}

function backmiddle(){ //repeated for middle
push();
noStroke();
beginShape();
fill(229,241,252);
for (var x = 0; x < width; x++){
var k = (x*bchange) + (millis()*bspeed);
var y = map(noise(k), 0,1, 260, height/2);
vertex(0, height);
vertex(width, height);
vertex(x,y)
}
endShape();
pop();
}

function frontmiddle(){
push();
noStroke();
beginShape();
fill(239,241,252);
for (var x = 0; x < width; x++){
var k = (x*cchange) + (millis()*cspeed);
var y = map(noise(k), 0,1, 320, height/2);
vertex(0, height);
vertex(width, height);
vertex(x,y)
}
endShape();
pop();
}

function frontclouds(){ //and repeated for end
push();
noStroke();
beginShape();
fill(249,246,249);
for (var x = 0; x < width; x++){
var k = (x*dchange) + (millis()*dspeed);
var y = map(noise(k), 0,1, 500, height/3);
vertex(0, height);
vertex(width, height);
vertex(x,y)
}
endShape();
pop();
}
``````

For this project, I wanted to mimic a simulation of looking out of the window on an airplane. Thus, the “landscape” is actually a multi-layered blanket of clouds that move at varying speeds depending on its distance from the airplane. To get a bit more whimsical, I used image animations to show birds somehow flying alongside the plane – maybe they’re robots?

This was a fun method of creating a scene that was just interesting to watch over time, as the varying changes create different intensities of each of the layers.

## creyes1-Project-10-Landscape

``````//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-10 (Generative Landscape)

//Colors
var green1 = [152, 186, 157];
var green2 = [169, 200, 172];
var green3 = [122, 153, 126];

//Shape Arrays
var orbs = [];
var cords = [];
var clouds = [];
var landlines = [];

var inc = 0; //Value for noise command

function setup() {

createCanvas(480, 480);
background(green1);
noStroke();
angleMode(DEGREES);

//Generates random land form
for (var x = 0; x < width; x++) {
landlines.push(makeLandscape(x, 1));
}

//Draws initial set of orbs
for (var i = 0; i < 5; i++) {
var rx = random(width);
var ry = random(height);
orbs[i] = makeOrb(rx, ry);
}

for (var i = 0; i < 10; i++) {
cords.push(makeCord());
}

}

function draw() {

background(green1);

//Lighter background shapes
fill(green2);
noStroke();
ellipse(width/2, height/2, 100, 300);
ellipse(width/2 + 120, height/2, 75, 200);
ellipse(width/2 - 120, height/2, 75, 200);

//Renders and moves landscape
for (var x = 0; x < landlines.length; x++) {
landlines[x].display();
landlines[x].move();
}

//Removes first in the array, or the line that goes off-canvas
landlines.shift();

//Increases increment by 1, pushes a new land line onto array
inc += 1;
landlines.push(makeLandscape(width-1, inc));

//Layers lines and orbs for depth
for (var i = 0; i < 7; i++) {
cords[i].display();
}

updatePositions();

for (var i = 7; i < 10; i++) {
cords[i].display();
}

}

//GENERAL FUNCTIONS-------------------------------------------------------------

function updatePositions() {

//Update orb position and display
for (var i = 0; i < orbs.length; i++) {
orbs[i].move();
orbs[i].display();
}

//Update cloud position and display
for (var i = 0; i < clouds.length; i++) {
clouds[i].move();
clouds[i].display();
}

}

//Removes orbs and clouds after passing edge of canvas
function removeFalloff() {

var orbsToKeep = [];

for (var i = 0; i < orbs.length; i++) {
if (orbs[i].x + orb[i].breadth > 0) {
orbsToKeep.push(orbs[i]);
}
}

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

}

//ORB FUNCTIONS-----------------------------------------------------------------

//Orb & orb properties
function makeOrb(spawnPositionX, spawnPositionY) {

var orb = {x: spawnPositionX,
y: spawnPositionY,
scale: random(.25, 1),
speed: random(-.75, -.15),
angle: random(0, 360),
move: orbMove,
display: displayOrb}

return orb;
}

//Base orb drawing, capabable of scaling and rotation
function displayOrb() {

var orbSize = 216 * this.scale;
var px = this.x-(orbSize/2);
var py = this.y-(orbSize/2);

//center position 108, 108
//Inside pink shell rim
fill(216, 154, 196);
push();
translate(px, py);
rotate(this.angle);
beginShape();
vertex((53.8 * this.scale), (15.2 * this.scale));
bezierVertex((1.781 * this.scale), (45.703 * this.scale),
-(15.078 * this.scale), (112.01 * this.scale),
(15.42 * this.scale), (163.31 * this.scale));
bezierVertex((45.919 * this.scale), (214.601 * this.scale),
(112.226 * this.scale), (231.46 * this.scale),
(163.52 * this.scale), (200.96 * this.scale));
bezierVertex((214.817 * this.scale), (170.462 * this.scale),
(231.676 * this.scale), (104.155 * this.scale),
(201.18 * this.scale), (52.86 * this.scale));
bezierVertex((170.679 * this.scale), (1.564 * this.scale),
(104.372 * this.scale), -(15.295 * this.scale),
(53.8 * this.scale), (15.2 * this.scale));
endShape();

//Inside purple
fill(158, 90, 146);
beginShape();
vertex(134.1 * this.scale, 40.76 * this.scale);
bezierVertex(97.698 * this.scale, 46.405 * this.scale,
62.946 * this.scale, 83.298 * this.scale,
56.3  * this.scale, 126.13 * this.scale);
bezierVertex(49.074 * this.scale, 172.708 * this.scale,
77.436 * this.scale, 207.524 * this.scale,
119.85 * this.scale, 200.15 * this.scale);
bezierVertex(161.836 * this.scale, 192.853 * this.scale,
196.48 * this.scale, 147.78 * this.scale,
197.52 * this.scale, 103.01 * this.scale);
bezierVertex(198.488 * this.scale, 61.779 * this.scale,
170.188 * this.scale, 35.198 * this.scale,
134.1 * this.scale, 40.76 * this.scale);
endShape();

rectMode(CENTER);
fill(116, 55, 107);
push();
translate((83.78 * this.scale), (93.85 * this.scale));
rotate(30);
rect(0, 0, 35 * this.scale, 175 * this.scale);
pop();

push();
translate((108.09 * this.scale), (108.64 * this.scale));
rotate(30);
rect(0, 0, 6.5 * this.scale, 175 * this.scale);
pop();

//Large pink shell, counter-clockwise winding
fill(194, 112, 173);
beginShape();
vertex((53.8 * this.scale), (15.2 * this.scale));
bezierVertex((1.781 * this.scale), (45.703 * this.scale),
-(15.078 * this.scale), (112.01 * this.scale),
(15.42 * this.scale), (163.31 * this.scale));
bezierVertex((45.919 * this.scale), (214.601 * this.scale),
(112.226 * this.scale), (231.46 * this.scale),
(163.52 * this.scale), (200.96 * this.scale));
bezierVertex((214.817 * this.scale), (170.462 * this.scale),
(231.676 * this.scale), (104.155 * this.scale),
(201.18 * this.scale), (52.86 * this.scale));
bezierVertex((170.679 * this.scale), (1.564 * this.scale),
(104.372 * this.scale), -(15.295 * this.scale),
(53.8 * this.scale), (15.2 * this.scale));

//Ellipsoid cutout, clockwise winding
beginContour();
vertex((175.65 * this.scale), (50.62 * this.scale));
bezierVertex((209.531 * this.scale), (65.455 * this.scale),
(222.219 * this.scale), (111.235 * this.scale),
(203.99 * this.scale), (152.87 * this.scale));
bezierVertex((185.753 * this.scale), (194.502 * this.scale),
(143.504 * this.scale), (216.223 * this.scale),
(109.62 * this.scale), (201.38 * this.scale));
bezierVertex((75.736 * this.scale), (186.544 * this.scale),
(63.049 * this.scale), (140.764 * this.scale),
(81.28 * this.scale), (99.13 * this.scale));
bezierVertex((99.515 * this.scale), (57.497 * this.scale),
(141.764 * this.scale), (35.776 * this.scale),
(175.65 * this.scale), (50.62 * this.scale));
endContour();

endShape(CLOSE);

//Shine
fill(218, 179, 212);

push();
translate(  + (174.49 * this.scale),   + (117.35 * this.scale));
rotate(25);
ellipse(0, 0, 7 * this.scale, 30 * this.scale);
pop();

push();
translate(  + (172.35 * this.scale),   + (140.86 * this.scale));
rotate(25);
ellipse(0, 0, 4 * this.scale, 17 * this.scale);
pop();
pop();
}

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

var spawnChance = 0.005;
if (random(0, 1) < spawnChance) {
orbs.push(makeOrb(width*1.5, random(height)));
}
}

//CORD FUNCTIONS----------------------------------------------------------------

//Line properties
function makeCord() {
var cord = {x1: 0,
x2: width,
y1: randomGaussian(height*(2/3), 40),
y2: randomGaussian(height*(2/3), 40),
col: [218, 179, 212],
weight: 2,
display: drawCord}
return cord;
}

//Draws line
function drawCord() {
stroke(this.col);
strokeWeight(this.weight);
line(this.x1, this.y1, this.x2, this.y2);
noStroke();
}

//CLOUD FUNCTIONS---------------------------------------------------------------

//Cloud properties
function makeCloud() {
var cloud = {
x: width*1.5,
y: random(height),
h: random(3*4, 12*4),
w: random(40*4, 85*4),
move: cloudMove,
speed: random(-.5, -.1),
col: [255, 255, 255, 100],
display: drawCloud}
return cloud;
}

//Draws cloud
function drawCloud() {
noStroke();
fill(this.col);
ellipse(this.x, this.y, this.w, this.h);

//ellipse(this.x + this.w*1.3, this.y - this.h*.25, this.w*.33, this.h*.33);
}

//Cloud movement
function cloudMove() {
this.x += this.speed;
}

var spawnChance = 0.004;
if (random(0, 1) < spawnChance) {
clouds.push(makeCloud());
}
}

//LAND FUNCTIONS----------------------------------------------------------------

//Landscape properties
function makeLandscape(x, i) {
var noiseScale = 0.002;
var noiseVal = noise((x+i)*noiseScale);
var landline = {x: x,
y1: height - 50 - noiseVal*100,
y2: height,
col: green3,
weight: 1,
speed: -1,
move: panLand,
display: drawLandscape}
return landline;
}

//Draws individual lines for landscape
function drawLandscape() {

stroke(this.col);
strokeWeight(this.weight);
line(this.x, this.y1, this.x, this.y2);

}

//Moves landmass
function panLand() {
this.x += this.speed;
}
``````

I wound up running into more difficulty than usual with this assignment, although it was definitely an interesting process when it came to problem-solving. I kept the main components of the program fairly simple – objects with random properties moving across the page. However, I really wanted to try to figure out how the landscape in the Flags assignment work, and after a lot of trial and error made a variation of it using moving vertical lines to piece together that far-off hillside. While the main objects weren’t so difficult to implement, the landscape took up a sizable chunk of my time, but I’m still happy with the result, plus it forced me to really understand the order in which functions were performed, as well as the little nuances of arrays and objects.

Analog & Digital Sketches:

## Project 10, odh

``````//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 10

var buildings = [];
//Declares the X location of the Moon
var moonX = 430;

function setup() {
createCanvas(480, 240);
for (var i = 0; i < 8; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}

frameRate(10);
}

function draw() {
background(10, 10, 80);

//Moves the moon across the sky
//and resets when it exits the frame
moonX = moonX - 1;
if (moonX < -100) {
moonX = 530;
moonX = moonX - 1;
};

//Creates the moon
noStroke();
fill(250);
ellipse(moonX, 60, 100, 100);
fill(10, 10, 80)
ellipse(moonX+20, 50, 80, 80);
translate(0, 40);
noFill();

updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
}

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(){
// If a building has dropped off the left edge,
// remove it from the 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.007;
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(150);
stroke(0);
push();
translate(this.x, height - 40);
stroke(0);
for (var i = 0; i < this.nFloors; i++) {
fill(255, 255, 50);
rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
}
pop();
}

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

I chose to have a nighttime view of a city skyline. I have the moon behind the buildings moving across the sky until it resets and reappears on the on the opposite side of the canvas. Overall, I am not pleased with the product along with my lack of understanding to create a more interesting and developed product.

## BrandonHyun-Project-10

``````//Brandon Hyun
//bhyun1@andrew.cmu.edu
//15104 Section B
//Project 10

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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

}

function draw() {
moon();
drawMountains1();
drawMountains2();
drawMountains3();
drawMountains4();

}

function drawMountains1(){
//noStroke();
fill(118,54,38,20);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
var y = map(noise(t), 0,1, 0, height);
vertex(x, y-15);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function drawMountains2(){

fill(225,54,38,30);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
var y = map(noise(t), 0,1, 0, height*1.2);
vertex(x, y-15);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function drawMountains3(){

fill(245,54,38,30);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
var y = map(noise(t), 0,1, 0, height*1.35);
vertex(x, y-15);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function drawMountains4(){

fill(255,54,38,30);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed*0.5);
var y = map(noise(t), 0,1, 0, height*1.6);
vertex(x, y-15);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function moon(){
fill(105,105,105);
ellipse(width/2,height/3,200,200);
}
``````

I wanted to create an abstract landscape that creates continuous landscape and the contour lines create this 3-dimensional space. In order to create this feel, I increased the opaqueness of each mountain ranges and It has a surreal feel to it.

``````//Robert Managad
//Section E
//Project-10

var mountain = [];
"https://i.imgur.com/U4n2NMc.png",
"https://i.imgur.com/OwkMkiT.png"]
var mountainAssets = [];

var tree = [];
"https://i.imgur.com/4b5pxqM.png",
"https://i.imgur.com/1YjM5m7.png",
"https://i.imgur.com/7sXiAyN.png"]
var treeAssets = [];

//mountainloop
for (var i = 0; i < mountainLinks.length; i++) {
}
for (var i = 0; i < treeLinks.length; i++) {
}
}

function setup() {
createCanvas(480, 240);
frameRate(60);
mountain[0] = mountainComponents(200);

tree[0] = treeComponents(150);

}

function draw() {
background(255);

//actual background
stroke(0);
fill(51, 46, 42);
rect(0,0, width, height);

//draw mountains
newMountains();
randomizeMountains();

//draws hills in the background
drawHills();

//drawing the ground
noStroke();
fill(238);
rect(0, 170, width, 70);

//setting mountains in an initial location.

//draws bushes
newTrees();
randomizeTrees();

}

/////////////////////////////////

function drawHills(){ //midground hills for introduction of color.
var terrainSpeed = 0.0006;
var terrainDetail = 0.005;

push();
beginShape();
noStroke();
fill(186, 219, 217);
vertex(0, 300);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, 0, height)
vertex(x, y - 10);

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

///////////////////// TREES

function newTrees() {
//keeps the trees moving along the x-axis
for (var i = 0; i < tree.length; i++) {
tree[i].tMove();
tree[i].tPlace();
}
}

function treePlace() { //draws the trees
image(treeAssets[this.nFloor], this.x, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
image(treeAssets[this.nFloor], this.x+300, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
fill(255);
}

function treeMove() {
this.x -= this.speed
}

function randomizeTrees() {
var chance = 0.002 //places in more trees into the array.
if (random(0, 1) < chance) {
tree.push(treeComponents(width));
}
}

function treeComponents(originX) {
var treeComponents = {
x: originX,
y: random(135, 140),
cwidth: random(30, 50),
cheight: random(30, 50),
speed: 1,
nFloor: floor(random(0,3)),
tMove: treeMove,
tPlace: treePlace
}
return treeComponents;
}

///////////// MOUNTAINS

function newMountains() {
//keeps the mountains moving along the x-axis
for (var i = 0; i < mountain.length; i++) {
mountain[i].mMove();
mountain[i].mPlace();
}
}

function mountainPlace() { //draws the mountains
image(mountainAssets[this.nFloors], this.xx -100, this.yy-130, mountainAssets[this.nFloors].width/10, mountainAssets[this.nFloors].height/10);
fill(255);
}

function mountainMove() {
this.xx -= this.speedy
}

function randomizeMountains() {
var chance = 0.002 //places in more mountains into the array.
if (random(0, 1) < chance) {
mountain.push(mountainComponents(width));
}
}

function mountainComponents(originXX) {
var mountainComponents = {
xx: originXX,
yy: random(130, 140),
speedy: 0.5,
nFloors: floor(random(0,1)),
mMove: mountainMove,
mPlace: mountainPlace
}
return mountainComponents;
}``````

I took inspiration for this landscape by a project I was working on in Illustrator. With that being said, many of the assets were created first in Illustrator and loaded into my program. I had the most challenge with debugging this code and scaling images correctly — minor issues kept me from moving forward with actually drawing the program out.

## jiaxinw-project 10-Landscape

``````//var smoke = {x:120, y:365, w:35, h:20, d:0.5, a:150}
var dishes=[];
var smokes=[];
var eyelx=220;
var eyerx=260;
"https://i.imgur.com/dMoEprH.png",
"https://i.imgur.com/69T53Rk.png",
"https://i.imgur.com/LQ3xxUA.png",
"https://i.imgur.com/x19Rvvq.png",
"https://i.imgur.com/d7psp9U.png"]
var sushi = [];

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

function setup() {
createCanvas(480,480);
for (var i = 0; i < 4; i++) {
dishes[i]=makeDish(-90+i*130);
}

for(var j = 0; j<3; j++){
smokes[j]= makeSmoke(120);
}
}

function draw() {
background(165,199,199);

drawCurtain();

drawChef();

drawEye();

drawBody();

drawBelt()

drawTable();

drawPlate();

drawDishPile();

drawCup();

//smoke
updateAndDisplaySmokes();
removeSmoke();

//dishes on the belt
updateAndDisplayDishes();
removeDish();

}

function drawCurtain(){
noStroke();
fill(82,106,121)
rect(0,0,width/2-5,90);
rect(width/2+5,0,width/2-5,90)
stroke(106,137,156);
strokeWeight(5);
rect(-15,-15,width/2-5,90);
rect(width/2+20,-15,width/2-5,90)
}

function drawChef(){
push();
noStroke();
rectMode(CENTER);
//hat
fill(129,153,160)
rect(width/2,120,100,30)
//face and neck
fill(235,216,190);
rect(width/2,170,100,70);
rect(width/2,210,50,20);
}

function drawEye(){
push();
fill(37)
ellipseMode(CENTER);
ellipse(eyelx,165,12,7)
ellipse(eyerx,165,12,7)
eyelx += 0.2;
eyerx += 0.2;
if(eyelx>=width/2-5){
eyelx = 205;
eyerx = 245;
}
pop();
}

function drawBody(){
//body
fill(152,178,186);
rect(width/2,300,130,160);
//collar
fill(129,151,158);
triangle(width/2-45,220,width/2+45,220,width/2,280);
fill(212,232,238);
triangle(width/2-30,220,width/2+30,220,width/2,260);
//arms
fill(129,153,160);
fill(235,216,190);
rect(width/2-77,345,24,70)
rect(width/2+77,345,24,70)
pop();
}

function drawBelt(){
noStroke();
fill(152,151,151)
rect(0,350,width,height/3)
fill(133);
rect(0,360,width,5);
fill(183);
rect(0,330,width,30)
}

function drawTable(){
fill(101,92,85);
rect(0,440,width,40);
}

function drawPlate(){
push();
rectMode(CENTER);
fill(222,207,175);
rect(width/2,420,130,15);
rect(width/2-30,428,20,23);
rect(width/2+30,428,20,23);
pop();
}

function drawDishPile(){
fill(240);
rect(width/2+110,389,90,7)
rect(width/2+110,406,90,7)
rect(width/2+110,423,90,7)
fill(218);
rect(width/2+125,396,60,10)
rect(width/2+125,413,60,10)
rect(width/2+125,430,60,10)
}

function drawCup(){
push();
fill(105,108,91);
rect(width/2-155,380,45,60,5)
pop();
}

function drawSmoke(){
fill(255,this.a)
ellipse(this.x,this.y,this.w,this.h);
}

function moveSmoke(){
this.x += this.d;
this.y -= this.d;
}

function scaleSmoke(){
this.w -= 0.2;
this.h -= 0.2;
}

function alphaSmoke(){
this.a -= 2;
}

function makeSmoke(birthLocationX) {
var smoke = {x:birthLocationX,
y:365,
w:35,
h:20,
d:0.3,
a:150,
move:moveSmoke,
scale:scaleSmoke,
alpha:alphaSmoke,
drawS:drawSmoke}
return smoke;
}

function updateAndDisplaySmokes(){
// Update the smoke position, scale, alpha
for (var i = 0; i < smokes.length; i++){
smokes[i].move();
smokes[i].scale();
smokes[i].alpha();
smokes[i].drawS();
}
}

function removeSmoke(){
var smokesToKeep = [];
for (var i = 0; i < smokes.length; i++){
if (smokes[i].a > 0) {
smokesToKeep.push(smokes[i]);
}
}
smokes = smokesToKeep;
}

if(frameCount%45==0){
smokes.push(makeSmoke(120))
};
}

function makeDish(dishX) {
var dish = {x:dishX,
speed:1,
move:moveDish,
display:displayDish,
type:1}
return dish;
}

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

function removeDish(){
var dishesToKeep = [];
for (var i = 0; i < dishes.length; i++){
if (dishes[i].x < 480) {
dishesToKeep.push(dishes[i]);
}
}
dishes = dishesToKeep;
}

if(frameCount%120==0){
var newDish = makeDish(-90);
newDish.type = random([0,1,2,3,4]);
dishes.push(newDish)
}
}

//create dish and sushi
function displayDish(x,type){
push();
translate(this.x,314);
fill(240);
rect(0,0,90,7)
fill(218);
rect(15,7,60,10);
pop();
drawSushi(x + 45, type);
}

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

function drawSushi(x, type){
imageMode(CENTER)
image(sushi[type], x, 302);

}

``````

This project, I thought about making a sushi conveyable belt. I thought about making different dishes of sushi moving on the screen and the different sushi need to appear randomly. Therefore, at first, I drew out the scene of a sushi restaurant, where we could see a plate, a cup of tea and some empty dishes on the table. Above the table, there was the conveyable belt with sushi. Behind the belt, there was a sushi chef who kept looking at the sushi. The final result is fun! I liked how I could translate my sketch into a moving webpage 🙂