For this project, I wanted to create a bustling city environment. I created an iPhone in the middle with someone pressing the record button, imagining that they are in a driving car and want to take in the city.
sketch
/*
* Amy Lee
* amyl2
* Section B
*/
// Variables for people
var px = [];
var py = [];
var pdx = [];
var pc = [];
var skin = [];
var pWidth = [];
var pHeight = [];
// Variables for clouds
var cx = [];
var cy = [];
var cdx = [];
var cWandH = [];
var buildings = [];
var houses = [];
function preload() {
// loading image files
finger = loadImage("https://i.imgur.com/DPWPwwe.png");
police = loadImage("https://i.imgur.com/9xYWNnM.png");
taxi = loadImage("https://i.imgur.com/ywwvyoP.png")
}
function setup() {
createCanvas(480,480);
frameRate(20);
// Finger
fin = new Object();
fin.image = finger;
fin.x = 200;
fin.y = 460;
fin.dx = 1;
fin.dy = 1;
fin.width = 290;
fin.height = 200;
fin.move = fingerMove;
fin.draw = fingerDraw;
pol = new Object();
pol.image = police;
pol.x = 700;
pol.y = 255;
pol.dx = 15;
pol.width = 240;
pol.height = 240;
pol.move = polMove;
pol.draw = polDraw;
tax = new Object();
tax.image = taxi;
tax.x = 900;
tax.y = 275;
tax.dx = 10;
tax.width = 230
tax.height = 230
tax.move = taxiMove;
tax.draw = taxiDraw;
// People
for (var i = 0; i < 10; i ++){
px[i] = random(25, width - 25);
py[i] = 350;
pdx[i] = random(1,3);
pc[i] = color(random(255), random(255), random(255));
skin[i] = color(random(55,200), 80, 90);
pWidth[i] = random(20,50);
pHeight[i] = random(30,80);
}
// Clouds
for (var i = 0; i < 5; i ++){
cx[i] = random(20,460);
cy[i] = random(30,90);
cdx[i] = 2;
// cloud width and height
cWandH[i] = random(20,30);
}
// Building
for (var j = 0; j < 5; j ++){
var bx = random(width);
buildings[j] = makeBuildings(bx);
}
// House
for (var k = 0; k < 3; k ++){
var hx = random(width);
houses[k] = makeHouses(hx);
}
frameRate(10);
}
function draw() {
// background(130,208,218);
background(200,241,208);
sidewalk();
road();
// Draw clouds, make them move right, and reappear if they move off canvas
for (var i = 0; i < 5; i++){
cloud(cx[i], cy[i], cdx[i], cWandH[i], cWandH[i]);
cx[i] += cdx[i];
if (cx[i] > width + 10){
cx[i] = -40;
}
}
updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
addNewBuildingsWithSomeRandomProbability();
updateAndDisplayHouses();
removeHousesThatHaveSlippedOutOfView();
addNewHousesWithSomeRandomProbability();
// Make buildings reappear if they go off the right side of the canvas
// Reappear on the left side
for (var j = 0; j < buildings.length; j++){
if (buildings[j].x > width + 20) {
buildings[j].x = -60;
}
}
// Make houses reappear if they go off the right side of the canvas
// Reappear on the left side
for (var k = 0; k < houses.length; k ++){
if (houses[k].x > width + 20) {
houses[k].x = -100;
}
}
// Make people reappear if they go off the right side of the canvas
// Reappear on the left side
for (var i = 0; i < 10; i ++){
people(px[i], py[i], pdx[i], pc[i],skin[i],pWidth[i], pHeight[i]);
px[i] += pdx[i];
if(px[i] > width+50){
px[i] = -50;
}
}
pol.draw();
pol.move();
tax.draw();
tax.move();
drawiPhone();
fin.draw();
fin.move();
if (frameCount >= 60){
record();
}
}
function people(px, py, pdx, pc,skin, pWidth, pHeight){
fill(pc);
noStroke();
// Shirt
ellipse(px, py, pWidth, pHeight);
// Head
fill(skin);
ellipse(px,py-25,20,20);
}
function fingerDraw(){
image(finger, this.x, this.y, this.width, this.height);
}
// Move finger to record button
function fingerMove(){
if (fin.x > 142 & this.y > 378){
this.x -= this.dx;
this.y -= this.dy;
}
}
function polDraw(){
image(police, this.x, this.y, this.width, this.height);
}
function polMove(){
this.x -= this.dx;
if (this.x <= -800){
this.x = 500;
}
}
function taxiDraw(){
image(taxi, this.x, this.y, this.width, this.height);
}
function taxiMove(){
this.x -= this.dx;
if (this.x <= -1000){
this.x = 500;
}
}
// BUILDINGS //
function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var j = 0; j < buildings.length; j++){
buildings[j].move();
buildings[j].display();
}
}
function removeBuildingsThatHaveSlippedOutOfView(){
var buildingsToKeep = [];
for (var j = 0; j < buildings.length; j++){
if (buildings[j].x + buildings[j].breadth > 0) {
buildingsToKeep.push(buildings[j]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}
function addNewBuildingsWithSomeRandomProbability() {
// With a very tiny probability, add a new building to the end.
var newBuildingsLikelihood = .0006;
if (random(0,1) < newBuildingsLikelihood) {
buildings.push(makeBuildings(width));
}
}
// Make buildings move to right
function buildingsMove() {
this.x += this.speed;
}
function buildingsDisplay() {
var floorHeight = 30;
var bHeight = this.nFloors * floorHeight;
push();
noStroke();
fill(this.col);
translate(this.x, height - 40);
// Drawing the actual buildings
rect(0, -bHeight-110, this.breadth, bHeight);
// fill(18, 126, 190);
// Windows
for (var i = 0; i < this.nFloors; i++) {
fill(18, 126, 190);
rect(5, -130 - (i * floorHeight), this.breadth - 10, 10);
}
// Building antennae
stroke(18,126,190);
strokeWeight(2);
line(5,-bHeight-110,5,-bHeight-120);
line(10,-bHeight-110,10, -bHeight-130);
noStroke();
pop();
}
function makeBuildings(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 60,
speed: 4.0,
col: color(121,204,221),
nFloors: round(random(5,10)),
move: buildingsMove,
display: buildingsDisplay}
return bldg;
}
// HOUSES //
function updateAndDisplayHouses(){
for (var k = 0; k < houses.length; k++){
houses[k].move();
houses[k].display();
}
}
function makeHouses(birthLocationX){
var houses = {x: birthLocationX,
breadth: 100,
speed: 4.0,
col1: color(232,175,104),
col2: color(182,110,125),
nFloors: round(random(2,4)),
move: housesMove,
display: housesDisplay}
return houses;
}
function removeHousesThatHaveSlippedOutOfView() {
var housesToKeep = [];
for (var k = 0; k < houses.length; k++){
if (houses[k].x + houses[k].breadth > 0) {
housesToKeep.push(houses[k]);
}
}
houses = housesToKeep;
}
function addNewHousesWithSomeRandomProbability() {
var newHousesLikelihood = .0001;
if (random(0,1) < newHousesLikelihood) {
houses.push(makeHouses(width));
}
}
function housesMove() {
this.x += this.speed;
}
function housesDisplay() {
var floorHeight = 20;
var hHeight = this.nFloors * floorHeight;
push();
noStroke();
fill(this.col1);
translate(this.x, height-30);
rect(0, -hHeight - 110, this.breadth, hHeight);
fill(this.col2);
triangle(0, -hHeight - 110, this.breadth, -hHeight - 110, this.breadth/2, -hHeight - 140);
rect(30, -hHeight - 90, this.breadth - 60, hHeight - 20);
fill(252, 197, 132);
ellipse(50, -hHeight - 110 , 8, 8);
pop();
}
function cloud(cx, cy, cdx, cWandH, cWandH){
push();
stroke(255);
strokeWeight(20);
line(cx, cy, cx+30, cy);
pop();
fill(255);
ellipse(cx,cy,cWandH, cWandH);
ellipse(cx+10,cy-10,cWandH, cWandH);
ellipse(cx+20,cy,cWandH, cWandH);
}
function drawiPhone(){
fill(0);
// top rectangle
rect(130,40,200,60);
// left side
rect(130,40,20,400);
// right side
rect(330,40,20,400);
// bottom rectangle
rect(130,380,200,60)
// home button
fill(255);
ellipse(236,416,31,31);
fill(33);
ellipse(240,416,33,33);
// small rectangle at top
fill(58);
rect(215,65,50,10);
// glass shine
push();
stroke(255);
strokeWeight(10);
line(160,140,200,110);
line(160,170,240,110);
line(240,360,310,305);
line(272,370,315,336);
pop();
}
function sidewalk(){
noStroke();
fill(236,205,158);
rect(0,330,480,70);
fill(132,64,64);
rect(0,390,480,10);
}
function road(){
fill(180,145,126);
rect(0,400,480,80);
}
// REC button on iPhone
function record(){
fill(255,0,0);
ellipse(270,124,13,13);
textSize(20);
text("REC", 280, 130);
}