For this project, I went with a simple scrolling sunset city & mountain view. The sun has a second ring around it just because I felt that it gave it more of a setting sun feeling. Then the buildings have flashing lights because I thought about how dorm/student living buildings when you look at them from the outside. Everyone seems to have different color LED lights lighting up their rooms in all different colors.
//Helen Cheng
//helenc1@andrew.cmu.edu
//Project 11
//Section C
var buildings = [];
var hill = [];
var noiseParam = 0;
var noiseStep = 0.01;
var n;
var hillPoint;
function setup() {
createCanvas(640, 240);
// create an initial collection of buildings
for (var i = 0; i < 10; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
//creates initial set of mountains
for (i=0; i<=width/5; i++) {
n = noise(noiseParam);
hillPoint = map(n, 0, 1, 0, height);
hill.push(hillPoint);
noiseParam += noiseStep;
}
frameRate(10);
}
function draw() {
background(93, 150, 168);
//setting sun
fill(245, 188, 159);
circle(width/2, height/2, 100);
fill(250, 211, 125);
circle(width/2, height/2, 50);
drawHills();
displayHorizon();
updateAndDisplayBuildings();
removeBuildings();
addNewBuildings();
}
function drawHills() {
var x = 0;
beginShape();
vertex(0, height);
stroke(0);
fill(126, 168, 151);
//draws hill shape
for (i=0; i<width/5; i++) {
vertex(5*i, hill[i]);
}
//appends new hill point and removes first
hill.shift();
vertex(width, height);
n = noise(noiseParam);
hillPoint = map(n, 0, 1, 0, height);
hill.push(hillPoint);
noiseParam += noiseStep;
endShape(CLOSE);
}
function updateAndDisplayBuildings(){
// Update the building's positions, and display them.
for (var i = 0; i < buildings.length; i++){
buildings[i].move();
buildings[i].display();
}
}
function removeBuildings(){
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep;
}
function addNewBuildings() {
var newBuildingLikelihood = 0.005;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}
// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}
// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
stroke(0);
fill(245, 229, 201);
push();
translate(this.x, height - 40);
rect(0, -bHeight, this.breadth, bHeight);
stroke(200);
for (var i = 0; i < this.nFloors; i++) {
fill(color(random(255), random(255), random(255)));
rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
}
pop();
}
function makeBuilding(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 50,
speed: -2.0,
nFloors: round(random(2,9)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}
function displayHorizon(){
stroke(0);
fill(202, 245, 201);
rect(0,height-50, width, height);
}