Project 11 – Landscape

sketchDownload
//Ian Lippincott
//ilippinc@andrew.cmu.edu
//Section: D
//Project 11

var hill = [];
var mountains = [];
var trees = [];
var c1;
var c2;
var noiseParam = 0;
var noiseStep = 0.03;

function setup() {
    createCanvas(400, 240);
    //Define background colors
    c1 = color(228, 90, 41);
    c2 = color(221, 197, 75);
    strokeWeight(1);
    frameRate(20);
    for (var i = 0; i < (width / 5) + 1; i++) {
      var n = noise(noiseParam);
      var value = map(n, 0, 1, 50, 200);
      hill.push(value);
      noiseParam += noiseStep;
    }
}

 // create an initial collection of mountains 
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        mountains[i] = makemountain(rx);
    }

// create an initial collection of trees 
    for (var i = 0; i < 10; i++){
        var r = random(width);
        trees[i] = maketree(r);
    }    

function draw() {
  setGradient(c1, c2);
  strokeJoin(BEVEL);
  stroke(0);
  strokeWeight(4);
  fill(63, 77, 44);
  hill.shift(); 
  var n = noise(noiseParam);
  var value = map(n, 0, 1, 50, 150);
    hill.push(value);
    noiseParam += noiseStep;
    beginShape();
    vertex(0, height);
    for (var i = 0; i < (width / 5) + 1; i++) {
      vertex(i * 5, hill[i]);
    } 
    vertex(width, height);
    endShape();

    //Ground
    fill(95, 110, 73);
    rect(0, 199, width, height);

    //mountains
    updateAndDisplayMountains();
    removeMountainsThatHaveSlippedOutOfView();
    addNewMountainsWithSomeRandomProbability();

    //Trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
}

//mountains
function makeMountain(birthLocationX) {
    var mntn = {x: birthLocationX,
                breadth: 70,
                speed: -5.5,
                nFloors: round(random(2,8)),
                move: mountainMove,
                display: mountainDisplay}
    return mntn;
}

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

// draw the mountain
function mountainDisplay() {
    var floorHeight = 8;
    var cHeight = this.nFloors * floorHeight; 
    
    strokeWeight(4);
    stroke(0);
    fill(156, 119, 76);
    push();
    translate(this.x, height - 40);

    //Mountain
    triangle(-7,0,this.breadth/2,-cHeight-20,this.breadth + 7,0);
    //Shadow
    fill(87, 66, 42);
    triangle(-7,0,this.breadth/2,-cHeight-20,20,0);
    //Snow
    pop();
}

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

function removeMountainsThatHaveSlippedOutOfView(){
  var mountainToKeep = [];
  for (var i = 0; i < mountains.length; i++){
    if (mountains[i].x + mountains[i].breadth > 0) {
        mountainToKeep.push(mountains[i]);
    }
  }
  mountains = mountainToKeep; // remember the surviving mountain
}

function addNewMountainsWithSomeRandomProbability() {
    // With a very tiny probability, add a new cabin to the end.
    var newMountainLikelihood = 0.02; 
    if (random(0,1) < newMountainLikelihood) {
        mountains.push(makeMountain(width));
    }
}


//trees
function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                breadth: 70,
                speed: -6.0,
                nFloors: round(random(2,8)),
                move: treeMove,
                display: treeDisplay}
    return tr;
}

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

// draw the tree
function treeDisplay() {
    var floorHeight = 8;
    var cHeight = this.nFloors * floorHeight; 
    
    strokeWeight(4);
    stroke(0);
    fill(71, 145, 80);
    push();
    translate(this.x, height - 40);

    //Tree
    triangle(0, 0, 10,-cHeight, 20, 0);
    triangle(0, -8, 10,-cHeight, 20, -8);
    triangle(0, -16, 10,-cHeight, 20, -16);
    pop();
}

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

function removeTreesThatHaveSlippedOutOfView(){
  var treeToKeep = [];
  for (var i = 0; i < trees.length; i++){
    if (trees[i].x + trees[i].breadth > 0) {
        treeToKeep.push(trees[i]);
    }
  }
  trees = treeToKeep; // remember the surviving mountain
}

function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new cabin to the end.
    var newTreeLikelihood = 0.08; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

//Makes Gradient Background
function setGradient(c1, c2) {
  noFill();
  for (var b = 0; b < height; b++) {
    var inter = map(b, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, b, width, b);
  }
}

Leave a Reply