My code shows a scrolling New Mexico landscape, with sagebrush in the foreground, sage-covered land stretching to the mountains in the middleground, and a mountain range in the background.
sketch
//Sam Rauch, section B, srauch@andrew.cmu.edu, project
//this code creates a randomly generated scrolling new mexico landscape with sagebrush
//in the foreground, distant bushes in the middleground, and mountains in the background.
//A late afternoon moon hangs low in the sky.
//arrays for objects
var sageArray = [];
var mountainArray = [];
var backbushes = [];
function setup() {
createCanvas(400, 200);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
frameRate(30);
//fill sage array with random sagebrush
var initsageY = random(30, 40);
for (var i = 0; i<20; i++){
sageArray.push(newSage(initsageY, random(160, 190)));
initsageY += random(20, 40);
}
//fill mountain array with random starter mountains
var initmountX = random(0,40);
for (var i = 0; i < 20; i ++){
var mont = makeMountain(initmountX, random(70, 90), random(40, 60));
mountainArray.push(mont);
initmountX += random(30, 40);
}
//fill backbushes array with random starter bushes
var initBushX = random(0,10);
for (var i = 0; i<100; i++){
backbushes.push(newBush(initBushX, random(100, 150)));
initBushX += random(0, 10);
}
}
function draw() {
background(129, 173, 223);
noStroke();
//draw moon
var moonfill = color(235, 243, 247, 200);
fill(moonfill);
ellipse(300, 50, 20, 20);
//draw middleground
fill(111, 158, 148);
rect(0, 100, 400, 100);
//draw mountains, push in new mountains on right as they go off screen to left
for (var i = 0; i < mountainArray.length; i++){
mountainArray[i].peakX -= 0.25;
mountainArray[i].draw();
if (mountainArray[i].peakX <= -70){
mountainArray.shift();
mountainArray.push(makeMountain(random(440, 460), random(60, 90), random(40, 60)));
}
}
//draw backbushes, push in new ones as go off screen
for (var i = 0; i < backbushes.length; i++){
backbushes[i].x -= 0.5;
backbushes[i].draw();
if (backbushes[i].x <= -10){
backbushes.shift();
backbushes.push(newBush(random(402, 420), random(100, 150)));
}
}
//draw foreground
fill(156, 127, 70);
rect(0, 150, 400, 50);
//draw sagebrush in front
for (var i = 0; i < sageArray.length; i++){
//draw each sagebrush shadow; in seperate loop so it will always draw before
//(thus underneath) the sagebrush
fill(117, 98, 56);
ellipse(sageArray[i].x, sageArray[i].y, 20, 8);
}
for (var i = 0; i < sageArray.length; i++){
sageArray[i].x -= 2; //move each sagebrush along to left
sageArray[i].draw(); //draw each sagebush
}
if (sageArray[0].x < -10){ //if sagebrush is off the canvas, shift and push in a new one
sageArray.shift();
sageArray.push(newSage(random(410, 430), random(160, 190)));
}
}
//objects for sagebrush, mountain, and backbush
function newSage(xpos,ypos){
var sage = {x: xpos, y:ypos, draw:drawSagebrush};
return sage;
}
function drawSagebrush(){
stroke(66, 46, 23);
var bushstart = this.x-10;
for (var i = 0; i<8; i++){
line(this.x,this.y,bushstart,this.y-15);
bushstart += 3;
}
stroke(66, 110, 90);
fill(93, 135, 111);
ellipse(this.x-8, this.y-15, 7, 7);
ellipse(this.x+8, this.y-15, 7, 7);
ellipse(this.x-5, this.y-17, 8, 8);
ellipse(this.x+5, this.y-17, 8, 8);
ellipse(this.x,this.y-18, 10, 10);
noStroke();
}
function makeMountain(x, y, wide){
var mountain = {peakX: x, peakY: y, base:wide, draw: drawMountain};
return mountain;
}
function drawMountain(){
fill(96, 129, 181);
beginShape();
vertex(this.peakX, this.peakY);
vertex(this.peakX-this.base, 100);
vertex(this.peakX+this.base, 100);
endShape();
}
function newBush(xpos,ypos){
var bush = {x: xpos, y:ypos, draw: drawBush};
return bush;
}
function drawBush(){
strokeWeight(5);
stroke(106, 135, 124);
point(this.x, this.y);
strokeWeight(1);
noStroke();
}