sketch
function setup() {
createCanvas(400,400);
// create an initial collection of buildings
for (var i = 0; i < 4; i++){
var cx = random(width);
var cy = random(320,350)
cars[i] = makeCar(cx,cy,color(random(255),random(255),random(255)),random(25,45));
}
for (var i = 0; i < 3; i++){
var bx = random(width);
var by = random(20,150)
birds[i] = makeBird(bx,by,color(random(255),random(255),random(255)));
}
frameRate(10);
}
var cars = [];
var birds = [];
function draw() {
push()
fill(170,170,255)
rect(0,0,400,270)
fill(0,170,0)
rect(0,270,400,130)
drawRoad()
drawSun()
for (i=0; i<=50; i++){
drawTree(i*50+20,260)
}
updateAndDisplayCars();
removeCarsThatHaveSlippedOutOfView();
addNewCarsWithSomeRandomProbability();
updateAndDisplayBirds();
removeBirdsThatHaveSlippedOutOfView();
addNewBirdsWithSomeRandomProbability();
}
function drawSun(){
fill(255,200,0)
ellipse(0,0,100,100)
}
function drawTree(x,y){
fill(0,255,0)
triangle(x,y,x-7,y+15,x+7,y+15)
fill(50,30,0)
rect(x-2,y+15,4,10)
}
function drawRoad(){
fill(0)
rect(0,300,400,60)
fill(255,255,0)
for (i = 0; i <= 10; i++){
rect(50*i+15,325,20,5)
}
}
function removeCarsThatHaveSlippedOutOfView(){
var carsToKeep = [];
for (var i = 0; i < cars.length; i++){
if (cars[i].x > 0) {
carsToKeep.push(cars[i]);
}
print(cars[i])
}
cars = carsToKeep; // remember the surviving cars
}
function updateAndDisplayCars(){
// Update the cars's positions, and display them.
for (var i = 0; i < cars.length; i++){
cars[i].move();
cars[i].display();
}
}
function addNewCarsWithSomeRandomProbability() {
// With a probability, add a new car to the end.
var newCarLikelihood = 0.05;
if (random(0,1) < newCarLikelihood) {
cars.push(makeCar(0,random(305,345),color(random(255),random(255),random(255)),random(25,45)));
}
}
// method to update position of cars every frame
function carMove() {
this.x += this.speed;
}
// draw the cars
function carDisplay() {
push()
fill(this.c)
rect(this.x,this.y,this.l,10)
rect(this.x+8,this.y-10,14,10)
ellipse(this.x+11,this.y+8,10,10)
ellipse(this.x+26,this.y+8,10,10)
pop()
}
//make new car with different XY location, color, length, and speed
function makeCar(birthLocationX,birthLocationY,color,carLength) {
var car = {x: birthLocationX,
y: birthLocationY,
c: color,
l: carLength,
speed: random(2,10),
move: carMove,
display: carDisplay}
return car;
}
function removeBirdsThatHaveSlippedOutOfView(){
var birdsToKeep = [];
for (var i = 0; i < birds.length; i++){
if (birds[i].x > 0) {
birdsToKeep.push(birds[i]);
}
print(birds[i])
}
birds = birdsToKeep; // remember the surviving cars
}
function updateAndDisplayBirds(){
// Update the cars's positions, and display them.
for (var i = 0; i < birds.length; i++){
birds[i].move();
birds[i].display();
}
}
function addNewBirdsWithSomeRandomProbability() {
// With a probability, add a new bird to the end.
var newBirdLikelihood = 0.05;
if (random(0,1) < newBirdLikelihood) {
birds.push(makeBird(width,random(20,160),color(random(255),random(255),random(255))));
}
}
// method to update position of birds every frame
function birdMove() {
this.x -= this.speedX;
this.y += this.speedY
}
// draw the birds
function birdDisplay() {
push()
fill(this.c)
triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
ellipse(this.x+9,this.y,7,7) //head
ellipse(this.x+17,this.y+4,15,8)//body
arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
ellipse(this.x+8,this.y-1,1,1)//eyes
pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
var bird = {x: birthLocationX,
y: birthLocationY,
c: color,
speedX: random(5,8),
speedY: random(-1.5,1.5),
move: birdMove,
display: birdDisplay}
return bird;
}
For this project, I created 2 arrays of objects: cars and birds. Cars have random color, length, speedX, and y position on the road; birds have random color, y position in the sky, speedX, and speedY.