Category: Project-10-Landscape

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-10-Landscape

var fish = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.0005;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    noStroke();
    fish.push(makeFish(width));
}
 
function draw() {
    background(130, 255, 246);

    //creating the river
    push();
    beginShape(); 
    fill(96, 149, 255);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height / 6, height / 4);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();
    
    //updating the fish locations 
    updateFish();

    //adding new fish 
    if (fish.length > 0){
        lastFish = fish[fish.length - 1]
        if (lastFish.x + lastFish.length < width - 50){
            addFish();
        }
    }

    // removing fish out of view
    removeFish();
}

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

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

function removeFish() {
    var keep = [];
    for (var i = 0; i < fish.length; i++){
        if (fish[i].x + fish[i].length * 3/2 > 0) {
            keep.push(fish[i]);
        }
    }
    fish = keep;
}

// drawing each fish
function fishDisplay() {
    //tail
    fill(this.r, 0, 0);
    triangle(this.x + this.length * (4 / 5), this.y, this.x + this.length * (3 / 2), this.y + 20, 
        this.x + this.length * (3 / 2), this.y - 20);

    //body
    fill(this.r, this.g, this.b);
    ellipse(this.x + this.length / 2, this.y, this.length, this.h);

    //eye
    fill(0);
    ellipse(this.x + this.length / 5, this.y - this.h / 8, 7, 7);

}

//adding a new fish on the right side of screen
function addFish() {
        fish.push(makeFish(width));
}

//fish object
function makeFish(startX) {
    var fsh = {x: startX,
                y : random(width / 3, width - 30),
                h : random(50, 70),
                length: random(50, 80),
                speed: random(-4, -2),
                r : random(255),
                g : random(255),
                b : random(255),
                move: fishMove,
                display: fishDisplay}
    return fsh;
}

I had a lot of fun making this project! While looking around for inspiration, I was looking at our old assignments we had completed. Then I remembered how much fun I had making the fish design for our first lab exam, and I decided to make this project off of that! (You’ll notice that I used similar code to create the fish). I wanted to give off a river design, where the fish in my landscape are swimming with the current down the river. Overall, I had a lot of fun designing the landscape, and I enjoyed being able to create my own object type 🙂 .

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-10-Landscape
*/

var trees = []; //array for bigger trees (in the back)
var bushes = []; //array for smaller trees 
                 //I just called them bushes to make things easier
var speed = 0.00001; //leftward shift rate of mountains

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

  // create initial trees; make 5 big and 5 small trees
  for (var t = 0; t < 5; t++){
    var tx = random(width);
    trees[t] = makeTree(tx);
    var bx = random(width);
    bushes[t] = makeBush(bx);
  }
  frameRate(10); //set tree and bush frameRate to 10
}

//make tree at x
function makeTree(tx) {
  var trees = {x: tx,
              draw: treeDraw}
  return trees;
}

//make bush at x
function makeBush(bx) {
  var bushes = {x: bx,
              draw: bushDraw}
  return bushes;
}

//draw tree
function treeDraw() {
  noStroke();
  //leaves
  fill(14, 90, 117);
  triangle(this.x - 20, 398, this.x + 20, 398, this.x, 320);
  //trunk
  stroke(13, 77, 94);
  line(this.x, 330, this.x, 400);
  //movement
  this.x -= 1;

  //make new trees
  var newTree = 0.0025; //probability for new tree "birth"
  if (random(0, 1) < newTree) {
      trees.push(makeTree(width + 20)); //push new tree into trees array
  }
}

//draw bush
function bushDraw() {
  noStroke();
  //leaves
  fill(28, 65, 72);
  triangle(this.x - 15, 403, this.x + 15, 403, this.x, 330);
  //trunk
  stroke(13, 77, 94);
  line(this.x, 340, this.x, 405);
  //movement
  this.x -= 1.2;

  //make new bushes
  var newBush = 0.0025; //probability for new bush "birth"
  if (random(0, 1) < newBush) {
      bushes.push(makeBush(width + 15)); //push new bush into bushes array
  }
}

function draw() {
  background(228, 239, 242);
  noStroke();

  //orange gradient layer
  for (var y = 100; y < 400; y++) { //for this specific y interval,
    var a = map(y, 100, 400, 0, 255); //map y interval to alpha
    stroke(240, 178, 158, a); 
    line(0, y, width, y); //draw lines with mapped alphas
  }

  //sun
  fill(240, 178, 158);
  ellipse(240, 200, 25);

  //mountain layer 1
  beginShape(); 
  stroke(149, 189, 207);
  var variance1 = 0.001;
  for (i = 0; i < width; i++) {
    var t = (i * variance1) + (millis() * speed);
    var y = map(noise(t), 0, 1, 100, height);
    line(i, y, i, height); 
    }
  endShape();

  //fog layer 1
  for (var y = 200; y < 400; y++) {
    var b = map(y, 200, 400, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //mountain layer 2
  beginShape(); 
  stroke(85, 170, 200);
  var variance2 = 0.0015;
  for (j = 0; j < width; j++) {
    var t = (j * variance2) + (millis() * speed);
    var y = map(noise(t), 0, 1, 150, height);
    line(j, y, j, height); 
    }
  endShape();

  //fog layer 2
  for (var y = 200; y < 480; y++) {
    var b = map(y, 200, 480, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //draw trees using the treeDraw function
  for (var u = 0; u < trees.length; u++) {
    trees[u].draw();
  }

  //fog layer 3
  for (var y = 350; y < 480; y++) {
    var b = map(y, 350, 480, 0, 255);
    stroke(187, 208, 214, b);
    line(0, y, width, y);
  }

  //ground layers
  noStroke();
  fill(117, 144, 139);
  rect(-1, 400, width + 1, 10);
  fill(63, 84, 77);
  rect(-1, 405, width + 1, 80);

  //draw bushes using the bushDraw function
  for (var v = 0; v < bushes.length; v++) {
    bushes[v].draw();
  }

  //removes trees when they go off the left edge of the screen;
  //stores the trees still on screen in a new array
  var treesToKeep = [];
  for (var i = 0; i < trees.length; i++){
    if (trees[i].x + 20 > 0) {
      treesToKeep.push(trees[i]);
    }
  }
  trees = treesToKeep;

  //removes bushes when they go off the left edge of the screen;
  //stores the bushes still on screen in a new array
  var bushesToKeep = [];
  for (var v = 0; v < bushes.length; v++){
    if (bushes[v].x + 20 > 0) {
      bushesToKeep.push(bushes[v]);
    }
  }
  bushes = bushesToKeep;

}

I enjoyed this project, even though I initially struggled a lot with what kind of landscape I wanted to do. I wanted to make a landscape that looked believable, and since we basically all only had one terrain generation template, it was hard for me to pick a landscape I felt like I could create and be satisfied with. I ended up looking through landscape photos and using one for inspiration and reference. It was really helpful to be able to pull colors from the photo, as well as realistic landscape qualities.

I’m pretty proud with how my landscape turned out, especially with the fog (which I learned how to code alpha gradients for). I really want to try using this kind of concept to generate backgrounds that could be used for games or for open-world environments. I might explore some of that in the future (maybe for my final project?).