## Raymond Pai – Project 11 – Generative Landscapes

I wanted to be a moon rover, so I sketched an illustration of being on the moon. The ground is grey and you slowly move across the moon’s surface.
``````///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 11

var stars = [];
var sX = 0;
var sY = 0;
var moonSpeed = 0.00009;
var moonDetail = 0.005;

function setup(){
createCanvas(480, 300);
//initialize stars
for(var i = 0; i < 30; i++){
sX = random(width);
sY = random(height);
stars[i] = makeS(sX, sY);
}
}

function draw() {
background(0);
//draw earth
noStroke();
fill(90, 90, 255);
ellipse(130, 80, 70, 70);
fill(0, 255, 0);
rect(130, 80, 30, 20);
fill(0, 255, 0);
rect(100, 60, 20, 10);
//moon ground
drawMoon();
//stars
drawS();
}

function drawS(min, max, moise) {
noStroke();
fill(255, 255, 0);
push();
translate(this.x, this.y);
ellipse(10, 10, 5, 5);
pop();
}

function makeS(stX, stY){
var makeStar = {x: stX,
y: stY,
speed: -3,
move: moveS,
draw: drawS}
return makeStar;
}

function moveS(){
this.x += this.speed;
if(this.x <= -5){
this.x += width;
}
}

function displayS(){
for(var i = 0; i < 50; i++){
stars[i].move();
stars[i].draw();
}
}

function drawMoon(min, max, moise) {
fill(150);
beginShape();
//makes ground of the moon surface
for (var x = 0; x < width; x++) {
var t = (x * moonDetail) + (millis() * moonSpeed);
var y = map(noise(t), 0, 1, 0, 400, 400);
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape();
}
``````

## Fanjie Mike Jin — Project 11 — Landscape

``````// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-11

// global variables declared to hold objects
// array for tree objects
var trees = []

function setup() {
//color preprared for the gradient effect
c1 = color(250, 100, 0);
c2 = color(204, 143, 0);
createCanvas(480, 480);
frameRate(100);
}
function draw() {
//draw the gradient background
for (var i = 0; i < height; i++) {
var inter = map(i, 70, 110, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, i, width, i);
}
//draw the sun in the background
noStroke();
fill(234, 120, 120, 200);
ellipse(100, 60, 90, 90);
fill(255, 146, 128, 200);
ellipse(100, 60, 76, 76);

mountainBackground(); //mountain
land()
updatetrees();
removetrees();
newtrees();
}

function updatetrees(){
// Update the x positions of the trees and display them
for (var i = 0; i < trees.length; i++){
trees[i].move();
trees[i].display();
}
}
function removetrees(){
//remove the building from the array once it dropped off the left edge
var treesToKeep = [];
for (var i = 0; i < trees.length; i++){
if (trees[i].x + trees[i].breadth > 0) {
treesToKeep.push(trees[i]);
}
}
// the exsiting trees will be kept
trees = treesToKeep;
}

function newtrees() {
// add a new tree to the end
var probability = 0.017;
if (random(0,1) < probability) {
trees.push(drawtrees(width));
}
}

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

//display the trees
function treesDisplay() {
noStroke();
//leaves
fill(50, 235, 173);
triangle(this.x - 15, 350, this.x + 15, 350, this.x, 320);
triangle(this.x - 20, 370, this.x + 20, 370, this.x, 330);
triangle(this.x - 30, 400, this.x + 30, 400, this.x, 350);
//trunk
stroke(194, 245, 228);
line(this.x, 350, this.x, 420);
}

function drawtrees(px) {
var dt = {x: px,
//trees obeject properties
breadth: 30,
speed: -1.0,
move: treesMove,
display: treesDisplay}
return dt;
}

function mountainBackground() {
//makes mountains in the back
terrain = 0.009;
terrain2 = 0.014;
terrainSpeed = 0.0003;
//use noise function to draw random background contour of the furthest mountains

stroke(30, 148, 143,200);
beginShape();
//make slowly rolling hills
for (var j = 0; j < width; j++) {
var t = (j * terrain) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 200, 10);
line(j, y2, j, height);
}
endShape();

//use noise function to draw random background contour of the closer mountains
stroke(65, 158, 155);
beginShape();
for (var j = 0; j < width; j++) {
var t = (j * terrain2) + (millis() * terrainSpeed);
var y2 = map(noise(t), 0, 1, 400, 10);
line(j, y2, j, height);
}
endShape();
}

function land() {
//makes the land in the foreground appear
fill(46, 84, 78);
rect(0, 420, 480, 130);
}

``````

When I thought about the “generative landscape”, the first idea that prompted my mind is a landscape with mountains and trees. There are two layers of mountains to show the depth of this generative landscape. There are pine trees in the foreground. I have chosen the colors strategically so that the whole composition can be read clearly and aesthetically pleasing.