## Sophie Chen – Project 10 – Landscape

``````// Sophie Chen
// Section C
// sophiec@andrew.cmu.edu
// generative landscape

var terrainSpeed = 0.0004;
var terrainDetail = 0.005;
var clouds = [];

function setup() {
createCanvas(480, 250);
// create an initial clouds
for (var i = 0; i < 10; i++){
var rx = random(width);
clouds[i] = makeClouds(rx);
}

}

function draw() {
background(150, 200, 200, 10);
sun();
terrain();
terrain2();
terrain3();
terrain4();
terrain5();

updateClouds();
removeClouds();

}

function sun(){
noStroke();
fill(255, 160, 110);
ellipse(350, 230, 220, 220);

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

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

// half half probability of new cloud
var newCloudLikelihood = 0.005;
if (random(0,1) < newCloudLikelihood) {
clouds.push(makeClouds(width));
}
}

// move cloud positions
function cloudMove() {
this.x += this.speed;
}

// draw clouds
function cloudDisplay() {
var bHeight = this.x;
fill(255, 255, 255);
noStroke();
push();
translate(this.x, this.y);
ellipse(0, 0, this.diam, this.diam);
ellipse(0 - 20, 0 + 5, this.diam / 1.3, this.diam / 1.3);
ellipse(0 + 15, 0, this.diam, this.diam);

pop();
}

function makeClouds(birthLocationX) {
var cloud = {x: birthLocationX,
y: random(0, height / 2),
diam: random(30, 60),
speed: -1.0,
move: cloudMove,
display: cloudDisplay}
return cloud;
}

// noise terrains

function terrain(){
noFill();
stroke(0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t - 0.05), 0, 1, 0, height);
vertex(x, y);
}
endShape();
}

function terrain2(){
noFill();
stroke(0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t - 0.1), 0, 1, 0, height);
vertex(x, y + 5);
}
endShape();
}

function terrain3(){
noFill();
stroke(0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t - 0.15), 0, 1, 0, height);
vertex(x, y + 10);
}
endShape();
}

function terrain4(){
noFill();
stroke(0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t - 0.2), 0, 1, 0, height);
vertex(x, y + 15);
}
endShape();
}

function terrain5(){
noFill();
stroke(0);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t - .25), 0, 1, 0, height);
vertex(x, y + 20);
}
endShape();
}``````

I’m glad that I got to play more with noise in this project. I tried to create a mix of 2d and 3d to create more contrast and depth since everything is going in the same direction. My favorite part is the interaction between the terrain and the sun, overall I think it turned out better than I expected.

## Kyle Leve-Project-10-Landscape

``````// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-10-Landscape

var img1;
var img2;
var snowman = [];
var terSpeed1 = 0.0002;
var terDetail1 = 0.01;
var terSpeed2 = 0.00025;
var terDetail2 = 0.005;
var terSpeed3 = 0.0003;
var terDetail3 = 0.0001;

// Loads ski guy and snowman images
}

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

function draw() {
background('indigo');

// Dark blue mountains
fill(0, 20, 70);
beginShape();
vertex(0, height);
for (var x = 0; x < width; x++) {
var z = (x * terDetail1) + (millis() * terSpeed1);
var y = map(noise(z), 0, 1, 0, height/3);
vertex(x, y);
}
vertex(width, height);
endShape();

// Lighter blue mountains
fill(0, 20, 120);
beginShape();
vertex(0, height);
for (t = 0; t < width; t++) {
var s = (t * terDetail2) + (millis() * terSpeed2);
var r = map(noise(s), 0, 1, 0, height - 100);
vertex(t, r);
}
vertex(width, height);
endShape();

// Snow hill
fill(255);
beginShape();
vertex(0, height);
for (a = 0; a < width; a++) {
var b = (a * terDetail3) + (millis() * terSpeed3);
var c = map(noise(b), 0, 0.75, 0, height - 70);
vertex(a, c);
}
vertex(width, height);
endShape();

// Ski guy image
noStroke();
image(img1, 20, c + 40, 70, 70);

displaySnowman();
removeSnowman();
newSnowman();
}

// To show the snowman
function displaySnowman() {
for (var i = 0; i < snowman.length; i++){
snowman[i].move();
snowman[i].display();
}
}

// Removes any snowmen that go off the screen
function removeSnowman() {
var keepSnowman = [];
for (var i = 0; i < snowman.length; i++){
if (snowman[i].x + snowman[i].breadth > 0) {
keepSnowman.push(snowman[i]);
}
}
snowman = keepSnowman;
}

// Creates snowmen
function newSnowman() {
var snowmanChance = 0.0005;
if (random(0.1) < snowmanChance) {
snowman.push(makeSnowman(width));
}
}

// Moves snowmen
function snowmanMove() {
this.x += this.speed;
}

// Calls the snowman image
function snowmanDisplay() {
var b = (a * terDetail3) + (millis() * terSpeed3);
var c = map(noise(b), 0, 0.75, 0, height - 70);
noStroke();
push();
translate(this.x, height - 100);
image(img2, 10, 0, 70, 100);
pop();
}

// Sets the location of the snowman and moves it across the screen
function makeSnowman(LocationX) {
var snow = {x: LocationX,
speed: -20.0,
move: snowmanMove,
display: snowmanDisplay}
return snow;
}
``````

I found this project to be very fun because it allowed me to create a scene even if it just repeated itself. I decided to create a winter scene with a guy skiing and some snowmen. I used the snowmen as an object that would randomly generate itself as the scene continued.

## Jenna Kim (Jeeyoon Kim) – Project 10 – Landscape

``````/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 10
*/

var hillSpeed = 0.00055;
var hillDetail = 0.0055;
var yN = 50;
var trees = [];

var x = [];
var y = [];

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

for (i = 0; i < 100; i++){ //setting for stars placement
x[i] = random(50, width);
y[i] = random(50, width / 2);
}
//trees
for (var j = 0; j < 15; j++){
var rx = random(width);
trees[j] = makeTree(rx);
}
frameRate(10);
}

function draw(){
background(24, 44, 63);
var S = second();
for(i = 0; i < S; i++){ //tiny firefly appears every "SEC"
fill(255);
noStroke();
ellipse(x[i], y[i], 3, 3);
}
hill();
wave();
updateAndDisplayTrees();
noStroke();
ellipse(width-55, 40, 45, 45); //pink moon
}

function star() {
for(i = 0; i < S; i++){ //star appears every "SEC"
fill(247, 246, 146);
noStroke();
ellipse(x[i], y[i], 4, 4);
}
}
//drawing hill
function hill() {
stroke(49, 110, 167);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * hillDetail) + (millis() * hillSpeed);
var y = map(noise(t), 0,1, 30, height-35);
//vertex(x, y);
line(x, y, x, height);
}
noStroke(); //ground
fill(136, 143, 208);
rect(0, 380, width, 20)
endShape();
}

function wave(){ //drawing waves
beginShape();
fill(221, 153, 205);
var xN = yN;
for (var x = 0; x <= width; x += 10){
var y = map(noise(xN, yN), 0, 1, 200, 400);
//setting the vertex
vertex(x, y - 0.005); //x dimension
xN += 0.05;
}
yN += 0.055; //y dimension
vertex(width, height - 20);
vertex(0, height - 20);
endShape();

}

// DISPLAYING TREES
function updateAndDisplayTrees(){
for (var j = 0; j < trees.length; j++){
trees[j].move();
trees[j].display();
}
}

// Trees are removed when hitting the edge
function RTrees(){
var TreesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
keepTrees.push(trees[i]);
}
}
trees = TreesToKeep;
}

// adding tree to the end
var newTreesLikelihood = 0.05;
if (random(0,4) < newTreesLikelihood) {
trees.push(makeTree(width));
}
}

// update position of tree every frame
function treeMove() {
this.x += this.speed;
}

// drawing the trees
function treeDisplay() {
var floorHeight = 5;
var bHeight = this.nFloors * floorHeight * 2;
noStroke();
//drawing tree trunks
push();
translate(this.x, height - 20);
fill(24, 44, 63);
// drawing top part of the tree
fill(105, 247, 193);
ellipse(3, -bHeight, bHeight / 2, bHeight / 2);
pop();
}

function makeTree(birthLocationX) {
var TRR = {x: birthLocationX,
speed: -0.5,
nFloors: round(random(2,4)),
move: treeMove,
display: treeDisplay}
return TRR;
}

``````

For this project, I had fun making this animation, but at the same time, it was very difficult to figure out how to place the trees and try different variations for the mountains. I tried to make this very aesthetic and attractive by thinking a lot about good color combination. I added stars so that they appear every second. The final result is close to what I wanted, and I want to develop it further in the future.

## Mimi Jiao – Project 10 – Section E

``````/* Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project 10
*/

var terrainSpeed1 = 0.00004;
var terrainSpeed2 = 0.00015;
var terrainDetail = 0.0024;
var trees = [];

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

//pushing trees into initial tree array
for (var i = 0; i < 10; i++){
var rx = random(width);
trees[i] = makeTree(rx);
}
frameRate(10);
}

function draw() {
background(76, 101, 205);

//mountains in the back
beginShape();
stroke(78, 69, 94)
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed1);
var y = map(noise(t), 0,1, height / 2, height / 5);
line(x, y, x, height * 9 / 12);

}
endShape();

//mountains in the front
beginShape();
stroke(55, 55, 81)
for (var x1 = 0; x1 < width; x1++) {
var t1 = (x1 * terrainDetail) + (millis() * terrainSpeed2);
var y1 = map(noise(t1), 0,1, height / 4, height / 1.5);
line(x1, y1, x1, height * 9 / 12);

}
endShape();

//horizon line
fill(36, 36, 42);
rect(0, height * 9 / 12, width, height / 4);

updateTrees();
removeTrees();
randomTrees();

//wall fill
noStroke();
fill(38, 44, 62);
rect(0, 0, width, height / 5);
rect(0, 0, width / 10, height);
rect(0, 4 * height / 5, width, height / 5);
rect(9 * width / 10, 0, width / 10, height);

//WINDOW
noFill();
rectMode(CORNER);
rect(width / 10, height / 5, width * 8 / 10, 3 * height / 5);
fill(70, 90, 140);
noStroke();
rect(width / 10 - 10, height / 5, (width * 8 / 10) + 20, height / 40);
rect(width / 10 - 10, height * 4 / 5, (width * 8 / 10) + 20, height / 40);
rect(width / 10 - 10, height / 5, 10, 185);
rect(width * 9 / 10, height / 5, 10, 185);
push();
rectMode(CENTER);
rect(width / 2, height / 2 + 5, (width * 8 / 10) + 20, height / 40);
rect(width / 2, height / 2 + 5, 10, 185);
pop();
}

//update tree location after moving them and display them
function updateTrees(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}

//if trees fall out of the viewing window, remove from array
function removeTrees() {
var treesToKeep = [];
for (var i = 0; i < trees.length; i++) {
if (trees[i].x + trees[i].breadth > width / 10) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;

}

//randomly generate trees
function randomTrees() {
var newTreeProbability = .03;
if (random(0,1) <= newTreeProbability) {
trees.push(makeTree(width));
}
}

//move the trees
function treeMove() {
this.x += this.speed;
}

//display and draw the trees
function treeDisplay() {
var treeHeight = -height * 4 / 12;
fill(255);
noStroke();
push();
translate(this.x, height);
fill(71, 91, 73);
//tree body and leaves
triangle(0,(-height * 3 / 12) + 5,
20, (-height * 3 / 12) + 5,
10, treeHeight + this.height);
//tree log
noStroke();
fill(106, 91, 82);
rect(8, (-height * 3 / 12) + 5, 5, 6);
stroke(200);
pop();
}

//create the tree
function makeTree(birthLocationX) {
var tr = {x: birthLocationX,
speed: -3.5,
height: random(-25, 10),
move: treeMove,
display: treeDisplay}
return tr;
}``````

One of my deepest memories is of myself looking out of a moving train at night in the deserts of north-central China. I wanted to recreate the feeling of watching mountains pass by when the sun has just set. I initially explored both a vertical and horizontal composition, but I ultimately ended up with the landscape view. At the end, I changed a train window to a regular window because I thought it was more intuitive to understand. Here’s a picture of my initial sketches:

## Eunice Choe – Project 10 – Landscape

``````/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-10*/

var cloud = [];
var trees = [];
var terrainSpeed = 0.0001;
var terrainDetail1 = 0.005;
var terrainDetail2 = 0.008;

function setup() {
createCanvas(480,300);
angleMode(DEGREES);
// initial collection of trees and clouds
for (var i = 0; i < 10; i++) {
var cloudX = random(width);
var rx = random(width);
cloud[i] = makeCloud(cloudX);
trees[i] = makeTree(rx);
}
}

function draw() {
background(255, 223, 197);
// dark mountains in background
push();
beginShape();
fill(104, 101, 181);
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, 0, height);
vertex(x, y - 50);
}
vertex(width, height);
endShape();
pop();

// light mountains in background
push();
beginShape();
fill(165, 168, 199);
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 1, 0, height);
vertex(x, y);
}
vertex(width, height);
endShape();
pop();

displayHorizon();
updateTrees();
removeTrees();
randomTrees();
fill(165, 168, 199);

// drawing and moving the transparent clouds
for(var i = 0; i < cloud.length; i++) {
cloud[i].draw();
cloud[i].move();
}
}

function cloudDraw() {
push();
translate(this.xPos, this.yOffset);
stroke(255, 255, 255, 60);
strokeWeight(this.cHeight);
line(0, 0, this.cSize, 0);
pop();
}

// when moving clouds reach edge
// send them to other edge with random position, size, height
function cloudMove() {
this.xPos += this.speed;
if(this.xPos < 0 - this.cSize - 30) {
this.cHeight = random(10, 50);
this.cSize = random(30, 150);
this.xPos = width + this.cSize + random(-25, 25);
}
}

function makeCloud() {
var cloud = {xPos: random(width), //, width*4
speed: random(-0.4, -0.3),
cSize: random(30, 150),
cHeight: random(20, 60),
yOffset: random(50, height),
draw: cloudDraw,
move: cloudMove};
return cloud;
}

function updateTrees(){
// Update the trees positions
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}

// if trees hit edge, then remove from array
function removeTrees(){
var keepTrees = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
keepTrees.push(trees[i]);
}
}
trees = keepTrees;
}

// with probability, add tree to the end
function randomTrees() {
var newTreeLikelihood = 0.007;
if (random(0,1) < newTreeLikelihood) {
trees.push(makeTree(width));
}
}

// update position of tree every frame
function treeMove() {
this.x += this.speed;
}

// drawing the trees
function treeDisplay() {
var floorHeight = 10;
var bHeight = this.nFloors * floorHeight;
noStroke();
// tree trunk
push();
translate(this.x, height - 100);
fill(204, 187, 145);
// tree trunk reflections
fill(204, 187, 145, 50);
rect(0, -bHeight + bHeight, this.breadth, bHeight);

// tree leaves
fill(255, 136, 112);
ellipse(2.5, -bHeight, 35, bHeight);
//tree leaves reflections
fill(255, 136, 112, 50);
ellipse(2.5, bHeight, 35, bHeight);
pop();
}

function makeTree(birthLocationX) {
var tr = {x: birthLocationX,
speed: -1.0,
nFloors: round(random(2,8)),
move: treeMove,
display: treeDisplay}
return tr;
}

function displayHorizon(){
noStroke();
// water
fill(192, 219, 212);
rect(0,height-100, width, height-50);
// grqss
fill(152, 194, 146);
rect(0,height-100, width, 20);
}
``````

Overall, I found this project a little challenging. I had a solid plan with my sketch and I was able to execute it, but I found myself getting easily confused because there were so many lines of code. However, when I got the code figured out, I was able to capture the calmness and serenity of a mountain landscape. Along with the mountains in the background, I added trees, water, and tree reflections in the front. I also added moving transparent clouds that overlay the canvas. While this project was difficult for me, I am satisfied with the outcome and the skills I developed from it.

## Vicky Zhou – Project 10 – Landscape

``````/*Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project-10-Landscape
*/

//window roll down variables
var mtnspeed1 = 0.00009;
var mtndetail1 = 0.0002;
//mountain variables
var mtnspeed2 = 0.0001;
var mtndetail2 = 0.002;
var mtnspeed3 = 0.0008;
var mtndetail3 = 0.005;

var trees = [];
var windowrolldown = [];

function setup() {
createCanvas(480, 480);
//places trees throughout landscape
for (var i = 0; i < 10; i++){
var rx = random(width);
trees[i] = maketrees(rx);
}
frameRate(50);
}

function draw() {
background(255, 220, 200);

makewindowrolldown();
makemtns();

push();
noStroke();
updateAndDisplaytrees();
removetrees();
pop();

displayCarWindow();
displayCarMirror();
}

//creating function to show and update trees
function updateAndDisplaytrees(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}

//removing old trees from landscape
function removetrees(){
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].peaks > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}

var newtrees = 0.005;
if (random(0,1) < newtrees) {
trees.push(maketrees(width));
}
}

//moving trees across screen
function treeMove() {
this.x += this.speed;
}

//drawing trees
function treeDisplay() {
// var treeheight = 10;
var randomtreeheight = this.tbranches;
fill(65, 90, 85);
push();
translate(this.x, height - 30); // WHAT IS PURPOSE OF THIS TRANSLATE????
triangle(this.peaks + 10, -this.peaks - 20,
this.peaks + 90, -this.peaks - 20,
this.peaks + 45, -this.peaks - 210 * randomtreeheight);
pop();
}

//making trees
function maketrees(mx){
// noStroke();
var trees = {x: mx,
tbranches: random(0.4, 1.2),
peaks: 50,
speed: -5.0,
move: treeMove,
display: treeDisplay}
return trees;
}

//making window roll down
function makewindowrolldown() {
push();
beginShape();
strokeWeight(0.2);
stroke(60, 60, 170, 300);
for (var x = 0; x < width; x++) {
var t = (x * mtndetail1) + (millis() * mtnspeed1);
var y = map(noise(t), 0, 1, height, 100);
// vertex(x, y);
line(x, y - 100, x, height - 100);
}
endShape();
pop();
}

//making mountains
function makemtns() {
push();
//light purple mountains
beginShape();
stroke(150, 125, 130, 100);
for (var x = 0; x < width; x++) {
var t = (x * mtndetail2) + (millis() * mtnspeed2);
var y = map(noise(t), 0, 1, 0, height);
// vertex(x, y);
line(x, y, x, height);
}
endShape();

//dark green mountains
beginShape();
stroke(60, 80, 90, 120);
for (var x = 0; x < width; x++) {
var t = (x * mtndetail3) + (millis() * mtnspeed3);
var y = map(noise(t), 0, 1, 0, height * 2);
line(x, y, x, height);
}
endShape();
pop();

}

//draws car windows, frame, and handle detail
function displayCarWindow(){
//car window and frame display
push();
stroke(40, 40, 40);
strokeWeight(150);
line(-30, 100, 150, 0);
strokeWeight(100);
line(150, 15, 480, 0);
line(0, 430, 480, 430);
strokeWeight(70);
stroke(40, 50, 50);
line(0, 450, 480, 450);
noStroke();
fill(255, 220, 210);
triangle(0, 40, 0, 100, 50, 50);
//car handle and details
fill(70, 70, 70);
rect(30, 415, 120, 90);
triangle(150, 415, 150, 480, 210, 480);
fill(50, 50, 50);
rect(40, 425, 90, 60);
fill(80, 90, 80);
push();
fill(80, 90, 80);
strokeWeight(20);
stroke(80, 90, 80);
curve(40, 430, 60, 445, 120, 440, 150, 470);
pop();
pop();
}

//draws car mirror
function displayCarMirror(){
push();
noStroke();
fill(240, 240, 240, 190);
rect(0, 310, 100, 40);
rect(0, 340, 120, 10);
rect(0, 360, 40, 20);
pop();
push();
strokeWeight(25);
stroke(40, 40, 40);
fill(40, 40, 40);
curve(5, 316, 5, 316, 95, 314, 95, 400);
curve(30, 320, 103, 318, 103, 355, 35, 359);
curve(5, 410, 5, 380, 100, 365 - 10, 100, 290);
pop();
}

``````

For this week’s project, I decided to the view from a car window in the passenger seat, because roadtripping and looking out the windows is one of my favorite views in the whole world (especially in woodsy, mountainous areas). Originally, I had envisioned making telephone poles and clouds to go along with the scenery, however, after playing around with the noise function, I discovered a very pleasing wave that forms when dialing down the speed and detail aspects. I thought this form was very similar to the feeling of sticking your hand out the car window on the highway and having it glide and ride the air, but I also thought it also waved in a manner similar to rolling up and down a car window, so I implemented it as the latter. I originally wanted to implement a reflective, smaller, moving generative landscape mirroring the current on in the small car side mirror, but I could not end up figuring it out; I would like to revisit that concept when I have more time in the future.

## Kevin Riordan Project-10-Landscape

``````/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_10*/
var trees = [];//make empty trees array

function setup() {
createCanvas(480, 480);
for (var i = 0; i < 6; i++){
var randX = random(-width/5,width + (width / 3));//putting in 6 trees at the start
trees[i] = makeTree(randX);
}
frameRate(10);//setting framerate
}

function draw() {
background('#D8BFD8'); //setting background color
makeBackestMountains();//furthest mountains
makeBackMountains();//next furthest mountains
updateAndDisplayTrees();//moving and displaying trees
removeTreesThatHavePassed();//taking out trees that are safely offscreen
makeFrontMountains();//make foreground
}
//updates and displays trees as they move to the left
function updateAndDisplayTrees(){
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
//takes trees out of array once they are safely off screen
function removeTreesThatHavePassed(){
var treesKept = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x > -width / 3) {
treesKept.push(trees[i]);
}
}
trees = treesKept;
}
//adds new trees with set chance
var newTreeChance = 0.02;
if (random(0,1) < newTreeChance) {
trees.push(makeTree(width + (width / 3)));
}
}
//moves trees at 2 pixels per call
function treeMove() {
this.x += this.speed;
}
//makes trees with specified things
function makeTree(xCoord) {
var tree = {x: xCoord, speed: -2.0, move: treeMove, display: treeDisplay, size: random(0.5,1.3), grad: round(random(0,3))}
return tree;
}
//draws tree recursively with fractals
function drawTree(x, y, angle, depth, size){
if(depth != 0){
var x2 = x + (Math.cos(angle) * 10 * size * depth);
var y2 = y + (Math.sin(angle) * 15 * size * depth);
line(x, y, x2, y2);
drawTree(x2, y2, angle - (PI / 8), depth - 1, size);//left side of tree
drawTree(x2, y2, angle + (PI / 8), depth - 1, size);//right side of tree
}
}
//sets color based on the grad, 4 different colors possible
function treeDisplay(){
var treeColor;
stroke('#FFF8DC');
}
stroke('#FFEBCD');
}
stroke('#FFE4C4');
}
}
strokeWeight(2);
drawTree(this.x, height-30, -PI / 2, 6, this.size);//draws actual tree with fifth parameter changing the overall scale of it
}
//makes foreground with given detail, moves at same speed as trees
function makeFrontMountains() {
var terrainSpeed1 = 0.00005;
var terrainDetail1 = 0.005;
stroke('#DAA520');
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
var y1 = map(noise(t), 0,1, 400, height-30);
line(x,y1,x,height);
}
endShape();
}
//makes mountains in background, moves slower than trees and foreground
function makeBackMountains() {
var terrainSpeed2 = 0.000025;
var terrainDetail2 = 0.005;
stroke('#A0522D');
beginShape();
for (var x2 = 0; x2 < width; x2++) {
var u = (x2 * terrainDetail2) + (millis() * terrainSpeed2);
var y2 = map(noise(u), 0,1, 150, height - 30);
line(x2,y2,x2,height);
}
endShape();
}
//makes furthest mountains, moves very slowly
function makeBackestMountains() {
var terrainSpeed3 = 0.0000125;
var terrainDetail3 = 0.01;
stroke('#BC8F8F');
beginShape();
for (var x3 = 0; x3 < width; x3++) {
var v = (x3 * terrainDetail3) + (millis() * terrainSpeed3);
var y3 = map(noise(v), 0,1, 110, height - 150);
line(x3,y3,x3,height);
}
endShape();
}``````

I found the template for this project very helpful, but the part of this project that took me the most time was figuring out how to make the trees look more realistic. I used recursion and fractals to make the trees look nice, and realizing that I could call the same function inside of itself took a while for me to figure out. I also played around with speeds to make different things move at different speeds. I also found a website that gives color names for different colors, so I like the way my colors fit together for this project. This project made me really comfortable with functions and how they work together. I made the project look pretty close to how I wanted it to look which I am proud of.

## Emily Zhou –– Landscape

``````// assignment 10 sample code referenced for trees
// source: https://courses.ideate.cmu.edu/15-104/f2018/week-10-due-nov-4/#landscape

// p5.js.org example referenced for snowflakes
// source: https://p5js.org/examples/simulate-snowflakes.html

var trees = [];
var snowflakes = [];

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

for (var i = 0; i < 10; i++){
var rx = random(width);
trees[i] = makeTree(rx);
}
frameRate(15);
}

function draw() {
background(80, 100, 150);

displayGround();

// trees
updateCanvas();
eraseOld();

// snowflakes
let t = frameCount / 60;

for (var i = 0; i < random(5); i++) {
snowflakes.push(new snowflake());
}

for (let flake of snowflakes) {
flake.update(t);
flake.display();
}
}

// tree functions

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

function eraseOld(){
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].width > 0) {
treesToKeep.push(trees[i]);
}
}
trees = treesToKeep;
}

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

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

function treeDisplay() {
var treeH = this.height;
fill(10, 60, 20);
noStroke();
push();
translate(this.x, height - 40);
triangle(0, treeH - 17, this.width, treeH - 17, this.width / 2, -treeH - 17);
pop();
}

function makeTree(birthLocationX) {
var tr = {x: birthLocationX,
width: random(10, 20),
speed: -1.0,
height: random(10, 20),
move: treeMove,
display: treeDisplay}
return tr;
}

function displayGround(){
fill(255);
noStroke();
rect(0, height - 50, width, 50);

// frame
stroke(200);
noFill();
rect(0, 0, width - 1, height - 1);
}

// snowflakes

function snowflake() {
this.posX = 0;
this.posY = random(-50, 0);
this.initialangle = random(0, 2 * PI);
this.size = random(1, 3);

this.radius = sqrt(random(pow(width / 2, 2)));

this.update = function(time) {
let w = 0.6;
let angle = w * time + this.initialangle;
this.posX = width / 2 + this.radius * sin(angle);

this.posY += pow(this.size, 0.5);

if (this.posY > height) {
let index = snowflakes.indexOf(this);
snowflakes.splice(index, 1);
}
}

this.display = function() {
fill(255);
noStroke();
ellipse(this.posX, this.posY, this.size);
}
}``````

It snowed in my hometown this past week so I was inspired to do a snowy winter landscape.

I started with a blue sky and white ground. Then, I referenced the buildings sample code to generate trees of different height and width triangles. Finally, I looked on the p5.js website to find an example showing how to make falling snowflakes (source: https://p5js.org/examples/simulate-snowflakes.html). I studied the code and adapted it to my landscape which required smaller snowflake particles.

I am really happy with the end result and it reminds me a lot of what Ottawa looks like in the winter. Also, I had some trouble understanding the lectures on particles last week so studying and learning from the snowflake example really helped.

## Christine Seo – Project 10 – Landscape

``````// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-10

var clouds = [];
var terrainSpeed = 0.001;
var terrainDetail = 0.01;

function setup() {
createCanvas(300,400);
for (var i = 0; i < 8; i++){ //clouds forloop for array
var rx = random(width);
clouds[i] = drawCloud(rx);

}
frameRate(50);
}

function draw() {

sky(0, 0, width, height);
updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutOfView();
planeWindow();
}

function sky(x, y, w, h) { //drawing sky
var colorDark;
var colorLight;

colorDark = color(13, 91, 245);
colorLight = color(194, 225, 255);
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1.5);
var c = lerpColor(colorDark, colorLight, inter);
stroke(c);
line(x, i, x + w, i);

}

beginShape(); //drawing mountains
noFill();
stroke(56, 89, 9);
strokeWeight(100);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0,1, 150, 250);
vertex(x, y + 200);
}
endShape();

}

this.display = function() {
strokeWeight(this.border);
stroke(255);
fill(255);
ellipse(this.x, this.y,  this.di,  this.di);

}

function planeWindow(){

beginShape(); //outter black frame
stroke(0);
strokeWeight(70);
noFill();
rect(0,-10,310,420,100);
endShape();

beginShape(); // wings top triangle
noStroke();
fill(90);
triangle(120,220,120,180,140,230);
endShape();

beginShape(); // wings bottom
noStroke();
fill(20);
triangle(140,250,220,231,250,260);
triangle(180,280,260,251,250,280);
endShape();

beginShape(); // wings
noStroke();
fill(50);
triangle(300,240,120,220,280,300);
endShape();

beginShape(); //window shield
stroke(120);
strokeWeight(14);
noFill();
rect(20,20,width - 40,height - 40,100);
endShape();

beginShape();
stroke(0);
strokeWeight(7);
noFill();
rect(29,24,width - 59,height - 50,100);
endShape();

beginShape();
stroke(240);
strokeWeight(5);
noFill();
rect(13,9,width - 25,height - 20,120);
endShape();
}

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; // keeping the clouds
}

var newBuildingLikelihood = 0.01;
if (random(0,0.5) < newBuildingLikelihood) {
clouds.push(drawCloud(width));
}
}

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

function cloudDisplay() {
var floorHeight = 20;
var cloudHeight = this.nFloors * floorHeight;

fill(255,100);
noStroke();
push();
translate(this.x, height - 35);
ellipse(95, -cloudHeight, this.breadth, cloudHeight / 2);
pop();

push();
fill(255,70)
translate(this.x, height - 55);
ellipse(95, - cloudHeight -200, this.breadth, cloudHeight);
pop();
}

function drawCloud(birthLocationX) {
var bldg = {x: birthLocationX,
speed: -random(1,2.5),
nFloors: round(random(4,9)),
move: cloudMove,
display: cloudDisplay}
return bldg;
}``````

I wanted to portray a scene inside of an airplane because when I think of looking at a moving landscape, it is usually in a car or a plane. I randomized the clouds and their sizes as well. I wanted to add some sort of ground to make it not look like I’m too high up in the air to add more dynamic elements (I am also scared of heights). I think it was kind of hard to understand the concept of making the landscape “generative,” in the beginning. But, I was able to understand it after looking through the notes again. The foreground is clear due to the frame of the airplane and there are additional elements to visual display that background and the mid-ground.  I also tried to make a color scheme and I am quite pleased with the overall product!

## Jenny Hu — Week 10: Generative Landscape

``````//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 10

var moonx;
var moony;
var moonr;

var sunx;
var suny;
var sunr;

function setup() {
createCanvas(480, 300);
//frameRate(10);
hillSpeedB = random(0.000002, 0.00003);
hillSpeedFront = random(0.000005, 0.00009);
moonx = 350;
moony = random(20,80);
moonr = random(20,50);
sunx = 420;
suny = random(90,200);
sunr = random(80,150);

}

function draw() {
var c1 = color(0);
var c2 = color(200);

for (var i = 0; i < height/2; i++){
var gr = map (i, 0, height/2, 0, 1);
var newC = lerpColor( c1, c2, gr);
stroke(newC);
line(0, i, width, i);
}

//make my moon and sun

moonx = moonx - .01;
if (moonx < -100) {
moonx = 490;
moonx = moonx - .01;
};

myMoon();

sunx = sunx - .01;
if (sunx < -100) {
sunx = 490;
sunx = sunx - .01;
};

mySun();

//generate my hills
drawHill();
}

function drawHill() {

stroke(50);
beginShape();
for (var x = 0; x < width; x++) {
var t = x * 0.002 + (millis() * hillSpeedB);
var y = map(noise(t), 0,.9, 0, height/2);
line(x, y, x, height);
}
endShape();

stroke(200);
beginShape();
for (var x = 0; x < width; x++) {
var t = x * 0.003 + (millis() * hillSpeedFront);
var y = map(noise(t), 0, 0.7, 0, height);
line(x, y, x, height);
}
endShape();

}

function myMoon(){
noStroke();
fill(200);
ellipse(moonx, moony , moonr, moonr);
}
function mySun(){
noStroke();
fill(250);
ellipse(sunx, suny , sunr, sunr);
}
``````

For this project, I wanted to lean especially simple and elegant. Arguably, this might have been one of the most off-kilter process thus far in the class— I started with the intention to do simple, but subtle shapes. I wanted to impose 3D spheres onto the generative landscape, and apply a small gaussian blur to create a greater sense of focus.. but alas, I failed to find how to apply both the blur and the 3D implementation. I had explored and programmed using Perlin noise methods,  and considered multiple ways to apply blur (including generating from an array of images).

I think if I had more time, I would be able to find a method to implement these techniques on top of one another (the noise, with the landscape, with 3D on top), but in this case, I had to scale back.

In doing so, I think I learned a valuable lesson that I should have started small, and worked towards my bigger goal. Scaling back was mildly disappointing.