![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
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;
}
