## Han Yu Project 10 Landscape

``````// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 10 Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.01;
var terrainD1 = 0.0005;
var terrainS1 = 0.0002;

var fish1 = "https://i.imgur.com/pw06Fwc.png";
var fish = [];
var fishy1;

}

function setup() {
createCanvas(480, 300);
//create an initial collection of fish
for (var i=0; i<10; i++) {
var rx = random(width*5);
fish[i] = makeFish(rx);
}

frameRate(10);
}

function draw() {
background(255);
//sun
noStroke();
fill(252,163,41);
ellipse(80, 60, 70, 70);

//mountain
noFill(0);
stroke(135,120,108)
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t),0,1,20,height)-height/4;

vertex(x, height);
vertex(x, y);
}
endShape();
fill(135,120,108,100);
noStroke();

//water-top
beginShape();

stroke(119,209,249,150);
for (var x1 = 0; x1 < width; x1++) {
var t1 = (x1 * terrainD1) + (millis() * terrainS1);
var y1 = map(noise(t1),0,1,20,height);
vertex(x1, height);
vertex(x1,y1);
}
endShape();

//water-bottom
beginShape();

stroke(119,209,259);
for (var x1 = 0; x1 < width; x1++) {
var t1 = (x1 * terrainD1) + (millis() * terrainS1);
var y1 = map(noise(t1),0,1,28,height);
vertex(x1, height);
vertex(x1,y1);
}
endShape();

//fish
push();
translate(0.1 * width, 0.1 * height);
scale(0.8);

scale(0.2,0.2);

updateAndDisplayFish();

}

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

var newFishLikelihood = 0.05;
if (random(1) < newFishLikelihood) {
fish.push(makeFish(-300));
}
}

function fishMove() {
this.x += this.speed*(1/this.size);
}

function fishDisplay() {
push();
scale(this.size, this.size);
translate(this.x*(1/this.size), this.y*(1/this.size));

image(fishy1,0,0);
pop();
}

function makeFish(birthLocationX) {

var fishy = {x: birthLocationX,
size: random(0.3, 0.6),
y: random(0.8*height*(1/0.2), height*(1/0.2)),
speed: random(1,5),
move: fishMove,
display: fishDisplay};
return fishy;
}
``````

I started out thinking to do a project on natural landscape with mountain, water and grassland. But as I dived into the project, I found the overall scene rather dull and lifeless so I decided to focus on the underwater scene with fish instead.

## Yingyang Zhou-Project-10-Landscape

``````//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//project 10
//section A

var pikachu;
var pikachuSpeed = 0.0005;
var clouds = [];

}

function setup(){
createCanvas(360, 480);
for(var i = 0; i < 10; i++){
var cloudX = random(width);
clouds[i] = makeCloud(cloudX);
}
frameRate(10);
}

function draw(){
background(238, 168, 180);

updateAndDisplayClouds();
removeCloudsSlippedOut();

airfoil();
windowFrame();

}
function airfoil(){
//airfoil
noStroke();
fill(200, 92, 27);
triangle(240, 250, 250, 210, 280, 270);
fill(230, 92, 27);
triangle(360, 400, 240, 250, 360, 300);
}

function windowFrame(){
rectMode(CENTER);
noFill();
stroke(70);
strokeWeight(70);
rect(width/2, height/2, width+20, height+20,120);
stroke(100);
strokeWeight(30);
rect(width/2, height/2, width-30, height-30, 130);
}

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

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

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

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

function cloudsDisplay(){
//moutain
var terrainSpeed = 0.00125;
var terrainDetail = 0.01;
stroke(45, 100, 40, 90);
beginShape();
for (var l = 0; l < width; l++) {
var v = (l * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(v), 0,1, 110, height - 50);
line(l,y+200,l,height+200);
}
//cloud
fill(0, 0, 222, 45);
noStroke();
push();
translate(this.x, height);
ellipse(80, -30, 100, 30);
ellipse(15, -80, 100, 50);
ellipse(0, -200, 240, 30);
ellipse(20, -300, 200,10);
ellipse(50, -240, 100, 40);
ellipse(0, -220, 300, 50);
ellipse(500, -30, 100, 30);
ellipse(200, -80, 100, 50);
ellipse(100, -200, 240, 30);
ellipse(200, -300, 200,10);
ellipse(500, -240, 100, 40);
ellipse(800, -220, 300, 50);
image(pikachu, 30, -height/2+random(-2,2), pikachu.width/10, pikachu.height/10);
pop();
endShape();
}

function makeCloud(birthLocationX){
var cloud = {x: birthLocationX,
size:round(random(30, 240)),
speed: -5.0,
move:cloudsMove,
display:cloudsDisplay}
return cloud;
}
``````

My original idea is to make a sunrise and sunset scene and I changed my mind later thinking that it might be an interesting idea to engaged with some image elements so I picked a pikachu to be flying outside my airplane cabin.

## Jessica Timczyk – Project 10 Landscape

``````// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-10-Landscape

var cacti = [];
var cactusClip;
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var tumbleweed = [];

}

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

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

}

function draw() {

background(212, 248, 251);

////////// Mountains //////////
stroke(129, 161, 164);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 0, height);
line(x, y, x, height);
}
endShape();

/////// sun beam ////////

beginShape();
for (var x = 0; x < width; x++) {
fill(221, 204, 112);
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 0, height);
vertex(x, y);
}
endShape();
noFill();

rect(0, 0, width - 1, height - 1);

//// cactus //////

displayHorizon();

updateAndDisplayCacti();
removeCactiThatHaveSlippedOutOfView();

//// tumble weed ///////
for (var k = 0; k < tumbleweed.length; k++){
tumbleweed[k].draw();
tumbleweed[k].move();
}

}

function updateAndDisplayCacti(){
// Update the cacti positions and display them
for (var i = 0; i < cacti.length; i++){
cacti[i].move();
cacti[i].display();
}
}

function removeCactiThatHaveSlippedOutOfView(){
var cactiToKeep = [];
for (var i = 0; i < cacti.length; i++){
if (cacti[i].x + cacti[i].breadth > 0) {
cactiToKeep.push(cacti[i]);
}
}
cacti = cactiToKeep; // remember the cacti that stay
}

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

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

// draw the cactus
function cactusDisplay() {
var cHeight = this.cactusHeight;
fill(255);
stroke(0);
push();
translate(this.x, height - this.cactusPlacement);
image(cactusClip, 0, -cHeight);
pop();
}

function makeCactus(birthLocationX) { // cactus object
var cct = {x: birthLocationX,
speed: -3.0,
cactusHeight: round(random(0, 175)),
move: cactusMove,
cactusPlacement: round(random(0,70)),
display: cactusDisplay}
return cct;
}

function makeTumbleWeed() { // random colors
var tbwd = {x: width,
y: -height + 100,
move: moveTumbleWeed,
draw: drawTumbleWeed,
color: [random(50, 180), random(50, 165), random(20, 55)],
}
return tbwd;
}

// draw tumbleweed
function drawTumbleWeed(){
stroke(this.color);
strokeWeight(4);
noFill();
ellipse(this.x, height - this.y - 60, 30, 30,);
ellipse(this.x + 5, height - this.y - 62, 20, 20);
ellipse(this.x + 2, height - this.y - 57, 5, 5);
ellipse(this.x - 4, height - this.y - 61, 15, 15);
ellipse(this.x -1, height - this.y - 60, 20, 20);
}

function moveTumbleWeed(){ //tumble weed moves more quickle than cacti
this.x -= 10;
this.y = random(10);
}

// tumble weeds are alot less likely than cacti
var newTumbleWeedLikelihood = 0.007;
if (random(0,1) < newTumbleWeedLikelihood) {
tumbleweed.push(makeTumbleWeed(width));
}
}

function displayHorizon(){
stroke(162, 126, 78);
fill(201, 160, 106);
rect(0, height - 75, width, height - 75);
}

``````

I enjoyed doing this project because it allowed me to make my own landscape, where as in the past we have always been given a template for them. I struggled a bit to enter in new moving objects, and took me awhile to understand all the commands and what each function was doing. Some things, like the sunlight beam, happened by accident because I was messing with different variables but I’m very happy with how it turned out. If I were to do this again I would probably want to add more details to the sky, or figure out how to make more complicated generated landscapes besides the mountain like line that we were offered with. Overall I’m happy with how it came out.

## Xindi Lyu-Project 10- Landscape-Section A

sketch
For this project I tried to create a sense of distance between the mountains by assigning them gradient colors and giving them different speeds and details. Also I incorporated the hot air balloons I made in this drawings and made them gradually move downwards as well as moving left.

``````
/*
Project 10
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var tspeed1=0.0001;
var tdetail1=0.005;
var tspeed2=0.00006;
var tdetail2=0.01;
var tspeed3=0.00004;
var tdetail3=0.05;
var ballons= [];

function setup(){
createCanvas(500,600);
frameRate(10);
for(var i=0; i<10; i++){
var rx = random(width);
var ry = random(0,height/2)
ballons[i]=makeBallons(rx,ry);
}

}

function draw(){

background(250,237,229);
for(var u=0; u<height;u++){
stroke(250+0.05*u,237+0.05*u,229+0.05*u);
line(0,u,width,u );

}
//the far away mountains
push();
fill(212,179,160);
beginShape();
noStroke();
for(k=0;k<width;k++){
var t=(tdetail3*k)+(millis()*tspeed3);
var h=map(noise(t),0,2.5,0,height/0.53);
vertex(k,h);
}

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

//the mountains in the midle
push();
fill(197,158,141);
beginShape();
noStroke();
for(a=0;a<width;a++){
var c=(tdetail2*a)+(millis()*tspeed2);
var b=map(noise(c),0,1.8,0,height/0.4);
vertex(a,b);
}

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

//the close mountains

push();
fill(173,146,135);
beginShape();
noStroke();
for(x=0;x<width;x++){
var t=(tdetail1*x)+(millis()*tspeed1);
var y=map(noise(t),0,1,height/2,height);
vertex(x,y);
}

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

updateAndDisplayballons();
removeballons();

}

function updateAndDisplayballons(){
for(i=0;i<ballons.length;i++){
ballons[i].move();
ballons[i].display();

}
}

function removeballons(){
var ballonsToKeep=[];
for(i=0;i<ballons.length;i++){
if(ballons[i].x>0){
ballonsToKeep.push(ballons[i]);

}
}

}

var newBallonLikelihood = 0.025
if(random(0,1)<newBallonLikelihood){
ballons.push(makeBallons(width,random(0,height/2)))
}
}

function ballonsMove(){
this.x+=this.speed;
this.y+=this.speed*(-0.6);
}

function ballonsDisplay(){
translate(this.x,this.y);
//The strings
strokeWeight(0.7);
stroke(86,85,93);
line(5,25,5,30);
line(10,25,10,30);
line(15,25,15,30);

//The balloon
noStroke();
ellipse(10,10,20,20);
rect(5,30,10,8);
}

function makeBallons(birthLocationX,birthLocationY){
var ballons={x:birthLocationX, y:birthLocationY,
speed: random(-0.5,-0.6),
move:ballonsMove,
display:ballonsDisplay}

return ballons;

}

``````

## Project 10 Landscape- Sara Frankel

``````// Sara Frankel
// sfrankel
// Project 10
// Section A

var speed = 0.00025;
var detail = 0.001;
var sheeps = new Array(480);
var numNoDraw = 0;
var clouds = new Array(480);
var numNoDrawC = 0;
var cloudY = new Array(12);
var cloudCount2 = 0;
var sheepcolors = new Array(12);
var colorCount = 0;
var herderURL;
var sheepStatus;

}

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

function draw() {
background('lightblue');
//____________________________________________

if(sheeps[0]) {
shiftLeft(sheepcolors);//inserts random colors from array and shifts it over so that the value is not the same everytime
//(makes sure the x point of the object moves with the point)
colorCount--;
}
shiftLeft(sheeps);//
if(numNoDraw === 0) {
sheeps[479] = (random(0, 1) <= 0.05);//using a random 5% chance the sheep will be on the point
} else {
sheeps[479] = false;//there will be no sheep directly after
numNoDraw--;
}
if(sheeps[479]) {
sheepcolors[colorCount] = random(0, 255); //each sheep will have a different random grey scale color
if (colorCount === 11) {
} else {
colorCount++;
}
numNoDraw = 40;//there will be no sheeps every 40 pixels
}
//____________________________________________

if(clouds[0]) {
shiftLeft(cloudY); //shifts cloud to the left so that the object moves with the x point change
cloudCount2--;
}

shiftLeft(clouds);
clouds[479] = false;//shift left and ensures last is set to default value (false)
if(numNoDrawC === 0) {
clouds[479] = random(0,1) <= 0.01; //probility of if the cloud will be on the sreen in a specific point
} else {
numNoDrawC--;
}
if(clouds[479]) {
numNoDrawC = 40;
cloudY[cloudCount2] = random(150,250); //randomly positions clouds between y points 150-250
if(cloudCount2 === 12){ //there cannot be more than 12 clouds (each cloud must be spaced at least 40 pixels from the last)
} else {
cloudCount2++;//increases number of clouds
}
}

//______________________________________________

noFill();
beginShape();
var cloudCount = 0;
var sheepCount = 0;
for (var i = 0; i < width; i++) {
var j = (i * speed) + (millis() * speed);
var y = map(noise(j), 0, 1, height/2, height);//utilizes noise function
vertex(i, y);
stroke('green');
line(i, y, i, height);

if(sheeps[i]) {
sheep(i,y - 5, sheepcolors[sheepCount]);//places sheep on positions of the noise
sheepCount++; //increases sheep count
}

if(clouds[i]) {
cloud(i, y - cloudY[cloudCount]);//places clouds in position relative to noise
cloudCount++;//increase cloud count
}

image(herderURL, 350, y + 30, 60, 60);//puts sheep herder on screen
}
endShape();
}

//draws sheep at given x, y coordinate and given face color
function sheep(x, y, col) {
beginShape();
stroke(255);
fill(255);
ellipse(x, y, 10, 10);
ellipse(x + 5, y + 5, 10, 10);
ellipse(x + 10, y + 5, 10, 10);
ellipse(x + 15, y, 10, 10);
ellipse(x + 10, y - 5, 10, 10);
ellipse(x + 5, y - 5, 10, 10);
fill(col);
ellipse(x - 5, y, 10, 10);
fill(255);
endShape();
}

//draws clouds at given cx and cy
function cloud(cx, cy) {
beginShape();
stroke(255);
fill(255);
ellipse(cx, cy, 20, 20);
ellipse(cx + 10, cy + 9, 20, 20);
ellipse(cx + 20, cy + 9, 20, 20);
ellipse(cx + 30, cy, 20, 20);
ellipse(cx + 20, cy - 9, 20, 20);
ellipse(cx + 10, cy - 9, 20, 20);
endShape();
}

//uses for loop to help shift an array over so that you never reach the "end" of it
function shiftLeft(array){
for(var r = 0; r < array.length - 1; r++) {
try {
array[r] = array[r+1];
} catch(e) {
}
}
}``````

For my project, I decided that Shepard and their sheep was quite fitting. At first I was uncertain on how I will execute this project. I found that using an image for the Shepard and a cute little drawn image of the sheep would be quite fitting. Nothing would also be fluffier than white random clouds that go with it. Especially with the pain of this previous week, I felt that something calmer like “counting sheep” would be best.

^ Image of my original sketch

## Rjpark – Project 10 – Generative Landscape

``````var jellyfish = [];

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

// create an initial collection of jellyfish
for (var i = 0; i < 10; i++){
var rx = random(width);
var ry = random(height);
jellyfish[i] = makeJellyfish(rx, ry);
}

frameRate(30);
}

function draw() {
background("lightblue");

updateJellyfish();
removeJellyfish();
}

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

function removeJellyfish(){
var jellyfishToKeep = [];
for (var i = 0; i < jellyfish.length; i++){
if (jellyfish[i].y + jellyfish[i].size > 0) {
jellyfishToKeep.push(jellyfish[i]);
}
}
jellyfish = jellyfishToKeep; // surviving jellyfish
}

var newJellyfishLikelihood = 0.015;
if (random(0, 1) < newJellyfishLikelihood) {
jellyfish.push(makeJellyfish(random(width), height));
}
}

// update position of jellyfish every frame
function jellyfishMove() {
this.y += this.speed;
}

// draw jellyfish
function jellyfishDisplay() {
fill(this.rr, this.rg, this.rb);
noStroke();
arc(this.x, this.y, this.size, this.size, PI, 2 * PI, CHORD);
push();
translate(this.x, this.y);
noFill();
stroke(255);
strokeWeight(2);
bezier(0, 0, -20, 40, 20, 30, 0, 70);
bezier(-10, 0, -30, 40, 10, 30, -10, 70);
bezier(-20, 0, -40, 40, 0, 30, -20, 70);
bezier(10, 0, -10, 40, 30, 30, 10, 70);
bezier(20, 0, 0, 40, 40, 30, 20, 70);
pop();
}

function makeJellyfish(startingX, startingY) {
var jf = {x: startingX,
y: startingY,
rr: random(0, 200),
rg: random(0, 100),
rb: random(0, 255),
size: random(50, 100),
speed: -1.0,
move: jellyfishMove,
display: jellyfishDisplay}
return jf;
}
``````

When I read about this project, the first “landscape” I thought of was sea animals passing by in a submarine or in an aquarium. As a result, I wanted to create something to imitate the perspective of someone traveling under water, like being in a submarine. I chose to draw jellyfish and to view them from a bird’s eye view (imagine being in a submarine with glass on the floor/bottom). In addition, I chose to randomize the size and colors of the jellyfish. Here are a few sketches of how I decided on perspective/shape.

## Curran Zhang-Project 10- Landscape

``````/*Curran Zhang
curranz
Project 10
Section A
*/

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = [];
var star = [];
var frames = [];
var characterX;
var characterY;

function setup() {
createCanvas(480, 480);
//Iniate Clouds
for (var i = 0; i <5; i++) {
var r = random(width);
clouds[i] = makeClouds(r);
}
//Human Image Position
imageMode(CENTER);
frameRate(15);
}

var filenames = [];
filenames[0] = "http://i.imgur.com/svA3cqA.png";
filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
filenames[2] = "http://i.imgur.com/IgQDmRK.png";
filenames[3] = "http://i.imgur.com/kmVGuo9.png";
filenames[4] = "http://i.imgur.com/jcMNeGq.png";
filenames[5] = "http://i.imgur.com/ttJGwkt.png";
filenames[6] = "http://i.imgur.com/9tL5TRr.png";
filenames[7] = "http://i.imgur.com/IYn7mIB.png";
for (var i = 0; i < filenames.length; i++) {
}
}

function draw() {
var from = color('red');
var to = color(270);

makeMountain1();
makeMoon();
makeStar();
makeMountain1();
makeMountain2();
makeReflection();
updateClouds();
removeClouds();
makeHuman();
}

for (var i = y; i <= height; i++) {
var inter = map(i,y,y+w,0,1);
var col = lerpColor(from,to,inter);
stroke(col);
strokeWeight(2);
line(y,i,y+w,i);
}
}

function makeStar(){
fill(270);
for (var i = 0; i < 100; i++) {
var starX = random(width);
var starY = random(height);
ellipse(starX,starY,1,1);
}
}

function makeMountain1(){
noStroke();
fill(180,0,0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1.8, height/8, height);
vertex(x, y);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function makeMountain2(){
fill(139,0,0);
noStroke();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0,2, height/2, height);
vertex(x, y);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function makeReflection(){
fill(220,50,50);
rect(0, 375, width, 105);

fill(255,60,60);
noStroke();
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
var y = map(noise(t), 0,2, height, height*.5);
vertex(x, y);
}
vertex(width,height);
vertex(0,height);
endShape();
}

function makeMoon(){
noStroke();
fill(255,20);
ellipse(2*width/3,height/4,170,170);
ellipse(2*width/3,height/4,160,160);
ellipse(2*width/3,height/4,150,150);
ellipse(2*width/3,height/4,140,140);
fill(255,200);
ellipse(2*width/3,height/4,120,120);
}

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

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

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

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

function displayClouds(){
fill(255,50);
noStroke();
ellipse(this.x,this.y,this.width,this.height);
ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}

function makeClouds(cloudy){
var cloud= {x: cloudy,
y:random(100, height/2),
speed: random(-.2,-.7),
width: random(50,100),
height:random(20,0),
move:cloudMove,
display:displayClouds
}
return cloud;
}

function makeHuman(){
//Human 1
push();
translate(width/2+20,365);
scale(.2,.2);
image(frames[frameCount % 8], 0, 0);
pop();

push();
translate(width/2+20,385);
scale(.2,-.2);
tint(255,127);
image(frames[frameCount % 8], 0, 0);
pop();

//Human 2
push();
translate(width/2,367);
scale(.15,.15);
image(frames[frameCount % 8], 0, 0);
pop();

push();
translate(width/2,382);
scale(.15,-.15);
tint(255,127);
image(frames[frameCount % 8], 0, 0);
pop();

//Human 3
push();
translate(width/2-20,370);
scale(.1,.1);
image(frames[frameCount % 8], 0, 0);
pop();

push();
translate(width/2-20,379);
scale(.1,-.1);
tint(255,127);
image(frames[frameCount % 8], 0, 0);
pop();
}``````

Whenever I go around exploring and taking pictures, I really like to find reflections produced by waters. Therefore, I decided to do a project where water can be used to make the colors more vibrant. Creating mountains creates a very peaceful and relaxing scene, which is something I desperately want.

``````//Kade Stewart
//Section B
//Project-10

var planes = [];
//a variable that holds each of the colors that a plane could be
var pastels = [230, 245, 245, 255, 250, 205, 180, 236, 180];
var terrain1 = [];
var terrain2 = [];
var terrain3 = [];

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

//initialize a plane
planes[(planes.length)] = new Plane();

//add terrain that has random but connected altitudes
var y = height/4;
for (var i = 0; i < width; i++) {
terrain1.push(y += random(-1,1));
}

y = height/2;
for (var i = 0; i < width; i++) {
terrain2.push(y += random(-1,1));
}

y = height * (3/4);
for (var i = 0; i < width; i++) {
terrain3.push(y += random(-1,1));
}
}

function Plane() {
this.y = random(0, height);
this.x = width + 50;
this.speed = floor(random(-.01, -3));    //this is the speed that the plane actually goes back
this.path = [];    //this is where the path is stored for the plane
this.pathspeed = this.speed * 3;    //this is the speed that the path is made
this.c = floor(random(1,4));    //this is where the color is determined

//this is function that draws both the plane and the path
this.draw = function() {
stroke(0);
strokeWeight(1);
fill(pastels[this.c], pastels[this.c + 1], pastels[this.c + 2]);

triangle(this.x - (6 * -this.pathspeed/2), this.y - 9 * -this.pathspeed/2,
this.x + 18 * -this.pathspeed/2, this.y,
this.x, this.y);

//draw the path
if (this.path.length > 2) {
for (var i = 1; i < this.path.length; i++) {
stroke(125);
strokeWeight(1);
noFill();
line(this.x + (this.pathspeed * (i-1)), this.path[this.path.length - i - 1],
this.x + (this.pathspeed * (i)), this.path[this.path.length - i]);
}
}
}
}

function updatePlanes(index) {
planes[index].x += planes[index].speed;
planes[index].y += random(-1, 1);

//if the plane is past the window, delete it
if (planes[index].x - (18 * planes[index].pathspeed/2) < 0) {
planes.splice(index, 1);
}
}

function updatePath(index) {
var p = planes[index];

//add the planes current position to the path to trace where it's been
p.path.push(p.y);

//if the path is longer than the window, delete what's outside of the window
if (p.path.length * p.pathspeed > width) {
p.path.splice(0, 1);
}
}

function randomlyMakePlane(odds) {
//this is the randomizer that decided whether the plane is made or not
var newPlaneMaybe = random(-odds + 1, 1);
if (newPlaneMaybe > 0) {
planes[(planes.length)] = new Plane();
}
}

//draw 3 different tiers of background, to give a sense of depth
function drawTerrain() {
for (var j = 0; j < width; j++) {
stroke(255, 241, 245);
strokeWeight(5);
noFill();
line(j, terrain1[j], j, height);
}
for (var j = 0; j < width; j++) {
stroke(255, 235, 239);
strokeWeight(5);
noFill();
line(j, terrain2[j], j, height);
}
for (var j = 0; j < width; j++) {
stroke(255, 209, 220);
strokeWeight(5);
noFill();
line(j, terrain3[j], j, height);
}
}

function updateTerrain() {
terrain1.splice(0, 1);
terrain1.push(terrain1[terrain1.length-1] + random(-1, 1));
terrain2.splice(0, 1);
terrain2.push(terrain2[terrain2.length-1] + random(-1, 1));
terrain3.splice(0, 1);
terrain3.push(terrain3[terrain3.length-1] + random(-1, 1));
}

function draw() {
background(255, 250, 253);

//this is where the terrain is drawn and then generated
drawTerrain();
updateTerrain();

for (var i = 0; i < planes.length; i++) {
var p = planes[i];

//draw the planes
planes[i].draw();

//update its path
updatePath(i);

//update its x and y position, and delete it if it's too far off the screen
updatePlanes(i);
}

//**60** to 1 odds that there is a new plane made (about 1 every second)
randomlyMakePlane(60);

}``````

I wanted to make a generative landscape that wasn’t just actual land, or even anything that was extremely natural, but something more artificial. I came up with paper airplanes, which ended up being an interesting challenge. I randomly generated airplanes that were large and fast to look closer to the viewer (who’s reference frame was moving forward) or small and slow to seem farther away. The background, varying pink levels, also moves to increase the viewer’s sense that they’re moving as well. Overall, I think I achieved my goal of giving the viewer a sense of wonderment.

## Jonathan Liang – Project 10 – Generative Landscape

``````//Jonathan Liang
//jliang2
//section A

var buildings = [];
var lamppost = [];
var tDetail = 0.01;
var tSpeed = 0.0004;
var frames = []; // An array to store the images
var x = 0; //variable to draw image from array
var rexX;  // The X location of the character
var rexY;  // The Y location of the character
var exampleImgOnly;

var filenames = [];
filenames[0] = "https://i.imgur.com/pUQqpVN.png";
filenames[1] = "https://i.imgur.com/075wwQz.png";
filenames[2] = "https://i.imgur.com/8aFEl6F.png";

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

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

//initial buildings
for (var i = 0; i < 11; i++) {
var ranx = random(width);
buildings[i] = makeBuilding(ranx);
}
rexX = 150;
rexY = 215;
frameRate(10);

}

function draw() {
background(255);
//generate line paper
for(var y = 0; y < height; y += 10) {
stroke(200);
noFill();
line(0, y, width, y);
}
displayHorizon();
makeMountain();

//draw objects
//buildings
updateAndDisplayBuildings();
removeBuildings();
//trex
image(frames[x], rexX, rexY, 150, 150);
x += 1;
if (x > 2) {
x = 0;
}

}

function makeMountain() {
//generates terrain
stroke(0);
strokeWeight(2);
noFill();
beginShape();
for (var x1 = 0; x1 < width; x1++) {
var t1 = (x1 * tDetail) + (millis() * tSpeed);
var y1 = map(noise(t1), 0, 1, 0, height);
vertex(x1, y1 - 20);
}
vertex(width, height);
vertex(0, height);
endShape();
}

function updateAndDisplayBuildings() {
//update and display building position
for (var i = 0; i < buildings.length; i++) {
buildings[i].move();
buildings[i].display();
}
}

function removeBuildings() {
//remove buildings that have gone out of view
var keepBuildings = [];
for (var i = 0; i < buildings.length; i++) {
if (buildings[i].x + buildings[i].breadth > 0) {
keepBuildings.push(buildings[i]);
}
}
buildings = keepBuildings //remember remaining buildings
}

//with very little probability, add new building
var newBuildingLikelihood = 0.02;
if (random(0, 1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}

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

//drawing building and windows
function buildingDisplay() {
//building
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
noFill();
strokeWeight(2);
stroke(0);
push();
translate(this.x, height - 50);
//windows
var wGap = this.breadth / 16;
var xW = this.breadth / 16;
for (var w = 0; w < 5; w++) {
for (var i = 0; i < this.nFloors; i++) {
fill('yellow');
strokeWeight(1);
stroke(0);
rect(xW, -15 - (i * floorHeight), wGap * 2, 10);
}
xW += wGap * 3;
}
pop();
}

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

//draw the ground
function displayHorizon() {
stroke(0);
strokeWeight(4);
noFill();
line(0, height - 50, width, height - 50);
}
``````

It all starts with an idea, but you can never tell where an idea can end up. Because ideas spread, they change, they grow, they connect us with the world. And in a fast-moving world, where good news moves at the speed of time and bad news isn’t always what is seems. Because when push comes to shove, we all deserve a second chance, to score.

My project is heavily based on doodles I used to do throughout my elementary to high school days. I used to like to draw mountains, buildings, tanks, aliens, and dinosaurs blowing up stuff. I chose to add lines to the background to reflect that lined paper quality and made everything noFill to show that it was just a pen doodle.

## Julie Choi – Project 10 – Landscape

``````/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-10
*/
var skyscrapers = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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

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

function draw() {
background(200);
buildMountains();
removeSkyscrapers();
randomSkyscrapers();

}

// build mountains on the background to show nature
function buildMountains(){
push();
beginShape();
fill(67, 67, 22);
vertex(0,height);
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);
}
vertex(width, height);
endShape();
pop();
}

//build rod on the bottom to create depth in composition
fill(25, 51, 76);
rect(0, 4 * height/5 + 15, width, 80);
}

//as skyscrapers disappear on the left, create new skyscrapers from the right
for (var i = 0; i < skyscrapers.length; i++){
skyscrapers[i].move();
skyscrapers[i].display();
}
}

//When skyscrapers hit the edge of canvas, make them disappear
function removeSkyscrapers(){
var buildingsToKeep = [];
for (var i = 0; i < skyscrapers.length; i++){
if (skyscrapers[i].x + skyscrapers[i].breadth > 0) {
buildingsToKeep.push(skyscrapers[i]);
}
}
skyscrapers = buildingsToKeep;
}

// add probability to update the numbers of skyscrapers to the end
function randomSkyscrapers() {
var newBuildingLikelihood = 0.3;
if (random(0,1) < newBuildingLikelihood) {
skyscrapers.push(makeSkyscrapers(width));
}
}

// print skyscrapers for every changing frame
function moveSkyscrapers() {
this.x += this.speed * 2;
}

// draw skyscrapers with bright colored windows
function displaySkyscrapers() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
stroke(0);
push();
translate(this.x, height - 40);
fill(random(0,255), random(0,255), random(0,255));
stroke(200);
for (var i = 0; i < this.nFloors; i++) {
rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
}
pop();
}

function makeSkyscrapers(birthLocationX) {
var windows = {x: birthLocationX,