elizabew- project – 10-landscape

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 10

var coralspeed = 0.0004;
var coralDetail = 0.005;
var largercoralspeed = 0.0001;
var largercoralDetail = 0.01;
var terrainSpeed = 0.0005;
var terrainDetail = 0.002;

var filearray = [];
var files = [
    "https://i.imgur.com/iWIzq30.png",//coral image
    "https://i.imgur.com/UaGovr7.png",//fish image
    "https://i.imgur.com/kzzaYE9.png"]//golden fish image
var corals = []; //5 every time
var fishes = []; //8 every time
var rarefishes = [];

function preload() {
  for (i = 0; i < files.length; i++){ //preload body
    filearray.push(loadImage(files[i]));
  }
}

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

  for(i = 0; i < 5; i++){
    corals.push(makeCoral()); //number of coral
  }
  for(i = 0; i < 8; i++){
    fishes.push(makeFish()); //number of fish
  }
  for(i = 0; i < 1; i++){
    rarefishes.push(makeRareFish()); //one gold fish
  }

}

function draw(){
	background(3,23,71);
	sandandcoral();

  for(i = 0; i < corals.length; i++){ //drawing and moving coral
    corals[i].draw();
    corals[i].move();
  }
  for(i = 0; i < fishes.length; i++){ //drawing and moving fish
    fishes[i].draw();
    fishes[i].move();
  }
  for(i = 0; i < rarefishes.length; i++){ //drawing and moving rarefish
  rarefishes[i].draw();
  rarefishes[i].move();
  }

  }


//rarefish

function makeRareFish(){
  var rarefish = { rimage: filearray[2],
            rxPos: random(0, width),//random initial x position
            ryPos: random(50, 200), //random y position
            rwidth: random(45, 80), //random width
            rheight: random(45, 70), //random height
            rSpeed: random(-2, -6), //random speed
          }
  rarefish.draw = drawRareFish; //calls to drawFish
  rarefish.move = moveRareFish; //calls to moveFish
  return rarefish;

}

function drawRareFish(){ //draws rare fish
  image(this.rimage, this.rxPos, this.ryPos, this.rwidth, this.rheight);

}

function moveRareFish(){ //moves rare fish
  this.rxPos += this.rSpeed;
  if (this.rxPos < 0){
    this.rxPos = width; //remakes fish once it hits the end
  }
}


//FISH

function makeFish(){
  var fish = { fimage: filearray[1],
            fxPos: random(0, width),//random initial x position
            fyPos: random(50, 250), //random y position
            fwidth: random(45, 80), //random width
            fheight: random(45, 70), //random height
            fSpeed: random(-2, -6) //random speed
          }
  fish.draw = drawFish; //calls to drawFish
  fish.move = moveFish; //calls to moveFish
  return fish;
}

function drawFish(){ //draws fish
  image(this.fimage, this.fxPos, this.fyPos, this.fwidth, this.fheight);

}

function moveFish(){ //moves fish
  this.fxPos += this.fSpeed;
  if (this.fxPos < 0){
    this.fxPos = width; //remakes fish once it hits the end
  }
}


//CORAL

 function makeCoral(){ //object coral
  var coral = { cimage: filearray[0],
            cxPos: random(0, width), //random initial x position
            cyPos: random(300, 350), //random y position
            cSize: random(35, 100), //random size
            cSpeed: random(-5, -10) //random speed
          }
  coral.draw = drawCoral; //calls to drawCoral function
  coral.move = moveCoral; //calls to moveCoal function
  return coral;
}


function drawCoral(){ //draw coral
  image(this.cimage, this.cxPos, this.cyPos, this.cSize, this.cSize);

}

function moveCoral(){ //moving coral
  this.cxPos += this.cSpeed;
  if (this.cxPos < 0){
    this.cxPos = width; //remakes coral once it hits the end
  }
}


//TERRAIN

function sandandcoral() {

  //larger coral background
  beginShape();
  noStroke();
  fill(2,13,39);
  for (var x = 0; x < width; x++) {
      var t = (x * largercoralDetail) + (millis() * largercoralspeed);
      var y = map(noise(t), 0,1, 300, height-400);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //coral background
  beginShape();
  noStroke();
  fill(37,62,103);
  for (var x = 0; x < width; x++) {
      var t = (x * coralDetail) + (millis() * coralspeed);
      var y = map(noise(t), 0,1, 400, height-250);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

  //sand
  beginShape();
  noStroke();
  fill(167,159,146);
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);
      var y = map(noise(t), 0,1, 300, height);
      vertex(0,480);
      vertex(480,480);
      vertex(x, y);
  }
  endShape();

}

 

I had a lot of difficulty with this project since I still wasn’t fully comfortable with making objects and I ran into a the issue of having too many ideas and not knowing how to implement all of them.

My initial idea was to randomize different colored fish with a shark appearing onlysometimes while pieces of coral moved by with the sand terrain.

My final idea only implements randomly sized fish, one randomly sized golden fish, and some coral that moves past with the changing terrain. However, I’m pretty happy with the final product. It doesn’t look the exact way I wanted it too, but happy accidents are okay too.