Month: November 2016

For my project this week, I decided to have my generative landscape be a sky with various sized stars. The stars are continuously generated and disappear at the end of the canvas in various sizes.

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project 10 

var stars = [];


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of stars
    for (var i = 0; i < 10; i++){
        var rst = random(width);
        stars[i] = makeStars(rst);
    }
    frameRate(30);
}


function draw() {
    background(0); 

    updateandgeneratestars();
    takeawaystars();
    addnewstars(); 

    basicForeground(); 
    showStarNumber(); 
}


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


function takeawaystars(){
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].breadth > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep; // remember the remaining stars
}


function addnewstars() {
    // With a very tiny probability, add a new star to the end.
    var newStarProbability = 0.05; 
    if (random(0, 1) < newStarProbability) {
        stars.push(makeStars(width));
    }
}


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

// draw the stars 
function showstars() {
    var starHeight = 20;
    fill(245); 
	noStroke();    
	push();
    translate(this.x, height - 375);
    rect(0, starHeight, 10, 10);
    translate(this.x, height - 325);
    ellipse(50, starHeight, 20, 20); 
    translate(this.x, height - 290); 
    rect(300, starHeight, 15, 15); 
    translate(this.x, height - 285); 
    ellipse(100, starHeight, 10, 10); 
    pop();
}


function makeStars(birthLocationX) {
    var str = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nstars: round(random(2,8)),
                move: starsmove,
                display: showstars}
    return str;
}


function basicForeground() {
	//creating the window frame
	noFill(); 
	strokeWeight(15); 
	stroke(101, 67, 33); 
	rectMode(CENTER); 
	rect(width / 2, height / 2, 585, 385); 
	line(width / 2, 0, width / 2, 400); 
	line(0, height / 2, 600, height / 2); 

	//little person looking out 
	strokeWeight(1); 
	stroke(0, 0, 128); 
	fill(0, 0, 128); 
	ellipse(width / 4, 380, 85, 100); 
	noStroke(); 
	fill(255, 223, 180); 
	ellipse(width / 4, 300, 100, 100); 

	//speech bubble 
	stroke(0); 
	fill(255); 
	triangle(250, 280, 250, 305, 200, 305); 
	rect(345, 300, 250, 50); 
	
}

function showStarNumber() {
	noStroke(); 
	fill(216, 182, 0); 
	var starNumber = "I see " + stars.length + " stars tonight, wow!"
	textSize(16); 
	textFont("Georgia"); 
	text(starNumber, 250, 305);  
}


	


	

For this piece, I wanted to use the walking animation that we used in a previous assignment to take our walker on an adventure. I decided to make the figures of this adventure and was happy to figure out a way to make it seem like it is going really slow. There are times where he randomly disappears as everything else in this piece seemingly fades away. It was difficult to figure out the mechanics to making the looping work, but once I did I was able to apply it to the two main objects that I created. I was hoping to get the character to move around like a game but didn’t get that far. Maybe next time I will get it.

sketch-31.js

//Victor Tavarez
//Secion D
//vtavarez@andrew.cmu.edu
//Project-10-Landscape


var frames = []; // An array to store the images
var lamps = [];
var lights = []

//=====Code directly from HomeWork 9 for walking man
//---------------------------------------
function preload(){
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    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";
    // PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY,
    // USING THE FILENAMES STORED IN THE filenames ARRAY.
    for (var i=0; i < filenames.length; i++){
        frames.push(loadImage(filenames[i]));
    }  
}
function setup(){
    createCanvas(600,400);
    imageMode(CENTER);
    //create lamps
    for(var i=0; i<6; i++){
        var rx=random(width);
        var rx2=random(width);
        lamps.push(makeLamps(rx));
        lights.push(makeLights(rx2));
    }
    frameRate(10);    
}
//---------------------------------------
function draw() {
    background(0,30,30,30);
    updateAndDisplayLights();
    removeLights();
    addNewLights();   
      
    updateAndDisplayLamps();
    removeLamps();
    addNewLamps();
    //walker from HW 9
}
function drawWalker(y){
    noStroke();  
    var currentFrame = frameCount % 8;
    push();     
    image(frames[currentFrame], width/2, height-50);
    pop()
}
function removeLamps(){
    var lampsToKeep = [];
    for (var i=0; i<lamps.length; i++){
        if (lamps[i].x + lamps[i].lampWidth >0){
            lampsToKeep.push(lamps[i])
        }
    }
    lamps=lampsToKeep
}
function removeLights(){
    var lightsToKeep = [];
    for (var i=0; i<lights.length; i++){
        if (lights[i].x + lights[i].size >0){
            lightsToKeep.push(lights[i])
        }
    }    
    lights=lightsToKeep

}
function addNewLamps(){
    var newLampsProbability = 0.06;
    if (random(0,1) < newLampsProbability){
        lamps.push(makeLamps(width));
    }
}
function addNewLights(){
    var newLightsProbability = 0.9;
    if (random(0,1) < newLightsProbability){
        lights.push(makeLights(width));
    }
}
function updateAndDisplayLamps(){
    for (var i=0; i<lamps.length; i++){
        lamps[i].move();
        lamps[i].display();
    }
}
function updateAndDisplayLights(){
    for (var i=0; i<lights.length; i++){
        lights[i].move();
        lights[i].display();
    }
}
function lampMove(){
    this.x+=this.speed;
}
function lightsMove(){
    this.x+=this.speed;
}
function lampDisplay(){
    fill(255,random(200,255),random(130,255));
    stroke(0);
    push();
    rect(this.x,0,this.lampWidth,this.lampHeight);

    rect(this.x,this.lampHeight+150,this.lampWidth,height)
    pop();

    drawWalker(this.lampHeight+75);
}
function lightsDisplay(){
    fill(random(200,255),random(230,255),random(200,255),40);
    noStroke()
    push();
    ellipse(this.x,this.y,this.size,this.size)
    pop();
}
function makeLamps(birthLocationX){
    var lamp = {x: birthLocationX,
                lampWidth: random(5,10),
                speed: -10.0,
                lampHeight: random(50,250),
                move: lampMove,
                display: lampDisplay}
    return lamp;
}
function makeLights(birthLocationX){
    var lamp = {x: birthLocationX,
                y: random(0,height),
                size: random(5,30),
                speed: -1*random(1,10),
                move: lightsMove,
                display: lightsDisplay}
    return lamp;
}

sketch

//Zhuoying Lin
//zhuoyinl@andrew.cmu.edu
//section a 
//project 10

var terrainSpeed1 = 0.0005;
var terrainSpeed2 = 0.0001;
var terrainSpeed3 = 0.0002;
var waterSpeed1 = 0.0001;
var terrainDetail1 = 0.005;
var terrainDetail2 = 0.02;
var terrainDetail3 = 0.05;
var waterDetail1 = 0.001;
var angle = 10;
var birds= [];


function setup() {
    createCanvas(400, 600);
     for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(0,height/4);
        birds[i] = makeBirds(rx,ry);
    }
    
    frameRate(10);
}
 
function draw() {

    //draw background color
    for (var i=0;i<30;i++) {
        strokeWeight(15);
        stroke(255-i);
        line(0,i*15,width,i*15);
    }
   
    //far mountains
    push();
    fill(220); 
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height/4, height*3/4);
        vertex(x, y); 
      
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();

    //middle mountains
    push();
    fill(205); 
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0,1, height*3/8, height*3/4);
        vertex(x, y); 

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

    //close mountains
    push();
    fill(190); 
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(x, y); 

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

    //river
    noFill(); 
    beginShape(); 
    strokeWeight(1);
    stroke(255);
    //stroke(134,179,194);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);
        vertex(x, y);


    }
    endShape();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+10);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+20);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+30);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+40);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+50);   
    }
    endShape();

    updateAndDisplaybirds();
    removebirds();
    addbirds(); 
    //makeBoat(mouseX,random(520,525));

    push();
    translate(mouseX, random(500,505));
    noStroke();
    fill(255);
    beginShape();
    vertex(-20,-15);
    vertex(20,-15);
    vertex(10,0);
    vertex(-10,0);
    endShape();
    pop();
}


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

function removebirds(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    //birds = birdsToKeep; // remember the surviving birds
}

function addbirds() {
    // With a very tiny probability, add a new bird to the end.
    var newBirdLikelihood = 0.005; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBirds(width,random(0, height/2)));
    }
}

function birdsMove() {
    this.x += this.speed;
    this.y += random(-this.speed,this.speed);
}

function birdsDisplay() {
    translate(this.x,this.y);
    noStroke();
    fill(100);

    //body
    ellipse(0,0,20,10);

    //head
    triangle(-5,3,-15,0,-5,-3);

    //tail
    beginShape();
    vertex(8,-2);
    vertex(14,-3);
    vertex(14,3);
    vertex(8,2);
    endShape();

    //wings
    beginShape();
    vertex(-5,0);
    vertex(0,-10);
    vertex(12,-12);
    vertex(3,0);
    endShape();

}

function makeBirds(birthLocationX,birthLocationY) {
    var birds = {x: birthLocationX,
              y : birthLocationY,
                speed: -random(.5,1),
                move: birdsMove,
                display: birdsDisplay}
    return birds;
}

For this assignment I try to create an ink painting style graphic. The mountains and birds and rivers are all randomly produced.I made the sky a gradians of grey to increase the sense pf hierarchy. the three layers of mountains are moving with different speeds, and with different steepness.

Project 10: Dynamic Landscape

var cloudShape = {x: 30, y: 110, w:40, h: 20};
var cloud2Shape = {x: 500, y:50, w: 50, h:30};
var cloud3Shape = {x: 300, y: 70, w:25, h: 15};
var car = {x: 500, y: 340};
var car2 = {x: 200, y: 340};
var car3 = {x: 35, y:390};
var airplane = {x: 30, y: 30, w: 40, h: 10};
var airplane2 = {x: 590, y: 70, w: 40, h: 10};

//initial cloud colors and transparencies
var cloudColor = 150;
var cloudTransparency = 80;
var cloud2Color = 150;
var cloud2Transparency = 80;
var cloud3Color = 180;
var cloud3Transparency = 70;

//initial car1's color
var carR = 100;
var carG = 100;
var carB = 135;

//initial car2's color
var car2R = 100;
var car2G = 30;
var car2B = 80;

//initial car3's color
var car3R = 60;
var car3G = 180;
var car3B = 30;

var image1Location = 0; //begins first image at x=0
var image2Location = 1200; //begins second image at x=1200, twice the canvas width


function preload() {
    image1 = loadImage("http://i.imgur.com/kw0nRXj.png"); //loads fist background image
    image2 = loadImage("http://i.imgur.com/kw0nRXj.png"); //loads second background image
}

function setup() {
    createCanvas(600,400);
}

function draw() {
    noStroke();
    image(image1, image1Location,0, width*2,height); //background image
    image1Location = image1Location - 1; //shifts the background image to the left
    image(image2, image2Location,0, width*2,height); //background image
    image2Location = image2Location - 1; //shifts the background image#2 to the left
    //connects the two separate images into a continuous background loop:
    if (image1Location == -width) { //when image1 goes off the canvas
        image2Location = width; //start image2 on the canvas
    } else if (image2Location == -width) { //when image2 goes off the canvas
        image1Location = width; //start image1 on the canvas
    }

    drawStars();
    drawPlane();
    drawPlane2();
    drawCloud();
    drawCloud2();
    drawCloud3();
    drawCar1();
    drawCar2();
    drawCar3();
    
}

function drawStars() {
    fill(255,255,0,70); //yellow hue
    var starX = 60;
    var starY = 5;
    //draws lil star ellipses:
    ellipse(starX,60,starY,5);
    ellipse(starX+310,starY*6,8,8);
    ellipse(starX+325,starY*7,4,4);
    ellipse(starX+410,starY*9,6,6);
    ellipse(starX+100,starY*2,5,5);
    ellipse(starX+525,starY*4,4,4);
}

function drawPlane() {
    fill(0);
    ellipse(airplane.x, airplane.y, airplane.w, airplane.h); //body
    triangle(airplane.x-24,airplane.y-10, airplane.x-20,airplane.y, airplane.x-5,airplane.y); //tail
    ellipse(airplane.x+8,airplane.y+1,airplane.w-10,7); //nose
    triangle(airplane.x-3,airplane.y+10, airplane.x-6,airplane.y+5, airplane.x+5,airplane.y+5); //wing
    fill("yellow");
    ellipse(airplane.x+15,airplane.y-2,airplane.w/8,airplane.h-7); //eye
    airplane.x +=1.5; //moves right
    if (airplane.x >= 650) { //randomizes height of plane after off screen
        airplane.x = -130;
        airplane.y = random(10, 60);
    }
}

function drawPlane2() {
    fill(0);
    ellipse(airplane2.x, airplane2.y, airplane2.w, airplane2.h); //body
    triangle(airplane2.x+24,airplane2.y-10, airplane2.x+20,airplane2.y, airplane2.x+5,airplane2.y); //tail
    ellipse(airplane2.x-8,airplane2.y+1,airplane2.w-10,7); //nose
    triangle(airplane2.x-3,airplane2.y+10, airplane2.x-6,airplane2.y+5, airplane2.x+5,airplane2.y+5); //wing
    fill("yellow");
    ellipse(airplane2.x-15,airplane2.y-2,airplane2.w/8,airplane2.h-7); //eye
    airplane2.x -=1.5; //moves right
    if (airplane2.x <= -230) { //randomizes height of plane after off screen
        airplane2.x = width+130;
        airplane2.y = random(10, 60);
    }
}

function drawCloud() {
    fill(cloudColor, cloudTransparency);
    //ellipses to make up the cloud:
    ellipse(cloudShape.x-15, cloudShape.y, cloudShape.w+10,cloudShape.h);
    ellipse(cloudShape.x, cloudShape.y-10, cloudShape.w-10,cloudShape.h);
    ellipse(cloudShape.x+25, cloudShape.y-3, cloudShape.w,cloudShape.h);
    ellipse(cloudShape.x+35, cloudShape.y+5, cloudShape.w-10,cloudShape.h);
    ellipse(cloudShape.x+45, cloudShape.y, cloudShape.w,cloudShape.h);
    ellipse(cloudShape.x, cloudShape.y, cloudShape.w,cloudShape.h);
    cloudShape.x = cloudShape.x - .7; //moves right
    if(cloudShape.x <= -100) { //randomizes the properties once off screen
        cloudShape.x = width+80;
        cloudShape.y = random(30,110);
        cloudColor = random(150,255);
        cloudTransparency = random(60,80);
        cloudShape.h = random(30,25);
    }
}

function drawCloud2() {
    fill(cloud2Color, cloud2Transparency);
    //ellipses to make up the cloud:
    ellipse(cloud2Shape.x-15, cloud2Shape.y, cloud2Shape.w+10,cloud2Shape.h);
    ellipse(cloud2Shape.x, cloud2Shape.y-10, cloud2Shape.w-10,cloud2Shape.h);
    ellipse(cloud2Shape.x+25, cloud2Shape.y-3, cloud2Shape.w,cloud2Shape.h+5);
    ellipse(cloud2Shape.x+35, cloud2Shape.y+5, cloud2Shape.w-10,cloud2Shape.h);
    ellipse(cloud2Shape.x+45, cloud2Shape.y, cloud2Shape.w,cloud2Shape.h);
    ellipse(cloud2Shape.x, cloud2Shape.y, cloud2Shape.w,cloud2Shape.h);
    cloud2Shape.x = cloud2Shape.x - .6; //moves left
    if(cloud2Shape.x <= -100) { //randomizes the properties once off screen
        cloud2Shape.x = width+100;
        cloud2Shape.y = random(30,110);
        cloud2Color = random(150,255);
        cloud2Transparency = random(60,80);
        cloud2Shape.h = random(40,35);
    }
}

function drawCloud3() {
    fill(cloud3Color, cloud3Transparency);
    //ellipses to make up the cloud:
    ellipse(cloud3Shape.x-5, cloud3Shape.y, cloud3Shape.w+10,cloud3Shape.h);
    ellipse(cloud3Shape.x, cloud3Shape.y-7, cloud3Shape.w-10,cloud3Shape.h);
    ellipse(cloud3Shape.x+10, cloud3Shape.y-3, cloud3Shape.w,cloud3Shape.h+5);
    ellipse(cloud3Shape.x+15, cloud3Shape.y+3, cloud3Shape.w-10,cloud3Shape.h);
    ellipse(cloud3Shape.x+20, cloud3Shape.y, cloud3Shape.w,cloud3Shape.h);
    ellipse(cloud3Shape.x, cloud3Shape.y, cloud3Shape.w,cloud3Shape.h);
    cloud3Shape.x = cloud3Shape.x - .3; //moves left
    if(cloud3Shape.x <= -100) { //randomizes the properties once off screen
        cloud3Shape.x = width+100;
        cloud3Shape.y = random(30,110);
        cloud3Color = random(150,255);
        cloud3Transparency = random(60,80);
        cloud3Shape.h = random(5,25);
    }
}

function drawCar1() {
    var wheelSize = 15;

    fill(0);
        ellipse(car.x+2,car.y+25,wheelSize,wheelSize); //front wheel
        ellipse(car.x+45,car.y+25,wheelSize,wheelSize); //back wheel
    fill(carR, carG, carB);
        rect(car.x,car.y-5, 50,30,15,15,10,10); //top of car
        rect(car.x-18,car.y+10, 80,15,10); //body of car
    fill("lightBlue");
        rect(car.x+6,car.y,10,10,5,2,2,2); //front window
        rect(car.x+20,car.y,10,10,2,2,2,2); //middle window
        rect(car.x+34,car.y,10,10,2,5,2,2); //back window
    fill(255,255,0); //yellow
        rect(car.x-20,car.y+13,5,7,5,1,1,5); //headlight
    fill(255,255,0,75); //headlight haze
        triangle(car.x-40,car.y+10, car.x-20,car.y+17, car.x-40,car.y+26);
    car.x -=3; //moves left
    if (car.x <= -200) { //randomizes color when off screen and starts it back on the other side of canvas
        car.x = 800;
        carR = random(200);
        carG = random(200);
        carB = random(200);
    }
}

function drawCar2() {
    var wheelSize = 15;

    fill(0);
        ellipse(car2.x+2,car2.y+25,wheelSize,wheelSize); //front wheel
        ellipse(car2.x+45,car2.y+25,wheelSize,wheelSize); //back wheel
    fill(car2R, car2G, car2B);
        rect(car2.x,car2.y-5, 50,30,15,15,10,10); //top of car
        rect(car2.x-18,car2.y+10, 80,15,10); //body of car
    fill("lightBlue");
        rect(car2.x+6,car2.y,10,10,5,2,2,2); //front window
        rect(car2.x+20,car2.y,10,10,2,2,2,2); //middle window
        rect(car2.x+34,car2.y,10,10,2,5,2,2); //back window
    fill(255,255,0); //yellow
        rect(car2.x-20,car2.y+13,5,7,5,1,1,5); //headlight
    fill(255,255,0,75); //headlight haze
        triangle(car2.x-40,car2.y+10, car2.x-20,car2.y+17, car2.x-40,car2.y+26);
    car2.x -=3.8; //moves left
    if (car2.x <= -200) { //randomizes color when off screen and starts it back on the other side of canvas
        car2.x = 800;
        car2R = random(150);
        car2G = random(150);
        car2B = random(150);
    }
}

function drawCar3() {
    var wheelSize = 17;

    fill(0);
        ellipse(car3.x,car3.y, wheelSize, wheelSize); //back wheel
        ellipse(car3.x+50,car3.y, wheelSize, wheelSize); //front wheel
    fill(car3R, car3G, car3B);
        rect(car3.x-7,car3.y-34, 57,30,15,15,10,10); //top of car
        rect(car3.x-15,car3.y-17, 85,17,10); //body of car
    fill("lightBlue");
        rect(car3.x,car3.y-30,11,12,5,2,2,2); //front window
        rect(car3.x+16,car3.y-30,11,12,2,2,2,2); //middle window
        rect(car3.x+32,car3.y-30,11,12,2,5,2,2); //back window
    fill(255,255,0);
        rect(car3.x+65,car3.y-13,6,8,1,5,5,1); //headlight
    fill(255,255,0,75);
        triangle(car3.x+95,car3.y-20, car3.x+65,car3.y-10, car3.x+95,car3.y); //headlight haze
    car3.x +=3;
    if (car3.x >= width + 100) { //randomizes color when off screen and starts it back on the other side of canvas
        car3.x = -150;
        car3R = random(100);
        car3G = random(100);
        car3B = random(100);
    }
}

For my project this week, I knew that I wanted to have a dynamic city landscape. I love the look of city skylines, and so I decided to use that as my main focus. First, I made a background image in Photoshop and Illustrator to make a flat background that incorporated a gradient sunset, and the buildings. For my randomized, dynamic objects, I incorporated in cars, clouds, and planes. Each of these dynamic objects moves across the screen, and has some property about itself be randomized each time it goes off of the screen. For example, the clouds randomize their color, transparency, and size every time they have made it off of the screen. Below is my initial sketch for what I wanted the final project to look like:

james-generativelandscape

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-10

//2d varying terrain
//draw terrain with ground and trees, sky and sun and moon
//move terrain from left to right - OMITTED THIS STEP
//insert walking man? - OMIT THIS STEP
//when sun sets, sky color is dark blue, moon moves from left to right
//when sun rises, sky color is light blue

var trees = [];
//divide time into two - night and day; different sky color for each
var dayTime;
var timer = 0; //declare a timer variable for day and night variation

function setup() {
    createCanvas(640, 400); 
    // create an initial collection of trees
    for (var i = 0; i < 10; i++){
        var treeX = random(width);
        trees[i] = makeTree(treeX);
    }
    frameRate(10);
}

function draw() {
    var skyColor = color(0, 191, 255);//deep blue sky
    background(skyColor);
    if (dayTime = false){
        skyColor = color(0, 51, 102);//midnight blue
    } else {
    }

    println(dayTime);
    timer++;//increment timer per frame
    
    terrainDisplay();
    dayOrNight();
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
}
//alternate between night and day across the canvas
//cycle twice across the canvas
//first time for day
//second time for night
function dayOrNight(){
    if (timer > 1279){
        timer = 0;
    }
    //daytime
    if ((timer > 0) & (timer < 640)){
        dayTime = true;
        //draw sun
        noStroke();
        fill(253, 184, 19); //yellow orange sun
        //derive y value from circle equation
        //(x-a)2 - (y-b)2 = r2;
        var yTimerLoc = (356 - sqrt(sq(356) - sq(timer - 320)));
        //sun
        ellipse(timer, yTimerLoc, 75, 75);
        // print(yLoc);
    }
    //nightime
    if (timer > 640){
        dayTime = false;
        //draw moon
        noStroke();
        fill(192, 192, 240); //blue moon
        //follow sun path with y from the circle equation
        //(x-a)2 - (y-b)2 = r2;
        //moon
        ellipse(timer, yTimerLoc, 40, 40);
    }
}

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

function removeTreesThatHaveSlippedOutOfView(){
    //FROM ASSIGNMENT NOTES - kept for revision purposes
    // If a tree has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find trees
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the trees
    // we want to keep into a new array.
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the surviving trees
}

function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.007; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

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

function treeDisplay() {
    var treeHeight = 50;
    push();
    translate(this.x, this.y);
    //trunk
    stroke(98, 78, 44);//tree bark color
    strokeWeight(10);
    line(0, treeHeight, 0, -treeHeight);
    //foliage
    noStroke();
    fill(154, 255, 47);//green yellow tree foliage
    ellipseMode(CENTER);
    ellipse(0, -treeHeight, treeHeight * 2, treeHeight * 1.5);
    pop();
}

function makeTree(xTreeLoc) {
    var tree = {x: xTreeLoc,
                y: 300,
                speed: -1,
                move: treeMove,
                display: treeDisplay}
    return tree;
}

//thick strokes in the terrain for depth gradient
function terrainDisplay(){
    strokeWeight(20);
    for (var i = 0; i < 6; i++){
        var g = (158 - (i * 5));
        var yLoc = (height - (20 * i));
        stroke(77, g, 58);
        line(0, yLoc, width, yLoc);
    }
}

I wanted day and night to be part of the landscape. The trees were to be of different height, growing from different locations; the horizon was to be rugged and the foliage was to be more varied. I started out with a big plan, then got bogged down in the details  – the syntax. There are lessons there too, I guess. And perhaps this is not the place for photo-realism.