sketch/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A
This draws a moving scene.
*/
var buildings = [];
var clouds = [];
var hills = [];
var noiseParam=0;
var noiseStep=0.05;
function setup() {
createCanvas(480, 300);
// create an initial collection of buildings
for (var i = 0; i < 5; i++){
var rx = random(width);
buildings[i] = makeBuilding(rx);
}
frameRate(10);
// create an initial collection of clouds
for (var i = 0; i < 10; i++){
var rx = random(width);
clouds[i] = makeCloud(rx);
}
// creates initial hills
for (var i=0; i<width/5; i++) {
var n = noise(noiseParam);
var value = map(n, 0, 1, 0, height);
hills.push(value);
noiseParam+=noiseStep;
}
}
function draw() {
background(255,140,102);
// draws outline around canvas
stroke(0);
strokeWeight(10);
fill(255,140,102);
rect(0,0,width,height);
// draws sun
strokeWeight(3);
fill(183,52,52);
circle(width/2,height/1.2,400);
fill(229,134,81);
circle(width/2,height/1.2,300);
fill(225,185,11);
circle(width/2,height/1.2,200);
// begins the hill shape
var x=0;
stroke(0);
strokeWeight(3);
fill(93, 168, 96);
beginShape();
curveVertex(0, height);
curveVertex(0, height);
// loops through each of the values in the hills array
for (i=0; i<hills.length; i++) {
curveVertex(x, hills[i]);
x+=15;
}
curveVertex(width, height);
curveVertex(width, height);
endShape();
//removes the first value from the list and appends a new one
//onto the end to make the terrain move
hills.shift();
var n = noise(noiseParam);
var value = map(n, 0, 1, 0, height);
hills.push(value);
noiseParam+=noiseStep;
displayHorizon();
updateAndDisplayBuildings();
removeBuildingsThatHaveSlippedOutOfView();
addNewBuildingsWithSomeRandomProbability();
updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutofView();
addNewCloudsWithSomeRandomProbability();
}
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 updateAndDisplayClouds() {
// update the clouds' positions and display them
for (var i=0; i<clouds.length; i++) {
clouds[i].move();
clouds[i].display();
}
}
function removeBuildingsThatHaveSlippedOutOfView(){
// If a building has dropped off the left edge,
// remove it from the array. This is quite tricky, but
// we've seen something like this before with particles.
// The easy part is scanning the array to find buildings
// to remove. The tricky part is if we remove them
// immediately, we'll alter the array, and our plan to
// step through each item in the array might not work.
// Our solution is to just copy all the buildings
// we want to keep into a new array.
var buildingsToKeep = [];
for (var i = 0; i < buildings.length; i++){
if (buildings[i].x + buildings[i].breadth > 0) {
buildingsToKeep.push(buildings[i]);
}
}
buildings = buildingsToKeep; // remember the surviving buildings
}
function removeCloudsThatHaveSlippedOutofView() {
var cloudsToKeep = [];
for (var i=0; i<clouds.length; i++) {
if (clouds[i].x + clouds[i].width>0) {
cloudsToKeep.push(clouds[i]);
}
}
clouds = cloudsToKeep;
}
function addNewBuildingsWithSomeRandomProbability() {
// add a new building
var newBuildingLikelihood = 0.007;
if (random(0,1) < newBuildingLikelihood) {
buildings.push(makeBuilding(width));
}
}
function addNewCloudsWithSomeRandomProbability() {
// add a new cloud
var newCloudLikelihood = 0.001;
if (random(0,1) < newCloudLikelihood) {
clouds.push(makeCloud(width));
}
}
// method to update position of building every frame
function buildingMove() {
this.x += this.speed;
}
// updates the position of every cloud frame
function cloudMove() {
this.x += this.speed;
}
// draw the building and some windows
function buildingDisplay() {
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(53,156,249);
stroke(0);
strokeWeight(3);
push();
translate(this.x, height - 40);
rect(0, -bHeight, this.breadth, bHeight);
fill(255);
//rect(this.breath/2, bHeight-20, this.breath/5, bHeight/5);
rect(5, -35, 10, (bHeight/5));
pop();
}
function cloudDisplay() {
fill(255);
noStroke();
//stroke(0);
//strokeWeight(3);
push();
//translate(this.x, height-40);
ellipse(this.x, this.y, this.width, this.height);
ellipse(this.x+this.width/2, this.y+3, this.width, this.height);
ellipse(this.x-this.width/2, this.y+3, this.width, this.height);
pop();
}
function makeBuilding(startX) {
var bldg = {x: startX,
breadth: 50,
speed: -1.0,
nFloors: round(random(2,8)),
move: buildingMove,
display: buildingDisplay}
return bldg;
}
function makeCloud(startX) {
var cloud = {x: startX,
y: random(20,90),
width: random(10,20),
height: random(10,20),
speed: -1.0,
move: cloudMove,
display: cloudDisplay}
return cloud;
}
function displayHorizon(){
noStroke();
fill(155,27,66);
rect(0, height-50, width, 50);
stroke(0);
strokeWeight(3);
line (0, height-50, width, height-50);
}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/09/stop-banner.png)
