Project 11: Landscape

peachsketch
var Stars = [];
var Planets = [];
var asteroids = [];
var terrain = [];
var noiseParam = 0;
var noiseStep = 0.007;

function setup() {
    createCanvas(480, 300); 
    // create an initial collection of stars, planets, and asteroids
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        var ry = random(height);
        Stars[i] = makeStar(rx, ry);
    }
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        var ry = random(height);
        Planets[i] = makePlanet(rx, ry);
    }
    for (var i = 0; i < 2; i++){
        var rx = random(width);
        var ry = random(height);
        asteroids[i] = makePlanet(rx, ry);
    }
//set up noise function to create scrolling planet terrain
  for (i = 0; i<=width/5; i++){
    var n = noise(noiseParam);
    var value = map(n, 0,1,height/2, height)
    terrain.push(value)
    noiseParam+= noiseStep
  }

    frameRate(20);
}

function draw() {
    background(0); 

    updateStars();
    removeStars();
    addNewStars(); 

    updatePlanets();
    removePlanets();
    addNewPlanets(); 

    updateasteroids();
    removeasteroids();
    addNewasteroids(); 

mars();
insideSpaceship();
astronaut();
}

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

function removeStars(){
    var StarsToKeep = [];
    for (var i = 0; i < Stars.length; i++){
        if (Stars[i].x + Stars[i].breadth > 0) {
            StarsToKeep.push(Stars[i]);
        }
    }
    Stars = StarsToKeep; 
}


function addNewStars() {
    var newStarLikelihood = 0.2; 
    if (random(0,1) < newStarLikelihood) {
        Stars.push(makeStar(width, random(height)));
    }
}

// method to update position of Star every frame
function StarMove() {
    this.x += this.speed;
}
    
// draw Stars
function StarDisplay() {
    fill(255);  
    push();
    translate(this.x, this.y);
    ellipse(0, this.breadth, this.nsize)
    pop();
}

function makeStar(birthLocationX, birthLocationY) {
    var star = {x: birthLocationX,
                breadth: 50,
                y:birthLocationY,
                speed: -2.0,
                nsize: round(random(1,8)),
                move: StarMove,
                display: StarDisplay}
    return star;
}

//view scrolling landscape from inside spaceship
function insideSpaceship(){
	noStroke()
fill(151, 163, 194)
	rect(0, height/9*7, width, height);
	rect(0,0, width, height/9);
	rect(0,0, width/9, height)
	rect(width/9*8, 0, width, height);
noFill();
strokeWeight(10);
stroke(61, 81, 133)
beginShape();
	vertex(width/9, height/9);
	vertex(width/9*8, height/9);
	vertex(width/9*8, height/9*7);
	vertex(width/9, height/9*7);
	vertex(width/9, height/9);
endShape();
strokeWeight(2);
var lx = 80;
var ly = 10;
var pt = 15
for (i=0; i<4; i++){
	line(lx, 0, lx, height/9)
	line(lx, height/9*7, lx, height)
	lx+=110
	line(0, ly, width, ly)
	ly += 250
	}
line(0, 120, width/9, 120)
line(width/9*8, 120, width, 120)
strokeWeight(7)
	point(width/9 + 10, height/9 +10)
	point(width/9 + 10, height/9*7 - 10)
	point(width/9*8-10, height/9 +10)
	point(width/9*8-10, height/9*7 - 10)
noStroke();
}

//draw astronaut looking out spaceship window
function astronaut(){
fill(255)
	ellipse(70, 230, 100);
	rect(30, 240, 80,100)
fill(143, 150, 168)
	ellipse(85,225, 60)
stroke(143, 150, 168)
strokeWeight(4);
	line(85, 270, 85, height)
noFill()
stroke(181, 199, 247)
	ellipse(85,225, 60)
noStroke();
}

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

function removePlanets(){
    var PlanetsToKeep = [];
    for (var i = 0; i < Planets.length; i++){
        if (Planets[i].x + Planets[i].breadth > 0) {
            PlanetsToKeep.push(Planets[i]);
        }
    }
    Planets = PlanetsToKeep; 
}

function addNewPlanets() {
    var newPlanetLikelihood = 0.01; 
    if (random(0,1) < newPlanetLikelihood) {
        Planets.push(makePlanet(width, random(height)));
    }
}

function PlanetMove() {
    this.x += this.speed;
}
    
function PlanetDisplay() {
    fill(this.clr);  
    push();
    translate(this.x, this.y);
    ellipse(0, this.breadth, this.nsize)
    pop();
}

function makePlanet(birthLocationX, birthLocationY) {
    var Planet = {x: birthLocationX,
                breadth: 50,
                y:birthLocationY,
                clr: color(random(1, 255), random(1, 255), random(1, 255)),
                speed: -1.0,
                nsize: round(random(10,50)),
                move: PlanetMove,
                display: PlanetDisplay}
    return Planet;

}

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

function removeasteroids(){
    var asteroidsToKeep = [];
    for (var i = 0; i < asteroids.length; i++){
        if (asteroids[i].x + asteroids[i].breadth > 0) {
            asteroidsToKeep.push(asteroids[i]);
        }
    }
    asteroids = asteroidsToKeep;
}

//asteroids appear the least frequently - "surprise element"
function addNewasteroids() {
    var newasteroidLikelihood = 0.005; 
    if (random(0,1) < newasteroidLikelihood) {
        asteroids.push(makeasteroid(width, random(height)));
    }
}

//make the asteroid move in both x direction and y direction
function asteroidMove() { 
    this.x += this.speed;
    this.y += this.speedy;
}
    
// draw asteroids
function asteroidDisplay() {
    fill(random(255), random(255), random(255));  
    push();
    translate(this.x, this.y);
    ellipse(0, 5, this.nsize)
    beginShape();
    	vertex(5,5);
    	vertex(15,5);
    	vertex(9,7);
    	vertex(15,10);
    	vertex(9,13);
    	vertex(10,15);
    	vertex(5,15);
    endShape();
    pop();
}

function makeasteroid(birthLocationX, birthLocationY) {
    var asteroid = {x: birthLocationX,
                breadth: 50,
                y:birthLocationY,
                speed: -5.0,
                speedy: -1.0,
                nsize: 10,
                move: asteroidMove,
                display: asteroidDisplay}
    return asteroid;
}
//generate landscape of planet in foreground, placed low on screen so low frequency of apearance
function mars (){
    var n = noise(noiseParam);
    var value = map(n, 0,1,height/5*3, height)
    terrain.push(value)
    terrain.shift();
    noiseParam+= noiseStep
  for (i = 0; i<=width/5; i++){
    noStroke();
    fill(222, 106, 11)
    beginShape();
    vertex(0, height)
    vertex(width, height)
    vertex(i*5, terrain[i])  
    endShape();
  if (terrain[i] < terrain[i+1] & terrain[i] < terrain[i-1]){
  drawAlien(i)
  }
}
}

  function drawAlien(i){ 
  fill(0,255,0)

  ellipse(i*5, terrain[i]-10, 10);
  stroke(0,255,0)
  strokeWeight(2);
    line(i*5,terrain[i]-20, i*5, terrain[i]-10)
   strokeWeight(10)
    ellipse(i*5, terrain[i]-5, 5)
   noStroke()
    fill(255)
   ellipse(i*5, terrain[i]-5, 8)
   fill(0)
     ellipse(i*5, terrain[i]-5, 5)

}

For this assignment, I had a lot of fun deciding what I wanted my landscape to be. However, I found that there were a lot of components that I wanted to introduce, but wasn’t able to efficiently generate them in a concise amount of code. I ended up utilizing methods from different classes to generate different aspects of my landscape – for example, objects in the background similar to what was provided in the sample code, as well as usage of the noise function for objects in the foreground. I was partially inspired by the game Among Us as well as a music video called “Where the Sea Sleeps.”

Project 11: Generative Landscape

sketch
var clouds = [];
var bikeImage = [];
var bike = [];
var terrainCurve = 0.01;
var terrainSpeed = 0.001;


function preload(){
    var filenames =[];
    filenames[0] = "https://i.imgur.com/DSPjyoM.png";
    filenames[1] = "https://i.imgur.com/kGGBLDh.png";
    filenames[2] = "https://i.imgur.com/v9RMtPT.png";
    filenames[3] = "https://i.imgur.com/ZUC5xZ2.png";
    for(var i = 0; i < filenames.length; i++){
      bikeImage.push(loadImage(filenames[i]));
    }
}

function setup() {
    createCanvas(480,480); 
    //clouds 
    for (var i = 0; i < 9; i++){
        var ccloud = random(width);
        clouds[i] = drawCloud(ccloud);
    }
    frameRate(11);
    imageMode(CENTER);
    //bike
    var b = makeCharacter(240, 350);
    bike.push(b);
}

function draw() {
    sky(0, 0, width, height);
    DisplayClouds();
    removeClouds();
    newClouds();
    ground();
    for (var i = 0; i < bike.length; i++) { 
        var bb = bike[i];
        bb.stepFunction();
        bb.drawFunction();
    }
}

function sky(x, y, w, h) { 
    //sky
    var Blue;
    var Pink;    
    Blue = color(114, 193,215);
    Pink = color(253, 209, 164);
    for (var i = y; i <= y + h; i++) {
        var ssky = map(i, y, y + h, 0, 1.1);
        var cco = lerpColor(Blue, Pink, ssky);
        stroke(cco);
        line(x, i, x + w, i);
    }
    //mountains
    beginShape();
    stroke(1, 33,92);
    strokeWeight(200);
    for (var x = 0; x < width; x++){
        var tt = (x * terrainCurve) + (millis() * terrainSpeed);
        var mm = map(noise(tt), 0,1, 110, 255);
        vertex(x, mm + 180); 
    }
    endShape();
}

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

function ground(){
    beginShape(); 
    noStroke();
    fill(18,12,46);
    rect(0,400,width,80);
    endShape();
}

function cloudDisplay(){
    noStroke(); 
    var floorH = 21;
    var cloudH = this.nFloors * floorH; 
    fill(250,50); 
    push();
    translate(this.x, height - 95);
    ellipse(95, -cloudH, this.breadth, cloudH / 2);
    pop();
    push();
    fill(250,80)
    translate(this.x, height - 220);
    ellipse(95, - cloudH, this.breadth/1.5, cloudH);
    pop();
}

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

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

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

function newClouds(){ 
//random probability
    var newP = 0.01; 
    if (random(0,0.4) < newP) {
        clouds.push(drawCloud(width));
    }
}
    


function drawCloud(xx) {
    var cha = {x: xx,
                breadth: random(95, height),
                speed: -random(1,4),
                nFloors: round(random(4,8)),
                move: cloudMove,
                display: cloudDisplay}
    return cha;
}

function makeCharacter(cx, cy) {
    ccha = {x: cx, y: cy,
         imageNumber: 0,
         stepFunction: characterStep,
         drawFunction: characterDraw
        }
    return ccha;
}
function characterStep() {
    this.imageNumber++;
    if (this.imageNumber == 4) {
        this.imageNumber = 0;
    }
}
function characterDraw() {
    image(bikeImage[this.imageNumber], this.x, this.y,120,120);
}

For this Deliverable 11 project, I tried to collaborate on what I’ve learned from deliverable 9, using preloads for calling image animations and generating landscapes from deliverable 11. I also tried to show the difference in the speed by giving a certain frameRate for the rider and background mountains. Clouds are displayed with low opacity and different speed so that it shows how it has a different relationship with elements on the ground(mountains and humans). It was hard for me to figure out having two functions of makeCharacter because I had two figures to move: character, and the elements in the sky.

Project 11

sketchDownload
var x = 0;
var backgroundValue = [];
var noiseParam = 0;
var noiseStep = 0.1;


function setup() {
    createCanvas(480, 400);
    frameRate(15);
    var ilength = (width/5) + 1
    for (i = 0; i < ilength; i++) {
    	var n = noise(noiseParam);
    	var value = map(n, 0, 1, 0, height);
    	backgroundValue.push(value);
    	noiseParam += noiseStep
    } 
}

function draw() {
	var size = random(50, 150);
	background(166, 238, 255);
	stroke(160, 160, 255);
	strokeWeight(10);
	backgroundValue.shift();
	var x2 = 0;
	var ilength = (width/5) + 1
	var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    backgroundValue.push(value);
    noiseParam += noiseStep
    for (i = 0; i < ilength; i++) {
		beginShape();
		curveVertex(x2, backgroundValue[i]);
		curveVertex(x2, backgroundValue[i]);
		curveVertex(x2, height);
		curveVertex(x2 + 5, backgroundValue[i + 1]);
		curveVertex(x2 + 5, backgroundValue[i + 1]);
		endShape(CLOSE);
		x2 += 5
	}
	noStroke();
	fill(color(random(255), random(255), random(255)));
    coral(x, size);
    x += 1
    if (x > 480) {
        x = 0;
    }
}

function coral(x, size) {
    beginShape();
    curveVertex(x, 400);
    curveVertex(x, 400);
    curveVertex(x + 5, size*3);
    curveVertex(x - 20, size*2);
    curveVertex(x + 5, size*2 - 5);
    curveVertex(x - 10, size);
    curveVertex(x, size + 5);
    curveVertex(x + 10, size*2 - 20);
    curveVertex(x + 20, size*3);
    curveVertex(x + 20, size*4);
    curveVertex(x + 70, size);
    curveVertex(x + 80, size*2);
    curveVertex(x + 50, 400);
    curveVertex(x + 50, 400);
    endShape(CLOSE);
}

Project 11: Landscape

For this week’s project, I really wanted to get away from the craziness of the semester and portray the calming view from the beach house my cousins and I used to go to. I have really vivid memories of sitting on the porch, eating fruit while watching the fireflies and water wade in and out at nighttime: something I wish I could be doing right now.

sketchDownload
// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project 11

// set global variables
var landSpeed = 0.001;
var landFlow = 0.005;

var firefly = [];

var fWidth = 50;
var fLeft = 27 - fWidth;

// load in images for background
function preload() {
	feet = loadImage('https://i.imgur.com/VLK5brn.png');
	fruit = loadImage('https://i.imgur.com/NNwEjtA.png');
	cloud = loadImage('https://i.imgur.com/m6zIO0u.png');
}

function setup() {
    createCanvas(400, 480);
	background(29, 51, 81);
    imageMode(CENTER);

    // create fireflies at random locations on canvas
    for (var i = 0; i < 7; i++) {
    	var xLocation = random(20, 380);
    	var yLocation = random(0, 360);
    	firefly[i] = makeFireflies(xLocation, yLocation);
    }
}

function draw() {
	background(29, 51, 81);

	image(cloud, width/2, height/2-65, width-20, height-20); // background cloud image

	// blue water
	fill(147, 169, 209);
	noStroke();
	rect(0, 200, 400, 200);

    // call upon functions to draw land, foreground, and update fireflies
	land();
	createForeground();
	updateFirefly();
}

// draws front foreground porch, feet, and fruit dish
function createForeground() {
	fill(188, 158, 130);
	strokeWeight(1);
	stroke(124, 87, 61);

	// create porch base
	rect(0, 360, 400, 120);
	rect(0, 350, 400, 10);
	rect(0, 0, 30, 355);
	rect(370, 0, 30, 355);

	// insert self-drawn images of feet laying on porch and fruit
	image(feet, 100, 405, 150, 150);
	image(fruit, 300, 410, 125, 125);
}

// draws undulating sand landscape
function land() {
	fill(249, 228, 183);
	stroke(255);
	strokeWeight(8);

	beginShape();
	vertex(0, height);

	// undulating line of sandscape
	for (var x = 0; x < width; x++) {
		var a = (x*landFlow) + (millis()*landSpeed);
		var y = map(noise(a), 0, 1, height*12/20, height*11/20);
		vertex (x, y);
	}

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

// draws fireflies
function drawFirefly() {
	fill(255, 245, 0, 100);
	noStroke();
	push();

	translate(this.x1, this.y1); // allows fireflies to move depending on function
	scale(this.fireflySize); // allows fireflies to be scalable depending on make function
	ellipse(50, 50, 10, 10);
	ellipse(50, 50, 5, 5);

	pop();
}

// summons fireflies at given location with variables
function makeFireflies(xlocation, ylocation) {
	var makeFirefly = {x1: xlocation,
					   y1: ylocation,
					   fireflySize: random(0.25, 2),
					   speed: -1,
					   move: moveFirefly,
					   draw: drawFirefly}
	return makeFirefly;
}

// makes fireflies move across the page
function moveFirefly() {
	this.x1 += this.speed;
	if (this.x1 <= fLeft) {
		this.x1 += width - fLeft;
	}
}

// updates the array of fireflies
function updateFirefly() {
	for (i = 0; i < firefly.length; i++) {
		firefly[i].move();
		firefly[i].draw();
	}
}

Here is the main sketch that I did for this project:

Project 11 Generative Landscape

Planetscape?

sketch
//tjchen 
// project landscape 

var stars=[]; // array for circles 
var streaks=[]; // array for streaks
var speed = 3; // change for how zoom
// color initialization 
var r; 
var g;
var b;
// rate of change fo color 
var dr;
var dg;
var db;

function setup() {
    createCanvas(480, 480);
    //initalize objects
    for(i=0; i<=500; i++ ){
        var s =makeStar();
        var st=makeStreak();
        stars.push(s); 
        streaks.push(st);
    }
    //background color setup
    r = (random(255));
    g = (random(255));
    b = (random(255));
    dr = (random(-5,5));
    db = (random(-5,5));
    dg = (random(-5,5));
    }


function draw() {
    background(r,g,b);
    //set it up from the middle 
    translate(width/2,height/2);
    //draw the stars and streaks 
    for(i=0; i<500; i++){
        var s = stars[i];
        s.drawstar();
        s.updatestar()

        var st = streaks[i];
        st.drawstreak();
        st.updatestreak();
}
// color update 
    if (r>255 || r<0){
        dr= -dr;
    }
    if (g>255 || g<0){
        dg= -dg;
    }
    if (b>255 || b<0){
        db= -db;
    }
    r+=dr;
    g+=dg;
    b+=db;

}

//star construction 

function makeStar(){
    var star={
        x:random(-width,width),
        y:random(-height,height),
        z:random(width), // constant ratio for zoom 
        c:color(random(255),random(255),random(255)),
        drawstar: stardraw,
        updatestar: starupdate,
    }
    return star; 
}

function stardraw(){
    noStroke();
    fill(this.c);
    // draw stars but mapped to z 
    var dx = map(this.x/this.z,0,1,0,width);
    var dy = map(this.y/this.z,0,1,0,width);
    // map it for sizze increase 
    var r = map(this.z,0,width,20,0);  
    ellipse(dx,dy,r);
}

function starupdate(){
    this.z-=speed;
    // reset
    if (this.z<1){
        this.z = width;
        this.x = (random(-width,width));
        this.y = (random(-height,height));
    }

}

// streak construction 
function makeStreak(){
    var streak={
        x:random(-width,width),
        y:random(-height,height),
        z:random(width),
        c:color(random(255),random(255),random(255),50),
        pz: this.z, // previous location of z 
        drawstreak: streakdraw,
        updatestreak: streakupdate,
    }
    return streak; 

}

function streakdraw(){
    strokeWeight(5);
    stroke(this.c);
    var dx = map(this.x/this.z,0,1,0,width);
    var dy = map(this.y/this.z,0,1,0,width);
    var px = map(this.x/this.pz,0,1,0,width);
    var py = map(this.y/this.pz,0,1,0,width); 
    //draw line 
    line(dx,dy,px,py);
}

function streakupdate(){
    this.z-=speed;
    // reset 
    if (this.z<1){
        this.z = width;
        this.x = (random(-width,width));
        this.y = (random(-height,height));
        this.pz = this.z;
    }

}

Project-11: Landscape ~ The Up Movie

For my project this week, I wanted to make something that wouldn’t have the most common approach among the class. I figured that a lot of people would look to do a horizontal landscape, where there is a lot of movement with the X position. Therefore, I decided to do the house from Up but moving vertically!

I referred to images of the actual house from the Up animation to try to recreate it with shapes. This was not too difficult because I have gotten used to recreating specific images through layering shapes in p5js. However, the most difficulty I had with this assignment was with making the clouds reappear after they disappear off of the canvas. (I actually had to go to OH for a while for this.. thanks Peter for the help.)

One thing I wish I could have done differently though, is thinking through the concept more. Once I had basically established all of the objects I made, and had movement, I realized that by making the house go “into the sky” there wasn’t much more detail I could add other than birds. I guess with doing things horizontally, there are a lot more realistic features you could add that would make sense (such as mountains or trees).

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//Section B
//anniekim-11-project

var balloon = []; 
var cloud = [];
var bird = [];
var a = 430; //height at which ground is started

function setup() {
    createCanvas(340, 480);
    //create an initial collection of clouds:
    for (var j = 0; j < 15; j ++) {
    	cloud[j] = makeCloud();
    } 
    //create initial collection of balloons:
    for (var i = 0; i < 100; i ++) {
   		balloon[i] = makeBalloon();
    }
    //create initial collection of birds:
    for (var k = 0; k < 5; k ++) {
    	bird[k] = new Object();
    	//set its properties
    	bird[k].x = random(-10, 340);
    	bird[k].y = random(0, 250);
    	bird[k].dx = random(-2, 2);
    	bird[k].dy = random(-2, 2);
    }
    frameRate(6);
}

function draw() {
	background(143, 214, 236); //light blue sky color
	drawGround();
	updateAndDisplayClouds();
	for (var i = 0; i < 4; i ++) {
		drawBirds(bird[i]);
		bird[i].x += bird[i].dx;
	}
	updateAndDisplayBalloons();
	removeCloudsThatHaveSlippedOutOfView();
	addNewCloudsWithSomeRandomProbability();
	drawHouse();
}

function updateAndDisplayBalloons() { 
//will update and place the balloons:
	for (var i = 0; i < 100; i ++) {
		balloon[i].move();
		balloon[i].display();
	}
}

function updateAndDisplayClouds() {
	//update the cloud's positions and display them:
	for (var i = 0; i < 15; i ++) {
		cloud[i].move();
		cloud[i].display();
		cloud[i].y += cloud[i].dy;
	}
}

function removeCloudsThatHaveSlippedOutOfView() {
	//will remove clouds that are off the canvas and readd in other helper function
	var cloudsToKeep = [];
	for (var i = 0; i < cloud.length; i ++) {
		if (cloud[i].y < height) {
			cloudsToKeep.push(cloud[i]);
		}
	}
	cloud = cloudsToKeep;
}

function addNewCloudsWithSomeRandomProbability() {
	//with a very tiny probability, add a new cloud to the end:
	var newCloudLikelihood = 0.35;
	if (random(0,1) < newCloudLikelihood) {
		cloud.push(makeCloud());
	}
}

function cloudMove() {
	this.y += this.dy;
	this.x += this.dx;
}

function cloudDisplay() {
	fill(255);
	noStroke();
	circle(this.x, this.y, 40);
	circle(this.x - 25, this.y - 2, 13);
	ellipse(this.x - 35, this.y + 10, 30, 20);
	circle(this.x - 20, this.y + 12, 25);
	ellipse(this.x + 20, this.y + 10, 30, 20);
}

function balloonDisplay() {
	fill(this.color);
	stroke(this.color);
	ellipse(this.x, this.y, 14, 19);
	stroke(255, 100);
	line(this.x, this.y + 9.5, 170, 315);
}

function balloonMove() {
	this.x += this.dx;
	if (this.x > 250 || this.x < 100) {
		this.dx = -this.dx;
	}
}

function makeCloud() {
	var cld = 
	{x : random(-50, 370),
	y : random(-100, 240),
	dy : 2,
	dx : 1,
	move : cloudMove,
	display : cloudDisplay}
	return cld;
}

function makeBalloon() {
	var bln = 
	{x : random(100, 250),
	y : random(100, 230),
	dx : random(-3, 3),
	color : color(random(130, 255), random(130, 255), random(130, 255)),
	move : balloonMove,
	display : balloonDisplay}
	return bln;
}

function drawHouse() {
	noStroke();
	//ROOF OF HOUSE
	fill(111, 95, 137); //purple color
	quad(120, 315, 220, 315, 240, 360, 100, 360);
	//PART OF HOUSE
	fill(114, 159, 215); //blue color
	rect(120, 360, 100, 20);
	//PART OF HOUSE
	fill(247, 214, 215); //pink color
	rect(120, 380, 100, 50);
	//POINTY PART OF ROOF AND WINDOWS
	fill(241, 234, 150); //yellow color
	rect(130, 310, 20, 20);
	triangle(130, 310, 150, 310, 140, 300); //left window
	triangle(160, 360, 210, 360, 185, 270); 
	rect(160, 360, 50, 10);
	//BAY WINDOW OF HOUSE
	fill(141, 196, 91); //green color
	rect(160, 370, 50, 60);
	triangle(160, 430, 176, 430, 176, 433);
	triangle(192, 433, 192, 430, 210, 430);
	fill(161, 216, 111);
	rect(176, 370, 17, 63);
	//FRONT DOOR
	fill(118, 100, 88); //brown color
	rect(135, 395, 20, 35);
	stroke(50, 40, 20);
	noFill();
	rect(137.5, 398, 15, 30);
	line(145, 398, 145, 428);
	line(137.5, 413, 152.5, 413);
	//WINDOWS
	//top left window
	fill(200, 222, 233); //light blue color
	stroke(114, 159, 215); //darker light blue color
	square(135, 315, 10);
	line(140, 315, 140, 325);
	line(135, 320, 145, 320);
	//right window
	rect(175, 325, 20, 30);
	line(175, 345, 195, 345);
	//bay window 1
	rect(162.5, 390, 10, 20);
	rect(179.5, 392, 10, 20);
	rect(196.5, 390, 10, 20);
}

function drawGround() {
	fill(126, 182, 128);
	noStroke();
	rect(0, a, 340, 50);
	//ground "take-off"
	a += 1;
}

function drawBirds(b) {
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(b.x, b.y, 25, 20, PI + QUARTER_PI, 0, OPEN);
	arc(b.x + 24, b.y, 25, 15, PI, QUARTER_PI - HALF_PI, OPEN);
	b.x += b.dx;
	b.y += b.dy;
	//if bird goes off canvas, it'll come back opposite
	if (b.x > width + 25 || b.x < -25) {
		b.dx = -b.dx;
		b.dy = -b.dy;
	}
}


































Here is the reference image of the house from Up that I was using. Obviously I did not include all the small details of the house, but tried my best to make it as similar and recognizable as possible.
I started by creating this house first in a helper function, and this is what my canvas looked like before I added the objects.
Here is how I was drawing out my work and writing it out. I usually like to match all the colors I want first and then take note of what the RGB combo is.

Project 11 Landscape

sketch
sketch for the composition
//Jae Son, section C 

var bike;
var clouds = [];
var buildings1 = [];
var buildings2 = [];
var lines = [];

function preload(){
  bike = loadImage("https://i.imgur.com/NCg0ju7.png");
}

function setup() {
    createCanvas(400, 300);
    background(11,92,146);
    var cloudn = 0;
    var building1n = 0;
    var building2n = 0;
    var linesn = 0;
    for (var i = 0; i < 500; i++) {
      clouds[i] = createCloud(cloudn);
      cloudn += 180;
      buildings1[i] = createBuilding1(building1n);
      building1n += 140;
      buildings2[i] = createBuilding2(building2n);
      building2n += 110;
      lines[i] = createlines(linesn);
      linesn += 400;
    }
    frameRate(15);
}

function draw() {
  imageMode(CENTER);
  background(153,225,254);
  noStroke();
  //cloud displayed
  displayCloud();
  //back layer buildings displayed
  displayBuilding1();
  //front layer buildings displayed
  displayBuilding2();
  //green ground
  fill(98,142,62);
  rect(0,209,width,91);
  //dark gray road
  fill(31,42,45);
  rect(0,238,width,62);
  //white line on the road displayed
  displaylines();
  //person on the bike
  image(bike,200,228,125,83);
}

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

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

function createCloud(cloudx){
  var cloud = {x: cloudx,
               cloudy: random(20,70), //so the y coordinate of the clouds vary
               cloudw: random(28,42), //so the size of the clouds vary
               speed: -3.0,
               move: moveCloud,
               display: drawCloud
               }
  return cloud;
}

function drawCloud(){
  noStroke();
  push();
  fill(255);
  ellipse(this.x-20,this.cloudy,this.cloudw,this.cloudw);
  ellipse(this.x,this.cloudy,this.cloudw,this.cloudw);
  ellipse(this.x+20,this.cloudy,this.cloudw,this.cloudw);
  pop();
}

//back layer buildings
function displayBuilding1(){
  for (var i = 0; i < buildings1.length; i++){
    buildings1[i].move();
    buildings1[i].display();
  }
}

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

function createBuilding1(buildingx){
  var building1 = {x: buildingx,
               building1ay: 106,
               building1aw: 40,
               building1ah: 133,
               building1by: 91,
               building1bw: 54,
               building1bh: 126,
               building1cy: 117,
               building1cw: 48,
               building1ch: 140,
               speed: -8.5,
               move: moveBuilding1,
               display: drawBuilding1
               }
  return building1;
}

function drawBuilding1(){
  noStroke();
  push();
  fill(119,181,183);
  rect(this.x,this.building1ay,this.building1aw,this.building1ah);
  rect(this.x+40,this.building1by,this.building1bw,this.building1bh);
  rect(this.x+92,this.building1cy,this.building1cw,this.building1ch);
  pop();
}

//front layer buildings
function displayBuilding2(){
  for (var i = 0; i < buildings2.length; i++){
    buildings2[i].move();
    buildings2[i].display();
  }
}

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

function createBuilding2(building2x){
  var building2 = {x: building2x,
               building2y: random(100,140),
               building2w: random(30,50),
               building2h: random(100,145),
               speed: -6.5,
               move: moveBuilding2,
               display: drawBuilding2
               }
  return building2;
}

function drawBuilding2(){
  noStroke();
  push();
  //building structure
  fill(156,218,191);
  rect(this.x,this.building2y,this.building2w,this.building2h);
  //windows (strips) on the building
  fill(130,182,187);
  rect(this.x+this.building2w/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  rect(this.x+this.building2w*3/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  rect(this.x+this.building2w*5/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  pop();
}

//white lines on the road
function displaylines(){
  for (var i = 0; i < lines.length; i++){
    lines[i].move();
    lines[i].display();
  }
}

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

function createlines(linesx){
  var lines = {x: linesx,
               linesy: 273,
               linesw: 73,
               linesh: 5,
               speed: -7.0,
               move: movelines,
               display: drawlines
               }
  return lines;
}

function drawlines(){
  noStroke();
  push();
  fill(255);
  for (i = 0; i < 3; i++) {
    fill(255);
    rect(this.x+135*i,this.linesy,this.linesw,this.linesh);
  }
  pop();
}

Project -11

I decided to make a mountain landscape with birds flying over. In the front is a field then there are two mountain ranges with a setting sun behind. The hardest part for me was working with the objects and understanding the example code so that I could apply it for myself.

landscapeDownload
var mtnDetail = 0.005; // detail in tall mountain 
var mtnSpeed = 0.0001; // speed of mountains
var mtnDetail2 = 0.007; //detail of short mountain
var birds = []

function setup() {
    createCanvas(480, 400);
    for (var i = 0; i < 5; i ++){
        var rx = random(width);
        var ry = random(10, 50)
        birds[i] = makeBird(rx, ry);
    }
    frameRate(15);
}

function draw() {
	background(153, 153, 204);
    sun();
	makeMtns();
    field();
    updateBird();
    removeBird();
    addBird();	
}

function makeMtns() {
    fill(138, 118, 139);
    stroke(133, 114, 137);
    strokeWeight(1);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * mtnDetail) + (millis() * mtnSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
    //second mountain
    beginShape();
    fill(175, 143, 178);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * mtnDetail2) + (millis() * mtnSpeed);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

function field(){
    stroke(118, 139, 121);
    fill(122, 145, 132);
    rect(0, 300, width, 100);
}

function sun(){
    // sun ray inner
    noStroke();
    fill(229, 187, 161, 60);
    ellipse(240, 150, 225, 225);
    //sun ray outer
    fill(229, 187, 161, 60);
    ellipse(240, 150, 300, 300);
    // sun
    stroke(198, 115, 76);
    strokeWeight(1);
    fill(184, 106, 70 );
    ellipse(240, 150, 175, 175);
}
//bird object

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

function removeBird(){
    var keepBirds=[];
    for (var i = 0; i < birds.length; i++) {
        if (birds[i].x < width) {
            keepBirds.push(birds[i]);
        }
    }
    birds = keepBirds;
}

function addBird(){
    //little probability
    var newBirdLikelihood = 0.007; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(15, 15));
    }
}

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

function displayBird(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, height-300);
    //top wing
    triangle(0, 0, 5, 0, -2, -7);
    //bottom wing
    triangle(0, 0, 5, 0, 2, 7);
    pop();
}

function makeBird(birthLocationX, birthLocationY){
    var bird = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveBird,
                display: displayBird};
    return bird;
}

Project 11: Landscape

sketchDownload
var sushi=["https://i.imgur.com/O6Q4Nml.png", "https://i.imgur.com/oi1loKM.png", "https://i.imgur.com/dGGroAU.png", "https://i.imgur.com/ycZcW4p.png"];

var sushi1;
var sushi2;
var sushi3;
var sushi4;

var plate=[];
var inChopstick=false;
var nSushi=100;
var x=80;
var speed=7;


function preload(){
    sushi1=loadImage(sushi[0]);
    sushi2=loadImage(sushi[1]);
    sushi3=loadImage(sushi[2]);
    sushi4=loadImage(sushi[3]);
}

function setup() {
    createCanvas(480, 360);
    var n = 0;
    for (var i = 0; i < 1000; i++){ //continually creates (1000) plates of sushi 
        plate[i] = makePlate(n);
        n -= 200;
    }
    frameRate(15);
}

function draw() {
    //draws conveyor belt
    background(0, 0, 70);
    noStroke();
    fill(100);
    rect(0, 0, 480, 250);
    fill(90);
    rect(0, 250, 480, 30);

    //draws plate + soysauce
    fill(215);
    ellipse(500, 400, 400, 200);
    ellipse(250, 340, 100, 75);
    fill(51, 25, 0);
    ellipse(250, 345, 80, 60);

    plateShow();

    //draws chopsticks
    fill(102, 51, 0);
    quad(mouseX-50, mouseY-2, mouseX-45, mouseY, mouseX-55, mouseY+200, mouseX-62, mouseY+198);
    quad(mouseX+50, mouseY-2, mouseX+45, mouseY, mouseX+55, mouseY+200, mouseX+62, mouseY+198);
}

function plateGo(){
    this.x+=this.dx;
}

function plateShow(){
    for(var i = 0; i < plate.length; i++){
        plate[i].go();
        plate[i].show();
        plate[i].mP();
    }
}

function makePlate(px){
    var plate={x: px, y:150, w:150, h:100,
    dx: 7, go:plateGo, show:drawPlate,
    sushi: random([sushi1, sushi2, sushi3, sushi4]),
    mP: mousePressed
    }
    return plate;
}

function drawPlate(){
    push();
    fill(215);
    noStroke();
    ellipse(this.x, this.y, this.w, this.h);
    stroke(185);
    noFill();
    ellipse(this.x, this.y, 0.75*this.w, 0.75*this.h);

    if (inChopstick==false){
        if (this.sushi==sushi1){
            image(sushi1, this.x-50, 95);
        }
        if (this.sushi==sushi2){
            image(sushi2, this.x-50, 95);
        }
        if (this.sushi==sushi3){
            image(sushi3, this.x-50, 95);
        }
        if (this.sushi==sushi4){
            image(sushi4, this.x-50, 95);
        } 
    }

    if (inChopstick==true){
        if (this.sushi==sushi1){
            image(sushi1, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi2){
            image(sushi2, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi3){
            image(sushi3, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi4){
            image(sushi4, mouseX-50, mouseY-50);
        } 
    }
    pop();
}

function mousePressed(){
    if (inChopstick==false){
        if (dist(this.x, this.y, mouseX, mouseY)<=50){
            inChopstick=true;
            print("false");
        }
    }
    if (inChopstick==true){
        if (dist(500, 400, mouseX, mouseY)<=50){
            inChopstick=false;
            print(true);
        }
    }
}

I decided to make a sushi conveyor belt for my generative landscape. The sushi pieces were drawn by me in ProCreate on my iPad.

The drawings of sushi I made
my sketch

After I figure out what I was going to do, I created an object for the sushi and plate to move across the screen on the belt. Then I made an array of the plates so they would always regenerate. I made chopsticks the same width apart as the pieces of sushi and then I called mousePressed within the function so you should take the chopsticks and move them over the sushi piece to pick all of them up. When you bring the chopsticks to the corner where the plate is, the sushi regenerates on the plate like you ate it.

Project 11 – Generative Landscape

For this project, I wanted to create a simple winter landscape, because Christmas is coming and it’s quite exciting. Take a close look at this landscape and close your eyes and imagine that you are Santa Claus on a nice warm sled on your way to California.

I used the noise function to generate the mountains, and objects to create snowflakes and buildings.

sketch
var buildings = [];
var mountains = [];
var noiseParam = 0;
var noiseStep = 0.03;
let snowflakes = [];


function setup() {
    createCanvas(400, 240); 
    
    for(var i = 0; i < width/5; i++){
        var n = noise(noiseParam);
        mountains[i];
        var value = map(n, 0, 1, 0, height);
        mountains.push(value);
        noiseParam += noiseStep;
    }
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(25);
}


function draw() {
    background(23, 39, 174); 
    noStroke();
    fill(187, 223, 250);
    ellipse(200, 70, 70);
    fill(255, 30);
    cloud(40, 47, 1);
    cloud(275, 15, 0.8);
    cloud(380, 70, 1.5);

    let t = frameCount / 20; // update time

     // create a random number of snowflakes each frame
  for (let i = 0; i < random(5); i++) {
    snowflakes.push(new snowflake()); // append snowflake object
  }

  // loop through snowflakes with a for..of loop
  for (let flake of snowflakes) {
    flake.update(t); // update snowflake position
    flake.display(); // draw snowflake
  }
}

// snowflake class
function snowflake() {
  // initialize coordinates
  this.posX = 0;
  this.posY = random(-50, 0);
  this.initialangle = random(0, 2 * PI);
  this.size = random(2, 5);

  // radius of snowflake spiral
  // chosen so the snowflakes are uniformly spread out in area
  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {
    // x position follows a circle
    let w = 0.6; // angular speed
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    // different size snowflakes fall at slightly different y speeds
    this.posY += pow(this.size, 0.5);

    // delete snowflake if past end of screen
    if (this.posY > height) {
      let index = snowflakes.indexOf(this);
      snowflakes.splice(index, 1);
    }
  };

  this.display = function() {
    ellipse(this.posX, this.posY, this.size);
  };

    //for animating the mountains
    mountains.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    mountains.push(value);
    noiseParam += noiseStep;

    //for mountains
    beginShape();

    for(var i = 0; i < width/5; i++){
        //filling the mountain with color
        fill(44, 67, 184);
        noStroke();
        //vertex funciton to fill the mountain
        vertex((i * 5), mountains[i]); 
        vertex((i + 1) * 5, mountains[i + 1]);   
        vertex(width/2, 10000000); 
    }
    endShape(CLOSE);
   
    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
}


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; // remember the surviving buildings
}


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));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(105, 135, 213); 
    noStroke(); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    fill(151, 186, 236);
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 3);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    fill(68, 91, 193);
    rect(0, height-50, width, height-50); 

}

function cloud(x, y, size) {
    fill(68, 91, 193);
    noStroke();
    arc(x, y, 25 * size, 20 * size, PI + TWO_PI, TWO_PI);
    arc(x + 10, y, 25 * size, 45 * size, PI + TWO_PI, TWO_PI);
    arc(x + 25, y, 25 * size, 35 * size, PI + TWO_PI, TWO_PI);
    arc(x + 40, y, 30 * size, 20 * size, PI + TWO_PI, TWO_PI);
}