![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
//global variables
var houseDayImg;
var houseNightImg;
var dayPeriod = 2000;
var numTrees = 4;
var numStars = 20;
var trees = [];
var stars = [];
class Star {
constructor() {
this.x = random(width);
this.y = random(height/4);
}
display() {
fill(255,255,255);
ellipse(this.x, this.y, 3, 3);
}
}
class Tree {
constructor() {
var choice = random(1);
if(choice < 0.5){
this.x = random(width/3);
}else {
this.x = random(2 * width / 3, width - 10);
}
choice = random(1);
if(choice < 0.5){
this.color = color(135, 167, 126);
}else {
this.color = color(73, 126, 97);
}
this.y = random(280, 300)
this.w = random(50, 70);
this.h = random(60, 90);
}
display() {
fill(109, 86, 53);
rect(this.x - 5, this.y + 10, 10, 50);
fill(this.color)
ellipse(this.x, this.y, this.w, this.h);
}
}
function preload() {
//preload images
houseDayImg = loadImage("https://i.imgur.com/DguMSkN.png");
houseNightImg = loadImage("https://i.imgur.com/eXNWSkN.png");
panelImg = loadImage("https://i.imgur.com/VFf1Rr8.png");
batteryImg = loadImage("https://i.imgur.com/rw8ScZs.png");
}
function setup() {
createCanvas(400, 400);
for(i = 0; i < numStars; i++){ //draw stars at night
stars.push(new Star())
}
for(i = 0; i < numTrees; i++){ //draw trees
trees.push(new Tree())
}
}
function draw() {
time = frameCount % dayPeriod;
bgDark = time;
batteryLife = (frameCount + dayPeriod / 4) % dayPeriod;
if (bgDark > dayPeriod/2) {
bgDark = dayPeriod - bgDark;
}
if (batteryLife > dayPeriod/2) {
batteryLife = dayPeriod - batteryLife;
}
background(207 - bgDark / dayPeriod*255*2, 226 - bgDark / dayPeriod*255*2, 243 - bgDark / dayPeriod*255*2);
//ground
fill(143-bgDark*(143-66)/dayPeriod*2, 206-bgDark*(206-95)/dayPeriod*2, 0);
noStroke();
ellipse(200, 400, 500, 180);
//panel
image(panelImg, 125, 156, 80, 80);
//battery
image(batteryImg, 140, -15, 100, 100);
fill(255 - batteryLife / dayPeriod * 255 * 2, batteryLife / dayPeriod * 255 * 2, 0);
rect(167, 18, batteryLife / dayPeriod * 61 * 2, 34);
//during daytime
if (time < dayPeriod/4 || time > dayPeriod*3/4) {
//house
image(houseDayImg, 130, 200, 130, 130);
} else { //during nighttime
//house
drawStars();
image(houseNightImg, 130, 200, 130, 130);
}
frameCount += 1;
//function
drawSun(time);
drawTrees();
}
function drawSun(time) {
push();
translate(200, 400);
rotate(frameCount * 2 * PI / dayPeriod);
fill(255, 206, 59);
ellipse(0, -300, 70, 70);
pop();
}
function drawStars() { //draw stars at random locations in the sky when it becomes night and disappear when it becomes daytime again
for(i = 0; i < stars.length; i++){
stars[i].display();
}
}
function drawTrees(){ //draw trees at random locations every time you refresh
for(i = 0; i < trees.length; i++){
trees[i].display();
}
}For the final project, I created an information visualization inspired by Tesla’s solar roof. I wanted to illustrate this scene by using solar roof because I thought this type of clean energy production can help lower the emissions of greenhouse gases and carbon dioxide, and further decrease our reliance to fossil fuels to create a better environment. During the day, the solar roof is charged with solar energy, illustrated by a battery icon being gradually charged up as the sun moves throughout the daytime. Then, when it becomes night, the battery icon will be fully charged, allowing the house to brightly light up even in the dark. For a little detail, after the sun goes down during the day, the stars will show up representing nighttime. Every time the user refreshes the screen, the trees will randomly appear in random locations as well as the stars. This was an amazing opportunity for me to explore using various techniques like array, object, loop, conditional, transformation, and functions, and I think I truly enjoyed creating this illustration. Hope you enjoy! 🙂
