Category: Project-10-Landscape

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project 10

var terrain = [];

function setup() {

    createCanvas(480, 400); 
    frameRate(13);
    
    // create an initial collection of terrains
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        //"terrain" is the mountainous 
        //landscape at bottom of screen
        terrain[i] = makeTerrain(rx);
    }
}

function draw() {
    background(190, 140, 20); 
  
    updateAndDisplayTerrain();
    removeTerrainThatHasSlippedOutOfView();
    addNewTerrainWithSomeRandomProbability(); 

    drawTerrain(); 
}

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

function removeTerrainThatHasSlippedOutOfView() {

    var terrainToKeep = [];
    for (var i = 0; i < terrain.length; i++) {
        if (terrain[i].x + terrain[i].breadth > 0) {
            terrainToKeep.push(terrain[i]);
        }
    }
    terrain = terrainToKeep; // remember the surviving terrain
}

function addNewTerrainWithSomeRandomProbability() {
    // With a very high probability, add a new terrain to the end.
    var newTerrainLikelihood = 1; 
    if (random(0,3) < newTerrainLikelihood) {
        terrain.push(makeTerrain(width));
    }
}

// method to update position of terrain every frame
function terrainMove() {
    this.x += this.speed;
}
    
// draw the mountain range
function terrainDisplay() {
    
    var floorHeight = 400;
    var bHeight = this.nFloors * floorHeight; 
    
        fill(154, 176, 119); 
        stroke(210, 164, 54); 
        strokeWeight(random(0,9));
        push();
        translate(this.x, height - 40);

        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(0, -bHeight);

        stroke(74, 115, 119, 80); 
        strokeWeight(random(0,9));

    for (var i = 0; i < this.nFloors; i++) {

        beginShape();
        curveVertex(5, i * floorHeight);
        curveVertex(floorHeight, 34);
        curveVertex(68,  1);
        curveVertex(21,  107);
        curveVertex(400, 100);
        curveVertex(32, 100);
        endShape();

        beginShape();
        curveVertex(04, i * floorHeight);
        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(3, 100);
        curveVertex(32, 100);
        endShape();
    }
        pop();

}

function makeTerrain(birthLocationX) {
    var trn = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: terrainMove,
                display: terrainDisplay}
    return trn;
}

function drawTerrain() {

    fill(230, 160, 190);
    
    beginShape(); 
    for (var x = 10; x < width; x++) {
        var t = (x) + (millis() * 40);
        var y = map(noise(t), 0, 30, 10, height);
        vertex(x, y); 
    }
    endShape();

    //moon
    fill(240, 230, 74, 250);
    strokeWeight(random(0,9));
    ellipse(0, 0, width - 1, height - 1);

    //crater 1
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 33, 33);

    //crater 1 faded edge
    fill(250, 245, 230, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 23, 26);

    //crater 2
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(123, 93, 33);

    //crater 3
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 53, 53, 46);

    //crater 4
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 153, 13, 16);

    //crater 5
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(180, 0, 30, 30);

}

When I started this project, I knew that I wanted to create a landscape that involved nature. I wasn’t sure where to go with this until I started thinking about the idea of doing the opposite of a really lush landscape, and create something a bit more dead or barren. When I sketched, I thought about the idea of an asteroid, planet, or even our moon coming a little too close to Earth, enough to hurt the organisms living there.

I knew that to create this uneasy feeling, I’d have to play with color as well as a dizzying/shaky effect, which usually signals that something is wrong, and not everything is as it should be.

sketch

//Jenny Zhang
//jennyzha@andrew.cmu.edu
//Section D
//Project 10

var bird1;
var bird2;
var bird3;

var bird1X = 500;
var bird1Y = 150;
var bird2X = -200;
var bird2Y = 100;
var bird3X = 650;
var bird3Y = 200;

var birdWidth = 40;
var birdHeight = 30;

var cloud1;
var cloud2;
var cloud3;

var cloud1X = 700;
var cloud1Y = 60;
var cloud2X = 540;
var cloud2Y = 40;
var cloud3X = 700;
var cloud3Y = 60;

var cloudWidth = 40;
var cloudHeight = 30;

function preload() {
	bird1 = loadImage("https://i.imgur.com/nqLPhAm.png");
	bird2 = loadImage("https://i.imgur.com/nqLPhAm.png");
	bird3 = loadImage("https://i.imgur.com/nqLPhAm.png");
	
	cloud1 = loadImage("https://i.imgur.com/rkkaoGb.png");
	cloud2 = loadImage("https://i.imgur.com/rkkaoGb.png");
	cloud3 = loadImage("https://i.imgur.com/rkkaoGb.png");
}

function setup() {
	createCanvas(480,280);
	frameRate(120);
}

function draw(){
	background(248,248,255);
	drawhill();
	drawhill1();
	drawhill2();
	drawbird();
	drawcloud();
}


//draws the hilly background
var terrainSpeed = 0.00095;
var terrainSpeed1 = 0.0008;
var terrainSpeed2 = 0.00065;
var hill = 0.020;

function drawhill() {  
    noStroke();
    fill(154,205,50); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed);
            var y = map(noise(t), 0, .95, 120, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}

function drawhill1() {  
    noStroke();
    fill(85,107,47); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed1);
            var y = map(noise(t), 0, .8, 140, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}

function drawhill2() {  
    noStroke();
    fill(0,100,0); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0, .65, 160, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}


//draws the birds
function drawbird() {
	image(bird1, bird1X, bird1Y, birdWidth, birdHeight);
	bird1X -= random(1,2);
	bird1Y -= random(-0.5,0.5);

	if (bird1X < -birdWidth) {
		bird1X = 500;
	}

	image(bird2, bird2X, bird2Y, birdWidth, birdHeight);
	bird2X += random(0,0.5);
	bird2Y += random(-0.5,0.5);

	if (bird2X < -birdWidth) {
		bird2X = -100;
	}

	image(bird3, bird3X, bird3Y, birdWidth, birdHeight);
	bird3X -= random(0,2);
	bird3Y -= random(-0.5,0.5);

	if (bird3X < -birdWidth) {
		bird3X = 650;
	}
}

function drawcloud() {
	
	image(cloud1, cloud1X, cloud1Y, cloudWidth, cloudHeight);
	cloud1X -= random(0,2.5);
	cloud1Y -= random(-.25,.25);

	if (cloud1X < -cloudWidth) {
		cloud1X = 690;
	}

	image(cloud2, cloud2X, cloud2Y, cloudWidth, cloudHeight);
	cloud2X -= random(0,2.5);
	cloud2Y -= random(-.25,.25);

	if (cloud2X < -cloudWidth) {
		cloud2X = 530;
	}

	image(cloud3, cloud3X, cloud3Y, cloudWidth, cloudHeight);
	cloud3X -= random(0,2.5);
	cloud3Y -= random(-.25,.25);

	if (cloud3X < -cloudWidth) {
		cloud3X = 600;
	}	
}

With the cold weather coming upon us, I decided to create a spring theme as I begin to miss the warmer weather. Importing pictures from imgur using the preload function for the birds and clouds, I had them come flying across the screen as the code ran. As for the landscape/background, at first, I only had two hills for the terrain, but didn’t think it was enough and added the third layer. The same was true for the birds and clouds. At first I only had the birds, but then decided to import the clouds as well to create a fuller scene. Ultimately using the noise function, while playing with the inputs each time I was able to create a sense of depth.

aboyle landscape

var fish = [];
var oceanSpeed = 0.0005;
//ocean detail is low to make it look wavy instead of jagged
var oceanDetail = 0.001;
var floorSpeed=0.0004;
//floor detail is high to simulate rocky bottom
var floorDetail=0.02;

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

function draw() {
    background(147,202,243);
//makes ocean
    displayOcean();

//makes fish
    updateAndDisplayFish();
//removes fish that aren't on screen
    removeFishThatHaveSlippedOutOfView();
//adds new fish
    addNewFishWithSomeRandomProbability();

//makes ocean floor
    displayFloor();

}



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


function removeFishThatHaveSlippedOutOfView(){
//If fish aren't on screen, remove them from the array
//I based this on the provided code
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].breadth > 0) {
            fishToKeep.push(fish[i]);
        }
    }
    fish = fishToKeep;
}


function addNewFishWithSomeRandomProbability() {
//with a low probability, add new fish to array
    var newFishLikelihood = 0.009;
    if (random(0,1) < newFishLikelihood) {
        fish.push(makeFish(width));
    }
}


//change position of fish every frame to make them look like they're moving
function fishMove() {
    this.x += this.speed;
}


// draw the fish
function fishDisplay() {
//randomize the color of the fish
//I kept blue at zero so the fish wouldn't blend into water
    fill(this.fRed, this.fGreen, 0);
    noStroke()
    push();
//translate so 0 means the moving x
    translate(this.x, height);
//makes body of fish
    ellipse(0, -this.fPosition, this.fLength, this.fHeight)
//makes tail of fish
    triangle(this.fLength/2-8, -this.fPosition, this.fLength, -this.fPosition+this.fHeight/2,
      this.fLength, -this.fPosition-this.fHeight/2)
//makes eye of fish
    fill(0);
    ellipse(-6,-this.fPosition,6)
    pop();
}

//makes the object of a fish
function makeFish(birthLocationX) {
    var fsh = {x: birthLocationX,
                breadth: 50,
              //randomizes speed
                speed: random(-2.5, -1),
              //randomizes position in water
                fPosition: round(random(50,150)),
              //randomizes length
                fLength: round (random(20,50)),
              //randomizes height
                fHeight: round (random(10,20)),
              //randomizes color
                fRed: random(0,255),
                fGreen: random(0,255),
                move: fishMove,
                display: fishDisplay}
    return fsh;
}


function displayOcean(){
  noFill();
  stroke(55,122,172)
  beginShape();
//generates the ocean using the noise function
  for (var x = 0; x < width; x++) {
      var t = (x * oceanDetail) + (millis() * oceanSpeed);
      var y = map(noise(t), 0,1, 0, 60);
      vertex(x, y);
      rect (x, y, 1, height)
  }
  endShape();
}

function displayFloor(){
  noFill();
  stroke(104,81,47)
  beginShape();
//generates the ocean floor using the noise function
  for (var x = 0; x < width; x++){
    var z = (x * floorDetail) + (millis() * floorSpeed);
    var v= map(noise(z), 0, 1, 200, height)
    rect(x, v, 1, 50)

  }
  endShape();

}

For this project, I knew I wanted to randomize the speed at which the objects crossed the screen. For this to make sense, the object needed to be something that was moving on its own. I thought about a couple of options, including cars, bees, clouds, and hot air balloons. I ultimately decided on fish because I thought I could have fun making the water look like it was moving. You can see my original sketch below.

Although I based this project on the provided code, I tried my best to insert my original ideas. I made the water have a low detail to look like it was calm but still moving. I made the sea floor have a high detail so it looked jagged and rocky. I made the fish move at different speeds, ensured that they would be between the surface of the water and the sea floor, and randomized their colors to some degree. (I set the blue value equal to zero so they would never be blue and blend into the water.) It took some trial and error to figure out the right proportions of the fish tails and how to color in the water and ground, but I figured out both of those eventually. I had some trouble with making objects in the past, so although the code is simple I’m proud of it. However, I glanced through other projects and noticed a lot of other people decided to something with fish, so in retrospect I wish I could’ve been more original. Overall, though, still a fun project!

landscape

//Daphne Lee
var terrainSpeed = 0.0003;
var terrainCurves = 0.001;
var jx=280;
var jy=300;
var jw=107;
var jh=149;
var jx2=240;
var jy2=280;
var jw2=72;
var jh2=100;
var cx=0;
var cy=390
var cw=113;
var ch=75;
var kx=0;
var ky=350;
var kw=249;
var kh=250;

function preload(){
    jellyfish1 = loadImage("https://i.imgur.com/7ELhX6R.png?1");
    jellyfish2 = loadImage("https://i.imgur.com/Uhau0GX.png?1")
    crab = loadImage("https://i.imgur.com/tPxrvjd.png?1")
    kelp= loadImage("https://i.imgur.com/OZH9VCf.png?1")
}
function setup() {
    createCanvas(480, 480);
}

function drawSeaAndFloor(){
        beginShape();
        noStroke(0);
    //sea
    beginShape();
    fill(51, 204, 204);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainCurves) + (millis() * terrainSpeed*2);
        var y = map(noise(t/2), 0,1, 0, 400);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
    //floor
        beginShape();
        fill(204, 153, 102);
        for (var x = 0; x < width; x++) {
        var t = (x * 2* terrainCurves) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 400, height);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
}
function drawJellyfish(){
    //the bigger jellyfish moving left
    image(jellyfish1,jx,jy,jw,jh);
    jx-=random(0.5,1);
    jy-=random(-0.5,0.5);
    if(jx<-jw){
        jx=480;
    }
    image(jellyfish2,jx2,jy2,jw2,jh2);
    //smaller jellyfish moving right;
    jx2+=random(-0.5,2);
    jy2+=random(-0.5,0.5);
    if(jx2>width){
        jx2=-100;
    }
}
function drawCrab(){
    //crab
    image(crab,cx,cy,cw,ch);
    cx+=random(0.1,2);
    cy+=random(-0.5,0.5);
    if(cx>width){
        cx=-100;
    }
}
function drawKelp(){
    image(kelp,kx,ky,kw,kh);
    kx+=random(0.5,2);
    ky+=random(-0.5,0.5);
    if(kx>width){
        kx=-250;
    }
}

function draw(){
    background(179, 236, 255);
    drawSeaAndFloor();
    drawJellyfish();
    drawCrab();
    drawKelp();
    //sun
    fill(255, 255, 0);
    ellipse(20,20,150,150)
}

I started off with the idea of wanting to make an ocean with sea creatures swimming inside. I tried starting off with clouds but it didn’t really end up the way I wanted to. I decided to use photos to depict these sea creatures and the first picture I stumbled upon was a jellyfish. I started off with one, and then added another one. It was hard for me to figure out how to work with using objects so I ended up going a simpler route that felt more straightforward in my opinion. I tried to make the ocean more realistic looking so I added some kelp and a crab to add more details to it. I didn’t have enough time to try to incorporate some of the other ideas I had such as working with more objects and creating new functions to relate them to and getting a clearer understanding on how these objects move.