Project 11

The most challenging part of this project is figuring out how to construct the different objects. Objects have to appear and disappear on the screen at a constant rate. For my animation, I drew a bunch of bunnies racing and there’s grass, trees, and the sun in the background.

sketch
//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;
}

Leave a Reply