Category: Project-10-Landscape

Han Yu Project 10 Landscape

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 10 Generative Landscape

var terrainSpeed = 0.0005;
var terrainDetail = 0.01;
var terrainD1 = 0.0005;
var terrainS1 = 0.0002;

var fish1 = "https://i.imgur.com/pw06Fwc.png";
var fish = [];
var fishy1;

function preload() {
	fishy1 = loadImage(fish1);
}

function setup() {
    createCanvas(480, 300);
    //create an initial collection of fish
    for (var i=0; i<10; i++) {
    	var rx = random(width*5);
    	fish[i] = makeFish(rx);
    }
    
    frameRate(10);
}
 
function draw() {
    background(255);
    //sun
    noStroke();
    fill(252,163,41);
    ellipse(80, 60, 70, 70);

    //mountain
    noFill(0); 
    stroke(135,120,108)
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t),0,1,20,height)-height/4;
                
        vertex(x, height);
        vertex(x, y); 
    }
    endShape();
    fill(135,120,108,100);
    noStroke();
    
    //water-top
    beginShape(); 

    stroke(119,209,249,150);
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainD1) + (millis() * terrainS1); 
        var y1 = map(noise(t1),0,1,20,height);
        vertex(x1, height);
        vertex(x1,y1);
    }
    endShape();

    //water-bottom
	beginShape(); 

    stroke(119,209,259);
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * terrainD1) + (millis() * terrainS1); 
        var y1 = map(noise(t1),0,1,28,height);
        vertex(x1, height);
        vertex(x1,y1);
    }
    endShape();

    //fish
    push();
    translate(0.1 * width, 0.1 * height); 
    scale(0.8);

    scale(0.2,0.2);
    
    updateAndDisplayFish();
    addNewFishWithProbability();

}

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


function addNewFishWithProbability() {
	var newFishLikelihood = 0.05;
	if (random(1) < newFishLikelihood) {
		fish.push(makeFish(-300));
	}
}

function fishMove() {
	this.x += this.speed*(1/this.size);
}

function fishDisplay() {
	push();
	scale(this.size, this.size);
	translate(this.x*(1/this.size), this.y*(1/this.size));

	image(fishy1,0,0);
	pop();
}


function makeFish(birthLocationX) {

    var fishy = {x: birthLocationX,
    		size: random(0.3, 0.6),
    		y: random(0.8*height*(1/0.2), height*(1/0.2)),
            speed: random(1,5),
            move: fishMove,
            display: fishDisplay};
    return fishy;
}

I started out thinking to do a project on natural landscape with mountain, water and grassland. But as I dived into the project, I found the overall scene rather dull and lifeless so I decided to focus on the underwater scene with fish instead.

My initial sketch of this project.

Yingyang Zhou-Project-10-Landscape

Yingyang’s Landscape

//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//project 10
//section A

var pikachu;
var pikachuSpeed = 0.0005;
var clouds = [];

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

function setup(){
  createCanvas(360, 480);
  for(var i = 0; i < 10; i++){
    var cloudX = random(width);
    clouds[i] = makeCloud(cloudX);
  }
  frameRate(10);
}

function draw(){
  background(238, 168, 180);


  updateAndDisplayClouds();
  removeCloudsSlippedOut();
  addNewClouds();

  airfoil();
  windowFrame();

}
function airfoil(){
  //airfoil
  noStroke();
  fill(200, 92, 27);
  triangle(240, 250, 250, 210, 280, 270);
  fill(230, 92, 27);
  triangle(360, 400, 240, 250, 360, 300);
}

function windowFrame(){
  rectMode(CENTER);
  noFill();
  stroke(70);
  strokeWeight(70);
  rect(width/2, height/2, width+20, height+20,120);
  stroke(100);
  strokeWeight(30);
  rect(width/2, height/2, width-30, height-30, 130);
}

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

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

function addNewClouds(){
  var newCloudsLikelyhood = 0.005;
  if (random(0,1) < newCloudsLikelyhood){
    clouds.push(makeCloud(width));
  }
}

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

function cloudsDisplay(){
  //moutain
  var terrainSpeed = 0.00125;
  var terrainDetail = 0.01;
  stroke(45, 100, 40, 90);
  beginShape();
  for (var l = 0; l < width; l++) {
      var v = (l * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(v), 0,1, 110, height - 50);
      line(l,y+200,l,height+200);
  }
  //cloud
  fill(0, 0, 222, 45);
  noStroke();
  push();
  translate(this.x, height);
  ellipse(80, -30, 100, 30);
  ellipse(15, -80, 100, 50);
  ellipse(0, -200, 240, 30);
  ellipse(20, -300, 200,10);
  ellipse(50, -240, 100, 40);
  ellipse(0, -220, 300, 50);
  ellipse(500, -30, 100, 30);
  ellipse(200, -80, 100, 50);
  ellipse(100, -200, 240, 30);
  ellipse(200, -300, 200,10);
  ellipse(500, -240, 100, 40);
  ellipse(800, -220, 300, 50);
  image(pikachu, 30, -height/2+random(-2,2), pikachu.width/10, pikachu.height/10);
  pop();
  endShape();
}

function makeCloud(birthLocationX){
  var cloud = {x: birthLocationX,
               breadth: 50,
               size:round(random(30, 240)),
               speed: -5.0,
               move:cloudsMove,
               display:cloudsDisplay}
  return cloud;
}

My original idea is to make a sunrise and sunset scene and I changed my mind later thinking that it might be an interesting idea to engaged with some image elements so I picked a pikachu to be flying outside my airplane cabin.

Jessica Timczyk – Project 10 Landscape

Landscape

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-10-Landscape

var cacti = [];
var cactusClip;
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var tumbleweed = [];

function preload() {
    cactusClip = loadImage("https://i.imgur.com/f4O5OGj.png?1");
}


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

}


function draw() {

    background(212, 248, 251);  

    ////////// Mountains //////////
    stroke(129, 161, 164);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        line(x, y, x, height);
    }
    endShape();

    /////// sun beam ////////
    
    beginShape(); 
    for (var x = 0; x < width; x++) {
        fill(221, 204, 112); 
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    endShape();
    noFill();
    
    rect(0, 0, width - 1, height - 1);


    //// cactus //////
    
    displayHorizon();

    updateAndDisplayCacti();
    removeCactiThatHaveSlippedOutOfView();
    addNewCactiWithSomeRandomProbability(); 

    //// tumble weed ///////
   for (var k = 0; k < tumbleweed.length; k++){
        tumbleweed[k].draw();
        tumbleweed[k].move();
   }
    addNewTumbleWeedWithSomeRandomProbability();
   
}


function updateAndDisplayCacti(){
    // Update the cacti positions and display them
    for (var i = 0; i < cacti.length; i++){
        cacti[i].move();
        cacti[i].display();
    }
}


function removeCactiThatHaveSlippedOutOfView(){
    var cactiToKeep = [];
    for (var i = 0; i < cacti.length; i++){
        if (cacti[i].x + cacti[i].breadth > 0) {
            cactiToKeep.push(cacti[i]);
        }
    }
    cacti = cactiToKeep; // remember the cacti that stay
}


function addNewCactiWithSomeRandomProbability() {
    // With a very tiny probability, add a new cacti to the end
    var newBuildingLikelihood = 0.03; 
    if (random(0,1) < newBuildingLikelihood) {
        cacti.push(makeCactus(width));
    }
}


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

// draw the cactus
function cactusDisplay() {
    var cHeight = this.cactusHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - this.cactusPlacement);
    image(cactusClip, 0, -cHeight);
    pop();
}


function makeCactus(birthLocationX) { // cactus object
    var cct = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                cactusHeight: round(random(0, 175)),
                move: cactusMove,
                cactusPlacement: round(random(0,70)),
                display: cactusDisplay}
    return cct;
}




function makeTumbleWeed() { // random colors
    var tbwd = {x: width,
                y: -height + 100,
                move: moveTumbleWeed,
                draw: drawTumbleWeed,
                color: [random(50, 180), random(50, 165), random(20, 55)],
                }
    return tbwd;
    }

// draw tumbleweed
function drawTumbleWeed(){
    stroke(this.color);
    strokeWeight(4);
    noFill();
    ellipse(this.x, height - this.y - 60, 30, 30,);
    ellipse(this.x + 5, height - this.y - 62, 20, 20);
    ellipse(this.x + 2, height - this.y - 57, 5, 5);
    ellipse(this.x - 4, height - this.y - 61, 15, 15);
    ellipse(this.x -1, height - this.y - 60, 20, 20);
}

function moveTumbleWeed(){ //tumble weed moves more quickle than cacti
    this.x -= 10;
    this.y = random(10);
}


function addNewTumbleWeedWithSomeRandomProbability() {
    // tumble weeds are alot less likely than cacti
    var newTumbleWeedLikelihood = 0.007; 
    if (random(0,1) < newTumbleWeedLikelihood) {
        tumbleweed.push(makeTumbleWeed(width));
    }
}


function displayHorizon(){
    stroke(162, 126, 78);
    fill(201, 160, 106);
    rect(0, height - 75, width, height - 75);
}

I enjoyed doing this project because it allowed me to make my own landscape, where as in the past we have always been given a template for them. I struggled a bit to enter in new moving objects, and took me awhile to understand all the commands and what each function was doing. Some things, like the sunlight beam, happened by accident because I was messing with different variables but I’m very happy with how it turned out. If I were to do this again I would probably want to add more details to the sky, or figure out how to make more complicated generated landscapes besides the mountain like line that we were offered with. Overall I’m happy with how it came out.

Xindi Lyu-Project 10- Landscape-Section A

sketch
For this project I tried to create a sense of distance between the mountains by assigning them gradient colors and giving them different speeds and details. Also I incorporated the hot air balloons I made in this drawings and made them gradually move downwards as well as moving left.

 
/*
Project 10
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var tspeed1=0.0001;
var tdetail1=0.005;
var tspeed2=0.00006;
var tdetail2=0.01;
var tspeed3=0.00004;
var tdetail3=0.05;
var ballons= [];

function setup(){
    createCanvas(500,600);
    frameRate(10);
    for(var i=0; i<10; i++){
        var rx = random(width);
        var ry = random(0,height/2)
        ballons[i]=makeBallons(rx,ry);
    }

    }

function draw(){

    background(250,237,229);
    //gradiant background
  for(var u=0; u<height;u++){
    stroke(250+0.05*u,237+0.05*u,229+0.05*u);
    line(0,u,width,u );

}
//the far away mountains
         push();
 fill(212,179,160);
   beginShape();
   noStroke();
    for(k=0;k<width;k++){
        var t=(tdetail3*k)+(millis()*tspeed3);
        var h=map(noise(t),0,2.5,0,height/0.53);
        vertex(k,h);
    }
    
    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();



//the mountains in the midle
     push();
 fill(197,158,141);
   beginShape();
   noStroke();
    for(a=0;a<width;a++){
        var c=(tdetail2*a)+(millis()*tspeed2);
        var b=map(noise(c),0,1.8,0,height/0.4);
        vertex(a,b);
    }


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



 

//the close mountains


   push();
 fill(173,146,135);
   beginShape();
   noStroke();
    for(x=0;x<width;x++){
        var t=(tdetail1*x)+(millis()*tspeed1);
        var y=map(noise(t),0,1,height/2,height);
        vertex(x,y);
    }


    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();
        
updateAndDisplayballons();
removeballons();
addballons();

 


}

function updateAndDisplayballons(){
for(i=0;i<ballons.length;i++){
   ballons[i].move();
   ballons[i].display();

}
}

function removeballons(){
    var ballonsToKeep=[];
for(i=0;i<ballons.length;i++){
    if(ballons[i].x>0){
        ballonsToKeep.push(ballons[i]);

    }
}

}

function addballons(){
    var newBallonLikelihood = 0.025
    if(random(0,1)<newBallonLikelihood){
        ballons.push(makeBallons(width,random(0,height/2)))
    }
}

function ballonsMove(){
    this.x+=this.speed;
    this.y+=this.speed*(-0.6);
}

function ballonsDisplay(){
    translate(this.x,this.y);
//The strings
    strokeWeight(0.7);
    stroke(86,85,93);
    line(5,25,5,30);
    line(10,25,10,30);
    line(15,25,15,30);

//The balloon
    noStroke();
    ellipse(10,10,20,20);
    quad(0,10,20,10, 15, 25,5,25);
    //The basket
    rect(5,30,10,8);
}

function makeBallons(birthLocationX,birthLocationY){
    var ballons={x:birthLocationX, y:birthLocationY,
        speed: random(-0.5,-0.6),
        move:ballonsMove,
        display:ballonsDisplay}

        return ballons;

}

Project 10 Landscape- Sara Frankel

sketch

// Sara Frankel
// sfrankel
// Project 10
// Section A

var speed = 0.00025;
var detail = 0.001;
var sheeps = new Array(480);
var numNoDraw = 0;
var clouds = new Array(480);
var numNoDrawC = 0;
var cloudY = new Array(12);
var cloudCount2 = 0;
var sheepcolors = new Array(12);
var colorCount = 0;
var herderURL;
var sheepStatus;

function preload() {
	herderURL = loadImage("https://i.imgur.com/f7HUFMr.png?1");//uploads image of shepard into 
}

function setup() {
    createCanvas(480, 400);
    frameRate(10);
}

function draw() { 
	background('lightblue');
//____________________________________________

	if(sheeps[0]) {
		shiftLeft(sheepcolors);//inserts random colors from array and shifts it over so that the value is not the same everytime
		//(makes sure the x point of the object moves with the point)
		colorCount--;
	}
	shiftLeft(sheeps);//
	if(numNoDraw === 0) {
		sheeps[479] = (random(0, 1) <= 0.05);//using a random 5% chance the sheep will be on the point
	} else {
		sheeps[479] = false;//there will be no sheep directly after
		numNoDraw--;
	}	
	if(sheeps[479]) {
		sheepcolors[colorCount] = random(0, 255); //each sheep will have a different random grey scale color
		if (colorCount === 11) {
        } else {
			colorCount++;
		}
		numNoDraw = 40;//there will be no sheeps every 40 pixels
	}
//____________________________________________
    
	if(clouds[0]) {
		shiftLeft(cloudY); //shifts cloud to the left so that the object moves with the x point change
		cloudCount2--;
	}

    shiftLeft(clouds);
    clouds[479] = false;//shift left and ensures last is set to default value (false)
	if(numNoDrawC === 0) {
	    clouds[479] = random(0,1) <= 0.01; //probility of if the cloud will be on the sreen in a specific point
    } else {
    	numNoDrawC--;
    }
    if(clouds[479]) {
    	numNoDrawC = 40;
    	cloudY[cloudCount2] = random(150,250); //randomly positions clouds between y points 150-250
  		if(cloudCount2 === 12){ //there cannot be more than 12 clouds (each cloud must be spaced at least 40 pixels from the last)
  		} else {
  			cloudCount2++;//increases number of clouds
  		}
    }

//______________________________________________

	noFill();
	beginShape();
	var cloudCount = 0;
	var sheepCount = 0; 
	for (var i = 0; i < width; i++) {
		var j = (i * speed) + (millis() * speed);
		var y = map(noise(j), 0, 1, height/2, height);//utilizes noise function 
		vertex(i, y);
		stroke('green');
		line(i, y, i, height);

		if(sheeps[i]) {
			sheep(i,y - 5, sheepcolors[sheepCount]);//places sheep on positions of the noise
			sheepCount++; //increases sheep count
		}

		if(clouds[i]) {
			cloud(i, y - cloudY[cloudCount]);//places clouds in position relative to noise
			cloudCount++;//increase cloud count
		}

		image(herderURL, 350, y + 30, 60, 60);//puts sheep herder on screen
	}
	endShape();
}

//draws sheep at given x, y coordinate and given face color 
function sheep(x, y, col) {
	beginShape();
	stroke(255);
	fill(255);
    ellipse(x, y, 10, 10);
    ellipse(x + 5, y + 5, 10, 10);
    ellipse(x + 10, y + 5, 10, 10);
    ellipse(x + 15, y, 10, 10);
    ellipse(x + 10, y - 5, 10, 10);
    ellipse(x + 5, y - 5, 10, 10);
 	fill(col);
    ellipse(x - 5, y, 10, 10);
    fill(255);
    endShape();
}

//draws clouds at given cx and cy
function cloud(cx, cy) {
	beginShape();
	stroke(255);
	fill(255);
	ellipse(cx, cy, 20, 20);
	ellipse(cx + 10, cy + 9, 20, 20);
	ellipse(cx + 20, cy + 9, 20, 20);
	ellipse(cx + 30, cy, 20, 20);
	ellipse(cx + 20, cy - 9, 20, 20);
	ellipse(cx + 10, cy - 9, 20, 20);
	endShape();
}

//uses for loop to help shift an array over so that you never reach the "end" of it
function shiftLeft(array){
	for(var r = 0; r < array.length - 1; r++) {
		try {
			array[r] = array[r+1];
		} catch(e) {
		}
	}
}

For my project, I decided that Shepard and their sheep was quite fitting. At first I was uncertain on how I will execute this project. I found that using an image for the Shepard and a cute little drawn image of the sheep would be quite fitting. Nothing would also be fluffier than white random clouds that go with it. Especially with the pain of this previous week, I felt that something calmer like “counting sheep” would be best.


^ Image of my original sketch

Rjpark – Project 10 – Generative Landscape

generativelandscape

var jellyfish = [];

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of jellyfish
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(height);
        jellyfish[i] = makeJellyfish(rx, ry);
    }

    frameRate(30);
}

function draw() {
    background("lightblue"); 
    
    updateJellyfish();
    removeJellyfish();
    addNewJellyfish(); 
}

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

function removeJellyfish(){
    var jellyfishToKeep = [];
    for (var i = 0; i < jellyfish.length; i++){
        if (jellyfish[i].y + jellyfish[i].size > 0) {
            jellyfishToKeep.push(jellyfish[i]);
        }
    }
    jellyfish = jellyfishToKeep; // surviving jellyfish
}

// HOW TO ADD SMOOTHLY!!!
function addNewJellyfish() {
    var newJellyfishLikelihood = 0.015; 
    if (random(0, 1) < newJellyfishLikelihood) {
        jellyfish.push(makeJellyfish(random(width), height));
    }
}

// update position of jellyfish every frame
function jellyfishMove() {
    this.y += this.speed;
}

// draw jellyfish
function jellyfishDisplay() {
    fill(this.rr, this.rg, this.rb); 
    noStroke();
    arc(this.x, this.y, this.size, this.size, PI, 2 * PI, CHORD);
    push();
    translate(this.x, this.y);
    noFill();
    stroke(255);
    strokeWeight(2);
    bezier(0, 0, -20, 40, 20, 30, 0, 70);
    bezier(-10, 0, -30, 40, 10, 30, -10, 70);
    bezier(-20, 0, -40, 40, 0, 30, -20, 70);
    bezier(10, 0, -10, 40, 30, 30, 10, 70);
    bezier(20, 0, 0, 40, 40, 30, 20, 70);
    pop();
}

function makeJellyfish(startingX, startingY) {
    var jf = {x: startingX,
    			y: startingY,
    			rr: random(0, 200),
    			rg: random(0, 100),
    			rb: random(0, 255),
                size: random(50, 100),
                speed: -1.0,
                move: jellyfishMove,
                display: jellyfishDisplay}
    return jf;
}

When I read about this project, the first “landscape” I thought of was sea animals passing by in a submarine or in an aquarium. As a result, I wanted to create something to imitate the perspective of someone traveling under water, like being in a submarine. I chose to draw jellyfish and to view them from a bird’s eye view (imagine being in a submarine with glass on the floor/bottom). In addition, I chose to randomize the size and colors of the jellyfish. Here are a few sketches of how I decided on perspective/shape.

Curran Zhang-Project 10- Landscape

sketch

/*Curran Zhang
curranz
Project 10
Section A
*/

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = []; 
var star = [];
var frames = []; 
var characterX;  
var characterY;  

function setup() {
  createCanvas(480, 480);
  //Iniate Clouds
  for (var i = 0; i <5; i++) {
      var r = random(width);
      clouds[i] = makeClouds(r);
  }
  //Human Image Position 
    imageMode(CENTER);
    frameRate(15);
}

function preload(){
    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";
    for (var i = 0; i < filenames.length; i++) {
        frames.push(loadImage(filenames[i]));
    }  
}

function draw() {
  //Gradient Background
    var from = color('red');
    var to = color(270);
    gradient(0,width,from,to);

  makeMountain1();
  makeMoon();
  makeStar();
  makeMountain1();
  makeMountain2();
  makeReflection();
  updateClouds();
  removeClouds();
  addClouds();
  makeHuman();
}

function gradient(y,w,from,to){
  for (var i = y; i <= height; i++) {
    var inter = map(i,y,y+w,0,1);
    var col = lerpColor(from,to,inter);
    stroke(col);
    strokeWeight(2);
    line(y,i,y+w,i);
  }
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 100; i++) {
      var starX = random(width);
      var starY = random(height);
      ellipse(starX,starY,1,1);
    }
}

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

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

function makeReflection(){
  fill(220,50,50);
    rect(0, 375, width, 105);

  fill(255,60,60); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height, height*.5);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeMoon(){
    noStroke();
    fill(255,20);
    ellipse(2*width/3,height/4,170,170);
    ellipse(2*width/3,height/4,160,160);
    ellipse(2*width/3,height/4,150,150);
    ellipse(2*width/3,height/4,140,140);
    fill(255,200);
    ellipse(2*width/3,height/4,120,120);
}

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

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

function addClouds(){
  var newCloud = .007;
  if (random(0,1)<newCloud) {
    clouds.push(makeClouds(width))
  }
}

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

function displayClouds(){
  fill(255,50);
  noStroke();
  ellipse(this.x,this.y,this.width,this.height);
  ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
  ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
  ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}

function makeClouds(cloudy){
  var cloud= {x: cloudy,
              y:random(100, height/2),
              speed: random(-.2,-.7),
              width: random(50,100), 
              height:random(20,0),
              breadth:50,
              move:cloudMove,
              display:displayClouds
            }
  return cloud;          
}

function makeHuman(){
  //Human 1
    push();
      translate(width/2+20,365);
      scale(.2,.2);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2+20,385);
      scale(.2,-.2);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 

  //Human 2
    push();
      translate(width/2,367);
      scale(.15,.15);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2,382);
      scale(.15,-.15);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 

  //Human 3 
    push();
      translate(width/2-20,370);
      scale(.1,.1);
      image(frames[frameCount % 8], 0, 0);
    pop();    

    push();
      translate(width/2-20,379);
      scale(.1,-.1);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 
}

Whenever I go around exploring and taking pictures, I really like to find reflections produced by waters. Therefore, I decided to do a project where water can be used to make the colors more vibrant. Creating mountains creates a very peaceful and relaxing scene, which is something I desperately want.

KadeStewart-Project10-Landscape

planes

//Kade Stewart
//Section B
//kades
//Project-10


var planes = [];
//a variable that holds each of the colors that a plane could be
var pastels = [230, 245, 245, 255, 250, 205, 180, 236, 180];
var terrain1 = [];
var terrain2 = [];
var terrain3 = [];

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

    //initialize a plane
    planes[(planes.length)] = new Plane();


    //add terrain that has random but connected altitudes
    var y = height/4;
    for (var i = 0; i < width; i++) {
    	terrain1.push(y += random(-1,1));
    }

   	y = height/2;
   	for (var i = 0; i < width; i++) {
    	terrain2.push(y += random(-1,1));
    } 

    y = height * (3/4);
    for (var i = 0; i < width; i++) {
    	terrain3.push(y += random(-1,1));
    }
}

function Plane() {
	this.y = random(0, height);
	this.x = width + 50;
	this.speed = floor(random(-.01, -3));    //this is the speed that the plane actually goes back
	this.path = [];    //this is where the path is stored for the plane
	this.pathspeed = this.speed * 3;    //this is the speed that the path is made
	this.c = floor(random(1,4));    //this is where the color is determined

	//this is function that draws both the plane and the path
	this.draw = function() {
		stroke(0);
		strokeWeight(1);
		fill(pastels[this.c], pastels[this.c + 1], pastels[this.c + 2]);

		triangle(this.x - (6 * -this.pathspeed/2), this.y - 9 * -this.pathspeed/2,
				 this.x + 18 * -this.pathspeed/2, this.y,
				 this.x, this.y);

		//draw the path
		if (this.path.length > 2) {
			for (var i = 1; i < this.path.length; i++) {
				stroke(125);
				strokeWeight(1);
				noFill();
				line(this.x + (this.pathspeed * (i-1)), this.path[this.path.length - i - 1],
					 this.x + (this.pathspeed * (i)), this.path[this.path.length - i]);
			}
		}
	}
}

function updatePlanes(index) {
	planes[index].x += planes[index].speed;
	planes[index].y += random(-1, 1);

	//if the plane is past the window, delete it
	if (planes[index].x - (18 * planes[index].pathspeed/2) < 0) {
		planes.splice(index, 1);
	}
}

function updatePath(index) {
	var p = planes[index];

	//add the planes current position to the path to trace where it's been
 	p.path.push(p.y);

 	//if the path is longer than the window, delete what's outside of the window
	if (p.path.length * p.pathspeed > width) {
		p.path.splice(0, 1);
	}
}

function randomlyMakePlane(odds) {
	//this is the randomizer that decided whether the plane is made or not
	var newPlaneMaybe = random(-odds + 1, 1);
	if (newPlaneMaybe > 0) {
		planes[(planes.length)] = new Plane();
	}
}

//draw 3 different tiers of background, to give a sense of depth
function drawTerrain() {
	for (var j = 0; j < width; j++) {
		stroke(255, 241, 245);
		strokeWeight(5);
		noFill();
		line(j, terrain1[j], j, height);
	}
	for (var j = 0; j < width; j++) {
		stroke(255, 235, 239);
		strokeWeight(5);
		noFill();
		line(j, terrain2[j], j, height);
	}
	for (var j = 0; j < width; j++) {
		stroke(255, 209, 220);
		strokeWeight(5);
		noFill();
		line(j, terrain3[j], j, height);
	}
}

function updateTerrain() {
	terrain1.splice(0, 1);
	terrain1.push(terrain1[terrain1.length-1] + random(-1, 1));
	terrain2.splice(0, 1);
	terrain2.push(terrain2[terrain2.length-1] + random(-1, 1));
	terrain3.splice(0, 1);
	terrain3.push(terrain3[terrain3.length-1] + random(-1, 1));
}

function draw() {
	background(255, 250, 253);

	//this is where the terrain is drawn and then generated
	drawTerrain();
	updateTerrain();

	for (var i = 0; i < planes.length; i++) {
		var p = planes[i];

		//draw the planes
		planes[i].draw();

		//update its path
		updatePath(i);

		//update its x and y position, and delete it if it's too far off the screen
		updatePlanes(i);
	}

	//**60** to 1 odds that there is a new plane made (about 1 every second)
	randomlyMakePlane(60);

}

Sketch of my paper airplane landscape

I wanted to make a generative landscape that wasn’t just actual land, or even anything that was extremely natural, but something more artificial. I came up with paper airplanes, which ended up being an interesting challenge. I randomly generated airplanes that were large and fast to look closer to the viewer (who’s reference frame was moving forward) or small and slow to seem farther away. The background, varying pink levels, also moves to increase the viewer’s sense that they’re moving as well. Overall, I think I achieved my goal of giving the viewer a sense of wonderment.

Jonathan Liang – Project 10 – Generative Landscape

sketch

//Jonathan Liang
//jliang2
//section A

var buildings = [];
var lamppost = [];
var tDetail = 0.01;
var tSpeed = 0.0004;
var frames = []; // An array to store the images
var x = 0; //variable to draw image from array
var rexX;  // The X location of the character
var rexY;  // The Y location of the character
var exampleImgOnly;

function preload() {
	var filenames = [];
	filenames[0] = "https://i.imgur.com/pUQqpVN.png";
	filenames[1] = "https://i.imgur.com/075wwQz.png";
	filenames[2] = "https://i.imgur.com/8aFEl6F.png";

	for (var i = 0; i < filenames.length; i++) {
		frames[i] = loadImage(filenames[i]);
	}
	exampleImgOnly = loadImage("https://i.imgur.com/pUQqpVN.png");
}


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

    //initial buildings
    for (var i = 0; i < 11; i++) {
    	var ranx = random(width);
    	buildings[i] = makeBuilding(ranx);
    }
    rexX = 150; 
    rexY = 215; 
    frameRate(10);
    
   
}

function draw() {
	background(255);
	//generate line paper
	for(var y = 0; y < height; y += 10) {
		stroke(200);
		noFill();
		line(0, y, width, y);
	}
	displayHorizon();
	makeMountain();

	//draw objects
	//buildings
	updateAndDisplayBuildings();
	removeBuildings();
	addNewBuilding();
	//trex
	image(frames[x], rexX, rexY, 150, 150);
		x += 1;
		if (x > 2) {
			x = 0;
		}
	
}

function makeMountain() {
	//generates terrain
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	for (var x1 = 0; x1 < width; x1++) {
		var t1 = (x1 * tDetail) + (millis() * tSpeed);
		var y1 = map(noise(t1), 0, 1, 0, height);
		vertex(x1, y1 - 20);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}

function updateAndDisplayBuildings() {
	//update and display building position 
	for (var i = 0; i < buildings.length; i++) {
		buildings[i].move();
		buildings[i].display();
	}
}

function removeBuildings() {
	//remove buildings that have gone out of view
	var keepBuildings = [];
	for (var i = 0; i < buildings.length; i++) {
		if (buildings[i].x + buildings[i].breadth > 0) {
			keepBuildings.push(buildings[i]);
		}
	}
	buildings = keepBuildings //remember remaining buildings
}

function addNewBuilding() {
	//with very little probability, add new building
	var newBuildingLikelihood = 0.02;
	if (random(0, 1) < newBuildingLikelihood) {
		buildings.push(makeBuilding(width));
	}
}

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

//drawing building and windows
function buildingDisplay() {
	//building
	var floorHeight = 20;
	var bHeight = this.nFloors * floorHeight;
	noFill();
	strokeWeight(2);
	stroke(0);
	push();
	translate(this.x, height - 50);
	rect(0, -bHeight, this.breadth, bHeight);
	//windows
	var wGap = this.breadth / 16;
	var xW = this.breadth / 16;
	for (var w = 0; w < 5; w++) {
		for (var i = 0; i < this.nFloors; i++) {
			fill('yellow');
			strokeWeight(1);
			stroke(0);
			rect(xW, -15 - (i * floorHeight), wGap * 2, 10);
		}
		xW += wGap * 3;
	}
	pop();
}

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



//draw the ground
function displayHorizon() {
	stroke(0);
	strokeWeight(4);
	noFill();
	line(0, height - 50, width, height - 50);
}

It all starts with an idea, but you can never tell where an idea can end up. Because ideas spread, they change, they grow, they connect us with the world. And in a fast-moving world, where good news moves at the speed of time and bad news isn’t always what is seems. Because when push comes to shove, we all deserve a second chance, to score.

My project is heavily based on doodles I used to do throughout my elementary to high school days. I used to like to draw mountains, buildings, tanks, aliens, and dinosaurs blowing up stuff. I chose to add lines to the background to reflect that lined paper quality and made everything noFill to show that it was just a pen doodle.

Julie Choi – Project 10 – Landscape

Julie Choi Landscape

/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-10
*/
var skyscrapers = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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


function draw() {
    background(200); 
    buildMountains();
    buildRoad();
    addSkyscrapers();
    removeSkyscrapers();
    randomSkyscrapers(); 
    
}

// build mountains on the background to show nature
function buildMountains(){
	push();
    beginShape();
    fill(67, 67, 22);
    vertex(0,height);
    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);
    }
    vertex(width, height);
    endShape();
    pop();
}

//build rod on the bottom to create depth in composition
function buildRoad(){
	fill(25, 51, 76);
	rect(0, 4 * height/5 + 15, width, 80);
}

//as skyscrapers disappear on the left, create new skyscrapers from the right
function addSkyscrapers(){
    for (var i = 0; i < skyscrapers.length; i++){
        skyscrapers[i].move();
        skyscrapers[i].display();
    }
}

//When skyscrapers hit the edge of canvas, make them disappear
function removeSkyscrapers(){
    var buildingsToKeep = [];
    for (var i = 0; i < skyscrapers.length; i++){
        if (skyscrapers[i].x + skyscrapers[i].breadth > 0) {
            buildingsToKeep.push(skyscrapers[i]);
        }
    }
    skyscrapers = buildingsToKeep;
}

// add probability to update the numbers of skyscrapers to the end
function randomSkyscrapers() {
    var newBuildingLikelihood = 0.3; 
    if (random(0,1) < newBuildingLikelihood) {
        skyscrapers.push(makeSkyscrapers(width));
    }
}


// print skyscrapers for every changing frame
function moveSkyscrapers() {
    this.x += this.speed * 2;
}
    

// draw skyscrapers with bright colored windows
function displaySkyscrapers() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight;  
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill(random(0,255), random(0,255), random(0,255));
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}


function makeSkyscrapers(birthLocationX) {
    var windows = {x: birthLocationX,
                breadth: 50,
                speed: -3.5,
                nFloors: round(random(5,10)),
                move: moveSkyscrapers,
                display: displaySkyscrapers}
    return windows;
}

I felt like this project was a little bit more challenging than the previous projects because using many objects can get pretty tricky. I concluded this project by making a landscape that portrays my views Seoul, Korea. Seoul is a big city with very colorful lights and building signs because so many business branches are located in the area. Bright lights and colorful signs along the buildings basically dominate any views of the mountains that are located outside of the city. I tried to portray this image in this project by representing the colorful rectangles as tall skyscrapers. Overall, I feel like I ended up with a satisfying result because my meanings show through the visuals.