sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project - 10
*/

var snowman = [];

function setup() {
	createCanvas(480, 240);
	for (var i = 0; i < 4; i++) {
		var rx = random(width);
		snowman[i] = makeSnowman(rx);
	}
	frameRate(10);
}

function draw() {
	background("green");
	//background
	displayHorizon();
	//snowman
	updateAndDisplaySnowman();
	removeSnowmanThatHaveSlippedOutOfView();
	addNewSnowmanWithSomeRandomProbability();
}

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

function removeSnowmanThatHaveSlippedOutOfView() {
	var snowmanKeep = [];
	for (var i = 0; i < snowman.length; i++) {
		if(snowman[i].x + 50 > 0) {
			snowmanKeep.push(snowman[i]);
		}
	}
	snowman = snowmanKeep;
}

function addNewSnowmanWithSomeRandomProbability() {
	var newSnowmanPercent = 0.006
	if (random(0,1) < newSnowmanPercent) {
		snowman.push(makeSnowman(width))
	}
}
//move towards the left 

function snowmanMove() {
	this.x += this.speed;
}
//function that draws the snowman

function snowmanDisplay() {
	push();
	fill(255);
	noStroke();
	var sizeBottom = 35;
	var sizeMiddle = 25;
	var sizeTop = 20;
	var yy = height-35;
	//translate(this.x, height - 35);
	translate(this.x, 0);
	//bottom circle
	ellipse(0, yy - sizeBottom / 2, sizeBottom, sizeBottom);
	//middle circle
	ellipse(0, yy - sizeBottom - sizeMiddle / 2 +5 , sizeMiddle, sizeMiddle);
	// //top circle
	// ellipse(0, yy - sizeBottom - sizeMiddle - sizeTop / 2 + 10, sizeTop, sizeTop);
	push();
	fill(0);
	ellipse(0 - 5, yy - sizeBottom - sizeMiddle / 2 + 2, 2, 2);
	ellipse(0 + 5, yy - sizeBottom - sizeMiddle / 2 + 2, 2, 2);
	noFill();
	stroke(0)
	ellipse(0, yy - sizeBottom - sizeMiddle / 2 + 5, 4, 4);
	line(15, yy - sizeBottom / 2, 30, yy - 40);
	line(-15, yy - sizeBottom / 2, -30, yy - 40);
	pop();	
	pop();
}

//define all the objects and variables

function makeSnowman(positionOg) {
	var sman = {
		x: positionOg,
		//y: 380,
		speed: -1.0,
		move: snowmanMove,
		display: snowmanDisplay
	}
	return sman;
}

//background
function displayHorizon() {
	fill("lightblue");
	rect(-1,-1, width + 1, height - 39);
}

I wanted to render some snow scene because I love the snow. Unfortunately, I can barely finish the project. But I have a snowman! I mean lots of snowmen. I think this project is hard and really makes me think about “object”. I am still in the process of understanding the code. I think for my final project if I would do something similar, it will be much better than this.

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-10-Landscape

var fish = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.0005;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    noStroke();
    fish.push(makeFish(width));
}
 
function draw() {
    background(130, 255, 246);

    //creating the river
    push();
    beginShape(); 
    fill(96, 149, 255);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height / 6, height / 4);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();
    
    //updating the fish locations 
    updateFish();

    //adding new fish 
    if (fish.length > 0){
        lastFish = fish[fish.length - 1]
        if (lastFish.x + lastFish.length < width - 50){
            addFish();
        }
    }

    // removing fish out of view
    removeFish();
}

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

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

function removeFish() {
    var keep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].length * 3/2 > 0) {
            keep.push(fish[i]);
        }
    }
    fish = keep;
}

// drawing each fish
function fishDisplay() {
    //tail
    fill(this.r, 0, 0);
    triangle(this.x + this.length * (4 / 5), this.y, this.x + this.length * (3 / 2), this.y + 20, 
        this.x + this.length * (3 / 2), this.y - 20);

    //body
    fill(this.r, this.g, this.b);
    ellipse(this.x + this.length / 2, this.y, this.length, this.h);

    //eye
    fill(0);
    ellipse(this.x + this.length / 5, this.y - this.h / 8, 7, 7);

}

//adding a new fish on the right side of screen
function addFish() {
        fish.push(makeFish(width));
}

//fish object
function makeFish(startX) {
    var fsh = {x: startX,
                y : random(width / 3, width - 30),
                h : random(50, 70),
                length: random(50, 80),
                speed: random(-4, -2),
                r : random(255),
                g : random(255),
                b : random(255),
                move: fishMove,
                display: fishDisplay}
    return fsh;
}

I had a lot of fun making this project! While looking around for inspiration, I was looking at our old assignments we had completed. Then I remembered how much fun I had making the fish design for our first lab exam, and I decided to make this project off of that! (You’ll notice that I used similar code to create the fish). I wanted to give off a river design, where the fish in my landscape are swimming with the current down the river. Overall, I had a lot of fun designing the landscape, and I enjoyed being able to create my own object type .

index

var NPOINTS = 100;
var starX = [];
var starY = [];
var sandX = [];
var sandY = [];
var birdX = 270
var birdY = 160
var low = 300
var high = 120
var a = width / 2;
var b = width / 2;
var c = width / 2;

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

	//assigns new coordinate for each sand grain
	for (var i = 0; i < NPOINTS; i++) {
		sandX.push(random(0, 480));
		sandY.push(random(380, 480));
	};
}

function draw() {
	//sky gradient
	var col1 = color(47, 107, 177)
	var col2 = color(180, 197, 227)

	//rearranges values so that each line of sky has a different color
	for (var i = 0; i < height / 3 * 2; i++){
        var gradient = map (i, 0, height / 3 * 2, 0, 1);
        var newC = lerpColor(col1, col2, gradient);
        stroke(newC);
        line(0, i, width, i);
    }

	//bird's beak
	push();
	noStroke();
	fill(244, 198, 68);
	triangle(birdX + 8, birdY - 2, birdX + 8, birdY + 6, birdX + 17, birdY + 2);
	pop();

	//bird's head
	push();
	noStroke();
	fill(0);
	ellipse(birdX, birdY, 22, 20);
	pop();

	//bird's eye
	push();
	fill(255);
	strokeWeight(2);
	line(birdX + 1, birdY - 2, birdX + 4, birdY - 2);
	pop();


	//bird's back
	push();
	noStroke();
	fill(0);
	arc(birdX - 23, birdY + 2, 45, 30, 0, PI);
	pop();

	//sea
	noStroke();
	fill(123, 159, 189);
	rect(0, height / 3 * 2, width, height);

	//sand
	fill(211, 195, 182);
	arc(width / 2, height, width * 4, height / 7 * 3, PI, TWO_PI);

	//bird's wing
	noStroke();
	fill(0);
	quad(birdX - 30, birdY + 10, birdX - 35, birdY - 15, birdX - 21, birdY - 15, birdX - 5, birdY + 10);

	//moves bird according to mouse
	if (mouseY < 300 & mouseY > 120) {
		birdY = mouseY;
	} else if (mouseY < 120) {
		birdY = high;
	} else if (mouseY > 300) {
		birdY = low;
	};

	//makes sand move
	for (var i = 0; i < sandX.length; i++) {
		stroke(0);
		point(sandX[i], sandY[i]);
		sandX[i] = sandX[i] - 1;
		if (sandX[i] < 0) {
			sandX[i] = width;
		};
	};

}

For this project, I wanted to create a beach because I grew up living on an island. I initially wanted to create trees but ran out of time so I used sand as a way to represent a changing landscape.

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-10-Landscape */

var marioLink = "https://i.imgur.com/gaxoRHw.png"
var chutes = [];

function preload() {
	mario = loadImage(marioLink);
}

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of chutes
    for (var i = 0; i < 10; i++){
        var cx = random(width);
        chutes[i] = makeChute(cx);
    }
    frameRate(10);
}


function draw() {
    background(108, 130, 238); 
    displayHill();
    displayGround();

    updateAndDisplayChutes();
    removeChutes();
    addNewChutes(); 

    imageMode(CENTER);
    image(mario, 50, 330 + random(0, 30));
}


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


function removeChutes(){
    var chutesToKeep = [];
    for (var i = 0; i < chutes.length; i++){
        if (chutes[i].x + chutes[i].breadth > 0) {
            chutesToKeep.push(chutes[i]);
        }
    }
    chutes = chutesToKeep; // remember the surviving chutes
}


function addNewChutes() {
    // add a new chute to the end based on the probability
    var newChuteLikelihood = 0.03; 
    if (random(0,1) < newChuteLikelihood) {
        chutes.push(makeChute(width));
    }
}


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

// draw the building and some windows
function chuteDisplay() {
    var floorHeight = 45;
    var bHeight = floorHeight; 
//making the chutes
    push();
    translate(this.x, height - 40);
    strokeWeight(2);
    fill(147, 198, 63); 
    stroke(46, 104,28);
    rect(0, -bHeight - 61, 40, bHeight); // chute body
    rect(-5, -bHeight - 81, 50, 20); // chute head
//clouds
    fill(255, 70);
    noStroke();
    ellipse(0, -bHeight - 300, 100, 50);
    ellipse(10, -bHeight - 290, 90, 60);
    ellipse(20, -bHeight - 320, 110, 70);
//mystery boxes
    fill(233, 159, 87);
    strokeWeight(2);
    stroke(148, 85, 47);
    textSize(16);
    rect(50, -bHeight - 150, 30, 30);
    text('?', 60, -bHeight - 130);

    pop();
}


function makeChute(birthLocationX) {
    var cht = {x: birthLocationX,
                breadth: 70,
                speed: -6.0,
                nFloors: round(random(3,6)),
                move: chuteMove,
                display: chuteDisplay}
    return cht;
}
//making the green hill in the background
function displayHill() {
	var hill = 0.006
 	var hillSec = 0.0007;
 	stroke(71, 153, 44);
 	beginShape();
 	for (i = 0; i < width; i ++) {
 		var h = (millis() * hillSec) + (i * hill);
 		var y = map(noise(h), 0, 1, 300, 200);
 		line(i, y, i, height);
 	}
 	endShape();
}
//making the brick ground
function displayGround(){
	strokeWeight(2);
    stroke(136, 49, 27);
    fill(196, 83, 53);
    rect(0, 380, 480, 100);
    for (var j = 0; j < 50; j ++) {
    	line(j * 10, 380, j * 10, 480);
    	line(0, 380 + j * 10, 480, 380 + j * 10);
    }
}

I decided to my project based off of Super Mario Bros video game. I had trouble with figuring out how to make the chutes create new ones when the new screen comes by. Eventually I figured out if I increased the probability that a new chute is drawn, more will be drawn in the next screen. I also struggled with controlling the number of the chutes and couldn’t figure out how to make them not overlap each other.

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-10-Landscape
*/

var trees = []; //array for bigger trees (in the back)
var bushes = []; //array for smaller trees 
                 //I just called them bushes to make things easier
var speed = 0.00001; //leftward shift rate of mountains

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

  // create initial trees; make 5 big and 5 small trees
  for (var t = 0; t < 5; t++){
    var tx = random(width);
    trees[t] = makeTree(tx);
    var bx = random(width);
    bushes[t] = makeBush(bx);
  }
  frameRate(10); //set tree and bush frameRate to 10
}

//make tree at x
function makeTree(tx) {
  var trees = {x: tx,
              draw: treeDraw}
  return trees;
}

//make bush at x
function makeBush(bx) {
  var bushes = {x: bx,
              draw: bushDraw}
  return bushes;
}

//draw tree
function treeDraw() {
  noStroke();
  //leaves
  fill(14, 90, 117);
  triangle(this.x - 20, 398, this.x + 20, 398, this.x, 320);
  //trunk
  stroke(13, 77, 94);
  line(this.x, 330, this.x, 400);
  //movement
  this.x -= 1;

  //make new trees
  var newTree = 0.0025; //probability for new tree "birth"
  if (random(0, 1) < newTree) {
      trees.push(makeTree(width + 20)); //push new tree into trees array
  }
}

//draw bush
function bushDraw() {
  noStroke();
  //leaves
  fill(28, 65, 72);
  triangle(this.x - 15, 403, this.x + 15, 403, this.x, 330);
  //trunk
  stroke(13, 77, 94);
  line(this.x, 340, this.x, 405);
  //movement
  this.x -= 1.2;

  //make new bushes
  var newBush = 0.0025; //probability for new bush "birth"
  if (random(0, 1) < newBush) {
      bushes.push(makeBush(width + 15)); //push new bush into bushes array
  }
}

function draw() {
  background(228, 239, 242);
  noStroke();

  //orange gradient layer
  for (var y = 100; y < 400; y++) { //for this specific y interval,
    var a = map(y, 100, 400, 0, 255); //map y interval to alpha
    stroke(240, 178, 158, a); 
    line(0, y, width, y); //draw lines with mapped alphas
  }

  //sun
  fill(240, 178, 158);
  ellipse(240, 200, 25);

  //mountain layer 1
  beginShape(); 
  stroke(149, 189, 207);
  var variance1 = 0.001;
  for (i = 0; i < width; i++) {
    var t = (i * variance1) + (millis() * speed);
    var y = map(noise(t), 0, 1, 100, height);
    line(i, y, i, height); 
    }
  endShape();

  //fog layer 1
  for (var y = 200; y < 400; y++) {
    var b = map(y, 200, 400, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //mountain layer 2
  beginShape(); 
  stroke(85, 170, 200);
  var variance2 = 0.0015;
  for (j = 0; j < width; j++) {
    var t = (j * variance2) + (millis() * speed);
    var y = map(noise(t), 0, 1, 150, height);
    line(j, y, j, height); 
    }
  endShape();

  //fog layer 2
  for (var y = 200; y < 480; y++) {
    var b = map(y, 200, 480, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //draw trees using the treeDraw function
  for (var u = 0; u < trees.length; u++) {
    trees[u].draw();
  }

  //fog layer 3
  for (var y = 350; y < 480; y++) {
    var b = map(y, 350, 480, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //ground layers
  noStroke();
  fill(117, 144, 139);
  rect(-1, 400, width + 1, 10);
  fill(63, 84, 77);
  rect(-1, 405, width + 1, 80);

  //draw bushes using the bushDraw function
  for (var v = 0; v < bushes.length; v++) {
    bushes[v].draw();
  }

  //removes trees when they go off the left edge of the screen;
  //stores the trees still on screen in a new array
  var treesToKeep = [];
  for (var i = 0; i < trees.length; i++){
    if (trees[i].x + 20 > 0) {
      treesToKeep.push(trees[i]);
    }
  }
  trees = treesToKeep;

  //removes bushes when they go off the left edge of the screen;
  //stores the bushes still on screen in a new array
  var bushesToKeep = [];
  for (var v = 0; v < bushes.length; v++){
    if (bushes[v].x + 20 > 0) {
      bushesToKeep.push(bushes[v]);
    }
  }
  bushes = bushesToKeep;

}

I enjoyed this project, even though I initially struggled a lot with what kind of landscape I wanted to do. I wanted to make a landscape that looked believable, and since we basically all only had one terrain generation template, it was hard for me to pick a landscape I felt like I could create and be satisfied with. I ended up looking through landscape photos and using one for inspiration and reference. It was really helpful to be able to pull colors from the photo, as well as realistic landscape qualities.

I’m pretty proud with how my landscape turned out, especially with the fog (which I learned how to code alpha gradients for). I really want to try using this kind of concept to generate backgrounds that could be used for games or for open-world environments. I might explore some of that in the future (maybe for my final project?).

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-10
*/

var terrainSpeed1 = 0.0005;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0005;
var terrainDetail2 = 0.005;
var frames = []; 

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

    imageMode(CENTER);
    frameRate(11); //speed of doggos
} 

function preload(){
    var filenames = [];
      filenames[0] = "https://i.imgur.com/ejRANDS.png";
      filenames[1] = "https://i.imgur.com/coVxjO1.png";
      filenames[2] = "https://i.imgur.com/qJKozUu.png";
      filenames[3] = "https://i.imgur.com/ukTPJk3.png";
      filenames[4] = "https://i.imgur.com/KlTBTOl.png";
      filenames[5] = "https://i.imgur.com/Yei5uel.png";
      filenames[6] = "https://i.imgur.com/srcpeKV.png";
      filenames[7] = "https://i.imgur.com/3mbE69u.png";
      filenames[8] = "https://i.imgur.com/EKPZJMw.png";
      filenames[9] = "https://i.imgur.com/L6GOIGZ.png";

    for (var i = 0; i < filenames.length; i++) {
        frames.push(loadImage(filenames[i]));
    } 

}

function draw() {
    background('black');
    mountain1();
    mountain2();
    push();
    doggos();
    pop();

    //ground
    fill(255, 174, 76);
    rect(0, 375, width, 105);
}


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

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


function doggos(){

    //dooggos scaled down and translated to center
    translate(width/2,360);
    scale(.2,.2);
    image(frames[frameCount % 10], 0, 0);

}

I decided to do a Halloween themed project! Using a gif I found online and editing it on Photoshop (editing out the background and creating separate png files), the two dressed-up dogs are walking along the horizon against an black background and orange mountains.

Boats and Waves

sketch

// John Legelis
// Section D

var boat = []

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

}

function draw() {

    background(135, 206, 250)

    //Land terrain
    var land = 0.003;
    var landS = 0.00005;
    stroke("green");
    beginShape(); 
    for (i = 0; i < width; i++) {
        var h = (millis() * landS) + (i * land);
        var y = map(noise(h), 0, 1, 100, 0);
        line(i, y, i, height);
    }
    endShape();

    // Rear wave
    var back = 0.0051;
    var backS = 0.0002;
    stroke(0,142,170);
    beginShape(); 
    for (i = 0; i < width; i++) {
        var h = (millis() * backS) + (i * back);
        var y = map(noise(h), 0, 1, 200, 0);
        line(i, y, i, height);
    }
    endShape();

    //probablity that determines if boat is drawn
    if (random() < 0.03){
        boat.push(makeBoat())
    }
    //Draw and move the boat if made
    for (var h = 0; h < boat.length; h++){
        boat[h].draw()
        boat[h].move() 
    }


    //middle wave terrain
    var mid = 0.0054;
    var midS = 0.0004;
    stroke(0,153,183);
    beginShape(); 
    for (j = 0; j < width; j++) {
        var h = (millis() * midS) + (j * mid);
        var y = map(noise(h), 0, 1, 300, 200);
        line(j, y, j, height);
    }
    endShape();

    //foreground wave
    var fore = 0.006;
    var foreS = 0.0007;
    stroke(0,172,206);
    beginShape(); 
    for (j = 0; j < width; j++) {
        var h = (millis() * foreS) + (j * fore);
        var y = map(noise(h), 0, 1, height, 300);
        line(j, y, j, height);
    }
    endShape();


}

//object containig boat
function makeBoat(){
    var bo = {x:480, y: 230, move: moveBoat, draw: drawBoat}
    return bo
}

//what boat looks like
function drawBoat(){
    var randsailH = random(30,50)
    noStroke()
    fill("brown")
    rect(this.x, this.y, 60,20)
    fill("white")
    triangle(this.x + 10, this.y, this.x + 35, this.y - randsailH, this.x + 25, this.y)
    triangle(this.x + 40, this.y, this.x + 65, this.y - randsailH, this.x + 55, this.y)
    }

// Move that boat
function moveBoat(){
    this.x = this.x - 4 
}

This week’s sketch was a rather large undertaking as it involved using objects on our own for the first time. It took quite some time to be able to properly implement an object without having my hand held through the lab but I eventually succeeded. I stumbled upon the random sail movement by accident but I loved the effect of billowing sails in the wind.

atreu-proj-10

/*Austin Treu
  atreu@andrew.cmu.edu
  Section B
  Project-10*/

var xStart = 0, buzz, buzzY;
var buzzLink = 'https://i.imgur.com/KfTOvVY.png?1';

function preload(){
    buzz = loadImage(buzzLink);
}

function setup() {
    createCanvas(480, 480);
    background(0,0,40);
    buzzY = height/2;
}

function draw() {
    background(0,0,40);
    //make the stars
    for(var x = xStart; x < width+xStart; x+=10){
            var y1 = noise(x)*height;
            var y2 = noise(x+10)*height/4;
            var y3 = noise(x+10)*3*height/4;
            var y4 = noise(x+10)*height*2;
            stroke(255);
            point(x-xStart, y1);
            point(x-xStart, y2);
            point(x-xStart, y3);
            point(x-xStart, y4);
    }

    //buzz rocketing through space
    imageMode(CENTER);
    image(buzz, width/5, (15*noise((width/5+xStart)))+height/2);

    /*create and move planets
    var py = int(random(height));
    var pSize = int(random(10,100));
    var r = int(random(0, 255));
    var g = int(random(0, 255));
    var b = int(random(0, 255));
    var pCol = 'rgb('+r+','+g+','+b+')';
    noStroke();
    fill(pCol);
    ellipse(width+100-xStart,py,pSize,pSize);*/

    //move screen
    xStart+=10;
}

I went into this project with an empty mind, searching for an idea. I opened up a new tab and went to a newsfeed and saw a headline about space. This took me in the direction I ultimately went. The stars were not too difficult to add, I just had to figure out how to utilize noise() to achieve what I wanted. After some trial and error, I decided that I wanted more on the screen, so I set out to find an image of a spaceship. That led me to a picture of an astronaut, which led me to the picture of Buzz Lightyear that I used. I intended to include some planets, but was unable to complete that, so this project is entitled ‘Buzz Flies Through Deep Space’.

Cannot post the updated file from the email I sent over. I have instead uploaded the archive for this project. Archive

For this project, I created worms that change color and inch along the landscape with hills in the background. The worms were inspired from nematode references in cartoons.

Project-10

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project 10: Generative Landscape

var buildings = [];
var terrainSpeed = 0.0003;
var terrainSpeed2 = 0.0002;
var terrainSpeed3 = 0.0001;
var terrainDetail = 0.003;
var terrainDetail2 = 0.005;
var terrainDetail3 = 0.006;

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

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}
 
function draw() {
    background(255);
    terrain3();
    terrain2();
    terrain();
    building();
}

// blue terrain in front
function terrain() {
    push();
    var R = random(5, 40);
    var G = random(5, 40);
    fill(R, G, 80);
    stroke(255);
    strokeWeight(6);
    beginShape(); 
    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); 
    }
    endShape();
    pop();
}

// purple terrain in middle
function terrain2() {
    push();
    var R = random(40, 60);
    var G = random(0, 30);
    fill(R, G, 80);
    stroke(255);
    strokeWeight(3);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0, 2, 0, height);
        vertex(x, y); 
    }
    endShape();
    pop();
}

// pink terrain in back
function terrain3() {
    push();
    var G = random(0, 40);
    var B = random(90, 100);
    fill(120, G, B);
    stroke(255);
    strokeWeight(1);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0, 3, 0, height);
        vertex(x, y); 
    }
    endShape();
    pop();
}
    
function building() { 
    push();
    translate(0.1 * width, 0.1 * height); 
    scale(0.8);
    displayHorizon();
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    pop();
}


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

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

function addNewBuildingsWithSomeRandomProbability() {
    // 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));
    }
}

function buildingMove() {
    this.x += this.speed;
}
    
// draw alien buildings with changing colors 
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    var B = random(100, 255);
    var R = random(100, 255);
    fill(R, 255, B); 
    stroke(0); 
    strokeWeight(2);

    push();
    translate(this.x, height - 40);
    ellipse(0, -bHeight + 20, this.breadth, bHeight * 2);

    // draw windows
    stroke(0); 
    strokeWeight(2);
    fill(0);
    for (var i = 0; i < this.nFloors; i++) {
        rect(-5, -15 - (i * floorHeight + 10), 10, 10);
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: round(random(30, 80)),
                speed: -2,
                nFloors: round(random(3, 7)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function displayHorizon(){
    noStroke();
    fill(0, 43, 7);
    rect(-200, height - 150, width + 300, height - 150); 
}

I tried creating an alien world generative landscape. The sky portion of the landscape has three terrains varying in color and speed, looking somewhat like clouds. The buildings vary in size and color, looking almost like cacti. This project was rather challenging, but I would definitely experiment more with generative landscapes in the near future and try creating more elaborate ones.