![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2023/09/stop-banner.png)
My final project is both about light pollution and the aurora borealis. The details are revealed through the facts displayed when you click on the moon. The facts related to the aurorae detail how the same phenomenon that causes aurorae also cause ozone layer depletion. Additionally, the electron precipitation introduced during aurora enters the Earth’s thermosphere may cause further depletion of the ozone layer. (https://www.innovationnewsnetwork.com/evidence-of-earths-auroras-causing-mesospheric-ozone-layer-depletion/14279/). To talk about aurorae, we must also talk about light pollution. Particularly in cities, it’s difficult to see such views or any stars at all in the night sky. Pittsburgh has dealt with both these subjects; you can’t see stars at night, and recently aurorae was visible just north of the city.
sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Final Project
var buildings = [];
var buildingsShowing = [];
var stars = [];
var starsShowing = [];
var counter = 0;
var starsCounter = 0;
var moonAngle = 0;
//gradient variables
const X_AXIS = 2;
let c1, c2;
var facts = ["Light pollution impacts animal behaviors, such as migration patterns, wake-sleep cycles, and habitat formation.",
"Increased amounts of light at night lowers melatonin production, resulting in sleep deprivation, stress, anxiety, etc.",
"Nocturnal light interrupts sleep and confuses the circadian rhythm in humans and animals.",
"Astronomers are concerned with light pollution as it reduces their ability to view celestial objects.",
"The phenomena that causes aurorae also causes ozone layer depletion.",
"The ozone layer protects life on Earth from damaging UV light.",
"The electron precipitation that escapes into the thermosphere during aurora may cause further ozone layer depletion.",
"The aurora borealis was recently visible as low as in Pittsburgh."];
var index = 0;
var moonImg;
function preload(){
//load image
moonImg = loadImage("https://i.imgur.com/1lsi57S.png");
}
function setup() {
createCanvas(640,240);
frameRate(30);
//lerp color for aurorae sky
c1 = color(98, 6, 137); //purple
c2 = color(1, 153, 82); //green
//buildings
for (var i = 0; i < 20;i++){
var bldngs = random(width);
buildings[i] = makeBuildings(bldngs);
}
//stars
for (var i = 0; i < 20;i++){
var strs = random(width);
stars[i] = makeStars(strs);
}
}
function draw() {
fill(6, 11, 49);
rect(0,0, 640, 240);
//if mouse is at top, stars and aurorae appear
if (mouseY<height/2){
setGradient(0, 0, 710, 400, c2, c1, X_AXIS);
updateAndDrawStars();
removeStarsOffScreen();
addNewStars();
}
//moon spins
push();
translate(50, 50);
rotate(moonAngle);
imageMode(CENTER);
image(moonImg, 0, 0, 50, 50);
pop();
moonAngle+=.05;
noStroke();
updateAndDrawBuildings();
removeBuildingsOffScreen();
addNewBuildings();
//facts cycle
push();
fill(255);
textAlign(CENTER);
textSize(9);
textFont("Georgia");
text(facts[index], width/2, 50);
pop();
}
//gradient for new background
function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
// Left to right gradient
for (let i = x; i <= x + w; i++) {
let inter = map(i, x, x + w, 0, 1);
let c = lerpColor(c1, c2, inter);
stroke(c);
line(i, y, i, y + h);
}
}
function updateAndDrawBuildings(){
for(var i=0; i < buildingsShowing.length; i++){
buildingsShowing[i].move();
buildingsShowing[i].draw();
}
}
function removeBuildingsOffScreen(){
var buildingsToKeep = [];
for (var i = 0; i < buildingsShowing.length; i++){
if (buildingsShowing[i].x+20 > 0) {
buildingsToKeep.push(buildingsShowing[i]);
}
}
buildingsShowing = buildingsToKeep; // remember showing buildings
}
function addNewBuildings(){
counter+=1;
if (counter % 65 == 0){
buildingsShowing.push(makeBuildings(width, 0));
}
}
//building object
function makeBuildings(bx, by){
var buildings = {x:bx, y:by,
breadth: 50,
nFloors: round(random(2,8)),
bColor: random(50,125),
speed: -1.0,
move: buildingsMove,
draw: drawBuildings }
return buildings;
}
//building characteristics
function drawBuildings(){
var floorHeight = 20;
var bHeight = this.nFloors * floorHeight;
fill(this.bColor);
push();
translate(this.x, height);
noStroke();
rect(0, -bHeight, this.breadth, bHeight);
for (var i = 0; i < this.nFloors; i++) {
fill(mouseY/height*200);
rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
}
pop();
}
function buildingsMove(){
this.x += this.speed;
}
//stars
function updateAndDrawStars(){
for (var i = 0; i < starsShowing.length; i++) {
starsShowing[i].move();
starsShowing[i].draw();
}
}
function removeStarsOffScreen(){
var starsToKeep = [];
for (var i = 0; i < starsShowing.length; i++){
if (starsShowing[i].starsX + 10 > 0) {
starsToKeep.push(starsShowing[i]);
}
}
starsShowing = starsToKeep;
}
function addNewStars(){
starsCounter+=1;
if (starsCounter % 5 == 0){
starsShowing.push(makeStars(random(width), random(height)));
}
}
//stars object
function makeStars(sx, sy){
var s = {starsX: sx,
starsY: sy,
starsSpeed: -1,
move: starsMove,
draw: starsDraw}
return s;
}
function starsMove(){
this.starsX += this.starsSpeed;
}
function starsDraw(){
fill(255);
noStroke();
circle(this.starsX, this.starsY, random(1,2));
}
//click on moon to flip through facts
function mousePressed(){
if (mouseX<75&mouseX>25&&mouseY<75&&mouseY>25){
index = floor(random(facts.length));
if (index == facts.length) {
index = 0;
}
}
}
