aboyle-Project 10-Landscape-Section D

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!