Month: November 2022

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

//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project 11

//image
var img;

//frame 
var frameCount = 0;

//array
var treeShow = [];
var grassShow = [];
var bunnyShow = [];

//object
var tree;
var grass;
var bunny;



//preload sun image
function preload(){
    img = loadImage("https://i.imgur.com/AZGb5wn.png")
}

function setup() {
    createCanvas(475, 300);

    //setup tree
    for(var t = 0; t < 80; t++) {
        tree = makeTree(t*10, 170);
        treeShow.push(tree);
    }

    //setup grass
    for(var g = 0; g<30; g++) {
        grass = makeGrass(g*20, 200);
        grassShow.push(grass);
    }

    //setup car
    for(var h = 0; h < 5; h++) {
        bunny = makeBunny(0, round(random(240, 260)), random(2,3));
        bunnyShow.push(bunny);
    }

}


function draw() {
    background("lightblue");

    //draw the sun
    image(img,140,-100);

    //draw tree
    updateTree();
    removeTree();
    addTree();

    //draw fence
    fill("black")
    rect(0,196,width,6);

    //draw grass
    updateGrass();
    removeGrass();
    addGrass();

    //draw bunny
    updateBunny();
    removeBunny();
    addBunny();
}



//CONSTRUCT BUNNY//
function makeBunny(bx, by, forward) {
    var bunny = {x: bx, y:by,
        speed:forward,
        r: random(100,255),
        g: random(100,255),
        b: random(100,255),
        move: bunnyMove,
        draw: drawBunny 
    }
    return bunny;
}

function drawBunny() {
    fill(this.r, this.g, this.b);
    ellipse(this.x,this.y,20,20);
    ellipse(this.x-5,this.y-10,10,20);
    ellipse(this.x+5,this.y-10,10,20);
    ellipse(this.x-10,this.y+15,40,20);
    ellipse(this.x-30,this.y+15,10,10);

    fill(0);
    ellipse(this.x+5, this.y, 4, 4);
    ellipse(this.x-5, this.y, 4, 4);

}

function updateBunny() {
    for(var i = 0; i < bunnyShow.length; i++) {
        bunnyShow[i].move();
        bunnyShow[i].draw();
    }
}

function bunnyMove() {
    this.x += this.speed;
}

function removeBunny() {
    var bunnyKeep = [];
    for (var i = 0; i < bunnyShow.length; i++){
        if (bunnyShow[i].x < width) {
            bunnyKeep.push(bunnyShow[i]);
        }
    }
    bunnyShow = bunnyKeep; // remember the showing cars

}

function addBunny() {
    frameCount +=1;
    if (frameCount % 100== 0){
        bunnyShow.push(makeBunny(0, round(random(240, 260)), random(2,4)));
    }

}



//CONSTRUCT GRASS//
function makeGrass(gx, gy) {
    var grass = {x:gx, y:gy, 
        width:random(40, 70), 
        height:random(100, 300), 
        r:random(70,200), g:random(115,200), b: random(20, 100),
        speed: -0.5,
        move: grassMove,
        draw: drawGrass
    }
    return grass;
}

function drawGrass() {
    noStroke();
    fill(this.r, this.g, this.b);
    rect(this.x, this.y, this.width, this.height);
}

function updateGrass() {
    for(var g = 0; g < grassShow.length; g++) {
        grassShow[g].move();
        grassShow[g].draw();
    }
}

function grassMove() {
    this.x += this.speed;
}

function removeGrass() {
    var grassKeep = [];
    for (var g = 0; g < grassShow.length; g++){
        if (grassShow[g].x + width > 0) {
            grassKeep.push(grassShow[g]);
        }
    }
    grassShow = grassKeep; 
}

function addGrass() {
    frameCount +=1;
    if (frameCount % 25 == 0){
        grassShow.push(makeGrass(width,200));
    }

}



//CONSTRUCT TREE//
function updateTree() {
    for(var t =0; t < treeShow.length; t++){
        treeShow[t].move();
        treeShow[t].draw();
    }

}

function removeTree(){
    var treeKeep = [];
    for (var t = 0; t < treeShow.length; t++){
        if (treeShow[t].x +80 > 0) {
            treeKeep.push(treeShow[t]);
        }
    }
    treeShow = treeKeep; 
}

function addTree() {
    frameCount +=1;
    if (frameCount % 25 == 0){
        treeShow.push(makeTree(width+80,170));
    }
}

function makeTree(tx, ty) {
    var tree = {x:tx, y:ty, 
        width:random(80, 150),  
        r:0, g:random(90,200), b: random(10, 20),
        speed: -1,
        move: treeMove,
        draw: drawtree
    }
    return tree;

}

function drawtree() {
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, this.width);
}


function treeMove() {
    this.x += this.speed;
}