Srauch – Project 11 – Scrolling Landscape

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