Project-11-Landscape

For this project, I wanted to create a desert landscape with some cactus here and there.

sketch
//jiaqiwa2; Jiaqi Wang; Section C
var marketValue=[];
var noiseParam=0;

var noiseStep=0.03;
var cactus = [];

function setup() {
    frameRate(30);
    createCanvas(600, 240);
    stroke(89,158,90);
    noStroke();
    fill(89,158,90);
    //strokeWeight(5);
    //set up the y value for every 5 pixels across the canvas horizontally
    for(var i=0;i<=120;i++){
        var n=noise(noiseParam);
        var value=map(n,0,1,height/3,height);
    	marketValue.push(value);
    	noiseParam+=noiseStep;
    }
    frameRate(20);

    for (var i = 0; i < 10; i++){
        var rx = random(width);
        cactus[i] = makeCactus(rx);
    }

}

function draw() {
	background(234,197,119);
  fill(249,242,215);
  noStroke();
  ellipse(width/2,height/2,100,100);
  //remove the first point
    marketValue.shift();
    var n=noise(noiseParam);
    var value=map(n,0,1,height/3,height);
    //and add it to the last point
    marketValue.push(value);
    noiseParam+=noiseStep;
    //start shape from (0,height)
    noStroke();
    fill(186,109,78);

  beginShape();
  curveVertex(0,height);
  curveVertex(0,height);
	for(var i=0;i<width/10;i++){
       
       vertex(i*10, marketValue[i]);
       //check if the hill is close to the right end
        if(i==59){
         i+=1;
         vertex(i*10, marketValue[i]);
         vertex(width, height);
         vertex(0,height);
         vertex(0,height);
         endShape();
       }
  }

  beginShape();
  curveVertex(0,height);
  curveVertex(0,height);



  

 

  updateAndDisplayCactus();
  removeCactusThatHaveSlippedOutOfView();
  addNewCactusWithSomeRandomProbability(); 
     
	   
	//noLoop();
}



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


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) {
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) {
         cactus.push(makeCactus(width));
    }
}


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

// draw the building and some windows
function  cactusDisplay() {
  
    push();
    fill(55,104,50);
    stroke(16,66,7);
    strokeWeight(5);
    translate(this.x, height+90);
    ellipse(0,-100,this.breadth,this.Tall);
    
    push();
    
    translate(this.breadth/2,-this.Tall/2);
    rotate(radians(-20));
    ellipse(0,-100,this.breadth/3*2,this.Tall/3*2);
    pop();

    translate(this.breadth/2,-this.Tall/2);

    push();
    rotate(radians(20));
    translate(-this.branch,0);
    ellipse(0,-100,this.breadth/3*2,this.Tall/3*2);
    pop();


   
    translate(-this.branch/5,-this.Tall/3);
    ellipse(0,-100,this.breadth/6*2,this.Tall/6*2);
    pop();

}


function makeCactus(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: round(random(20,40)),
                speed: -2,
                Tall:random(40,120),
                branch:random(30,40),
                theta: round(random(10,40)),
                move:  cactusMove,
                display:  cactusDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}





Leave a Reply