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);
}