![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
For this project, I used driving as the way of demonstrating time, which the driver will drive endlessly during day and night.
-The position of the car represents every second within a minute, moving from left to right (0-59).
-The position of the Tree represents every minute within an hour, moving from left to right (0-59).
-The Sun and light clouds demonstrate it’s the first 12 hours, while the Moon and the dark clouds demonstrate the 13th-24th hours.
-The amount of day bars (light blue) demonstrates how many hours it’s into the first 12 hours, while the amount of night bars (dark gray) demonstrates how many hours it’s into the 13th to 24th hours. All bars appear from left to right.
-The day bars are background of the sky in the nights, while the night bars are background of the sky in the day.
-The clouds are just dynamic decorations.
/* Jiayi Chen
jiayiche Section A */
var h //hours
var s //seconds
var m //minutes
var dayColor
var nightColor
var boxColor=[]
var cloudAndStarX=[]
var cloudAndStarY=[]
var cloudAndStarL=[]
var cloudAndStarH=[]
function setup() {
createCanvas(480, 480);
h = hour();
s = second();
m = minute();
dayColor= color(135,206,250);
nightColor= color(112,128,144);
for(var i=0; i<12;i++){
if(h < 12){
boxColor[i]=nightColor; //color of the day
}else if(h>11){
boxColor[i]=dayColor; //color of the night
}
}
for(var i=0; i<17;i++){
cloudAndStarX[i]=random(0,width-240);
cloudAndStarY[i]=random(0,140);
cloudAndStarL[i]=random(30,120)
cloudAndStarH[i]=random(30,100)
}
}
function draw() {
//The Sky that represent hours
//change the number of box to represent hours in night tmie
h = hour();
s = second();
m = minute();
background('gray');
push();
if (h < 12){
for (var i=0; i<h;i++){
boxColor[i]=dayColor
}
//change the number of box to represent hours in night tmie
}else if(h >= 12){
for (var i=0; i<(h-12);i++){
boxColor[i]=nightColor;
}
}
for (var i=0; i<12;i++){ //Background sky colors changing base on day or night
fill(boxColor[i])
rect(i*width/12,0,width/12,height/2);
}
pop();
//grass
push();
fill(0,255,127);
rect(0,240,width,70)
rect(0,height-65,width,65)
pop();
//road
for (var i=0; i<5;i++){
rect(i*100,350,50,25);
}
//The Car represent seconds
car(s/60*width,360);
//The Tree Represent minutes
tree(m/60*width,200);
//clouds and sun
push();
if(h<12){
fill(255,69,0) // the colors and shape for sun
circle(60,60,50)
for (var i=0; i<5;i++){
fill(255,255,255,100) //clouds in day
rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);
}
//Clouds and a full moon
}else if(h>11){
fill(246, 241, 213) // the colors and shape for moon
circle(width-50,60,50)
for (var i=0; i<5;i++){
fill(0,0,0,150) // clouds in night
rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);
}
}
pop();
}
function car(cx,cy){
//car body
push();
fill('red')
rect(cx,cy,100,40);//main body
rect(cx+25,cy-30,40,30);//middle
triangle(cx+65,cy,cx+65,cy-30,cx+95,cy);//right
triangle(cx+5,cy,cx+25,cy-30,cx+25,cy);//left
//Weels
fill('gray') //outer weels
circle(cx+25,cy+40,25);
circle(cx+75,cy+40,25);
fill('ivory')//inner weels
circle(cx+25,cy+40,17);
circle(cx+75,cy+40,17);
//windows
fill('azure');
rect(cx+28,cy-27,34,24);
triangle(cx+68,cy-3,cx+68,cy-27,cx+92,cy-3);
triangle(cx+10,cy-3,cx+22,cy-25,cx+22,cy-3);
//lights
fill('gold');//back lights and sub lights
rect(cx+80,cy+20,20,5);
rect(cx,cy+3,10,15);
fill('yellow');//front light
rect(cx+90,cy+5,10,12);
pop();
}
function tree(tx,ty){
push();
push();
fill('green');//leaves
rect(tx-30,ty,90,50);
rect(tx-15,ty-30,60,30);
pop();
fill(139,69,19);//tree log
rect(tx,ty+20,30,80);
pop();
}
