Category: Project-11-Landscape

sketch

//Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project 11

var palms = [];

function setup() {
  createCanvas(480, 480);
  frameRate(10);
  //for loop to randomize
  for(i=0;i <10;i++) {
    var palmX = random(width);
    var palmY = random(20, 40);
    palms[i] = makePalm(palmX, palmY);
  }
}

function draw() {
  background("#00266E");
  //moon
  fill("#F7E979");
  ellipse(360, 80, 65, 65);
  noStroke();
  fill("#00266E");
  ellipse(340, 70, 45, 45);
  
  //beach
  fill("#AD9C5E");
  ellipse(240, 275, 580, 100);
  //ocean
  fill("#2D84BA");
  rect(0, 280, 480, 200);
  //ocean ripples
  noStroke(); 
  fill(103,202,221, 150); 
	for(var i = 0; i < 3; i ++){
		var wavex = random(-240, 250); 
		var wavey = random(8, 250); 
		var w = random(30, 60); 
		var h = random(3, 5); 

ellipse(width*0.7 + wavex, height * 0.7 + wavey, w, h);
  }
  
  fill(117, 223, 215, 150);
    for(var k = 0; k < 2; k ++){
		var w2x = random(-270, 170); 
		var w2y = random(-8, 170); 
		var w2 = random(30, 60); 
		var h2 = random(3, 5); 
ellipse(width*0.7+ w2x, height *0.7 +w2y, w2, h2);
  }
  
  updatePalm();
}

function updatePalm() {
  for(j=0;j<palms.length;j++){
    palms[j].move();
    palms[j].draw();
    
  }
}

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

function drawPalm() {

  push();
  translate(this.x, this.y);
  stroke("#694000");
  fill("#884400"); 
  rect(150, 160, 13, 68);
  stroke("#3C5E00");
  fill("green");
  ellipse(150, 155, 40, 13);
  ellipse(140, 150, 43, 13);
  ellipse(170, 150, 43, 13);
  ellipse(140, 160, 43, 13);
  ellipse(170, 160, 43, 13);
  pop();
}

function makePalm(plocationX, plocationY) {
  var palmtree = {x:plocationX,
                  y:plocationY,
                  breadth:10, 
                  palmW:random(50, 80),
                  palmH: random(10, 15), 
                  speed:-15, 
                  move: movePalm,
                  draw: drawPalm}
  return palmtree;
}

I wows inspired by where I grew up, which is in California and thought of creating a landscape that displays palm trees, the beach, and ocean within a night scene. It was very challenging for me to properly randomize some of the objects at first, that made the whole scene flow when it was running. However, I did enjoy putting thought and colors into creating a new environment that allowed me to express something personal.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-11-Landscape

let car = [];
let num = 10; //number of cars

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

  for (let i = 0; i < num; i++) {
    car[i] = new Car(random(height),
      random(width),
      color(random(255), random(255), random(255)), //color of car
      random(1, 7), //car speed
      random(10, 100) //car size
    );
    print(car[i]);
  }

}

function draw() {
  background(0, 41, 58);

  fill(241, 244, 15);
  ellipse(300, 50, 5, 5);
  ellipse(270, 74, 5, 5);
  ellipse(130, 50, 5, 5);
  ellipse(20, 80, 5, 5);
  ellipse(360, 100, 5, 5);
  ellipse(70, 160, 5, 5);
  ellipse(230, 140, 5, 5);
  ellipse(330, 170, 5, 5);
  ellipse(180, 230, 5, 5); //stars 

  fill(200);
  rect(0, 300, 400, 30);
  fill(200);
  rect(0, 290, 400, 3);
  fill(200);
  rect(80, 70, 30, 330);
  fill(200);
  rect(320, 70, 30, 330);
  stroke(200);
  strokeWeight(5);
  line(95, 90, 215, 315)
  stroke(200);
  strokeWeight(5);
  line(95, 90, 0, 275)
  stroke(200);
  strokeWeight(5);
  line(335, 90, 215, 315);
  stroke(200);
  strokeWeight(5);
  line(335, 90, 400, 220); //bridge


  for (let i = 0; i < 10; i++) {
    car[i].move();
    car[i].display(); //making cars show
  }
}



class Car {
  constructor(x, y, z, s, l) {
    this.x = x;
    this.y = y;
    this.z = z; //color of car
    this.l = l; //length of car
    this.speed = s; //speed
  }
  
  move() {
    this.x = this.speed + this.x; //making cars move
    if (this.x > width) {
      this.x = 0; //where the cars come out
    }
  }

  display() {
    noStroke();
    fill(this.z);
    rect(this.x, 270, this.l, 30, 20); //position of cars moving, adjusting shape of cars 
  }
}

Recently, I went outside with my friends to see the night view of Pittsburgh near downtown. I wanted to create what I saw that day by creating what I think is the most symbolic landscape of Pittsburgh, the yellow bridge. I created an illustration of the yellow bridge and the night sky, and made the cars in different lengths and colors move across the bridge. The yellow bridge and the night sky with stars are static because I wanted to emphasize the movement of the vehicles. The cars are coded to move from left to right in different speeds, lengths, and colors to represent the diversity of vehicles I saw the day I went out.

sketch

/*  Mari Kubota
    49-104 Section 1
    mkubota@andrew.cmu.edu 
    Project 11
*/

var lamps = [];
var stars = [];
var buildings = [];


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

    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        lamps[i] = makeLamp(rx);
        stars[i] = makeStar(rx);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}


function draw() {
//creates gradient sky
	c1 = color(0, 28, 84);
    c2 = color(222, 241, 255);
    setGradient(c1, c2);

//creates roads
    noStroke();
    fill(100);
    rect(0, height*.75, width, height/4);
    fill(200);
    stroke(50);
    rect(0,height*.9, width, height/9);
//calls functions with objects     
    updateAndDisplayStars();
    removeStarsThatHaveSlippedOutOfView();
    addNewStarsWithSomeRandomProbability(); 

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

    updateAndDisplayLamps();
    removeLampsThatHaveSlippedOutOfView();
    addNewLampsWithSomeRandomProbability();

}


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

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

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 removeLampsThatHaveSlippedOutOfView(){
    // takes away lamps once they leave the frame
    var lampsToKeep = [];
    for (var i = 0; i < lamps.length; i++){
        if (lamps[i].x + lamps[i].breadth > 0) {
            lampsToKeep.push(lamps[i]);
        }
    }
    lamps = lampsToKeep; // remember the surviving buildings
}


////////////////////////////////////////////////////////
function removeStarsThatHaveSlippedOutOfView(){
//removes stars from array stars and puts them in new array
//once they've moved off the edge of frame
    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 surviving stars
}

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 addNewLampsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newLampLikelihood = 0.03; 
    if (random(0,1) < newLampLikelihood) {
        lamps.push(makeLamp(width));
    }
}

function addNewStarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newStarLikelihood = 0.02; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStar(width));
    }
}

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 lampMove() {
    this.x += this.speed;
}

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

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


// draws lamps
function lampDisplay() {
    fill(255,255,0,45);
    noStroke();    
    ellipse(this.x, height -25 - this.h,this.r,this.r); //halo of light from lamp
    fill(102,166,218);
    rect(this.x-1.5, height - 25-this.h, this.breadth, this.h); //lamp post
    fill(255);
    ellipse(this.x, height -25 - this.h, this.r2, this.r2); //lightbulb
    stroke(255);
    strokeWeight(0.5);
    noFill();
    quad(this.x - 1.5, height - 20 - this.h,
        this.x - 5, height - 35 - this.h,
        this.x + 5, height - 35 - this.h, 
        this.x + this.breadth - 1.5, height - 20 - this.h); //draws the lamp box
}

function starDisplay(){
  //halo of light around star
  noStroke();
  fill(255, 255, 0, 30);
  ellipse(this.x + this.breadth/2, this.h, this.breadth * 5, this.breadth * 5);
  stroke(255,255,0);
  strokeWeight(0.5);
  noFill();
  //draws diamonds that make up star
  quad(this.x, this.h,
       this.x + this.breadth / 2,this.h - this.tall / 2,
       this.x + this.breadth, this.h,
       this.x + this.breadth / 2,this.h + this.tall / 2);
}

function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = height; 
    noStroke();
    fill(0);  
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    for (var i = 0; i < this.nFloors; i+=2) {
    	fill("yellow");
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 15);
    }
    pop();
}
//////////////////////////////////////////////////////////////////////////


function makeLamp(posX) {
    var lamp = {x: posX,
                breadth: 3,
                speed: -2.5,
                h: random(40,60),
                r: random(20,35),
                r2: 4,
                move: lampMove,
                display: lampDisplay}
    return lamp;
}

function makeStar(posX) {
    var star = {x: posX,
                breadth: 3,
                speed: -0.5,
                tall: random(5,10),
                h: random(20, 100),
                move: starMove,
                display: starDisplay}
    return star;
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nFloors: round(random(10,20)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}
//////////////////////////////////////////////////////////////////////////////

//gradient sky function
function setGradient(c1, c2) {
  noFill();
  for (var y = 0; y < height; y++) {
    var inter = map(y, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, y, width, y);
  }
}

For this project, I created a landscape of a city during the night time. The three objects in the landscape are the buildings, lamps, and stars. All of the objects appear randomly in random quantities. The only consistency is the height at which the buildings and lamps appear. The lamps’s colors are randomized and made transparent in order to create a halo effect. The objects all move across the canvas at different speeds in order to create a sense of depth. The stars move slowest, followed by the buildings, and the lamp posts move the fastest.