functionsetup(){createCanvas(350,350);}functiondraw(){background(225,213,197);var s =second();var h =hour();var m =minute();mini(m); //blue circles (minute)
horse(h); // black rectangle (hour)
circ(s); // yellow circle (seconds)
}
//yellow circle grows according to seconds and red rectangle gets longer
functioncirc(s){noStroke();fill("orange")ellipse(175,175, s *3, s *3);fill(209,54,48)rect(50,0,30, s *6) //rect(300, 0, 30, s * 6)
}
//blue circles grow according to the minute
functionmini(m){noStroke();fill(37,105,193)ellipse(0,175, m *6, m *6)ellipse(350,175, m *6, m *6) //triangle(0, 350, m * 5, m * 5, 0, 0)
}
//hour is represented by black rectangle, width and height grow every hour
functionhorse(h){noStroke();rectMode(CENTER);fill("black")rect(175,80, h *5, h *5)}
This project was a doozy. I decided to make it in the style of Bauhaus because to me that it was abstract design encompasses. With this design that I made, the circle in the middle and the reed line correspond to the seconds, the square in the center corresponds to the hour, and the blue circles represent the minutes.
var beginday;var seconds;var minutes;var hours;var bloomx =[];var bloomy =[];functionsetup(){createCanvas(460,300); //flower per each passing second
for(i =0; i <60; i ++){
bloomx[i]=random(20,440);
bloomy[i]=random(20,280);}}functiondraw(){
hours =hour();
minutes =minute();
seconds =second();
beginday =270;angleMode(DEGREES); //daytime background or nightime background
if(hours <7|| hours >18){background(31,47,71);}else{background(102,178,255);} //clock lines
noFill();strokeWeight(15); //hours measure
stroke(255,102,102,175);arc(230,150,240,240, beginday, beginday + hours *30); //minutes measure
stroke(255,128,0,190);arc(230,150,200,200, beginday, beginday + minutes *6); //seconds measure
stroke(255,255,0,125);arc(230,150,160,160, beginday, beginday + seconds *6);for(i =0; i < seconds; i ++){strokeWeight(10);fill(255);ellipse(bloomx[i], bloomy[i],6,6);} //determines whether sun or moon is shown and whether the star is present
if(hours <7|| hours >18){ //moon
noStroke();fill(160,160,160);
circle (230,150,125);fill(192,192,192);ellipse(270,115,10,10);ellipse(235,110,30,30);ellipse(270,150,40,40);ellipse(230,175,20,20);ellipse(205,140,40,40); //star that appears every OTHER second
noStroke();fill(255);translate(300,70);triangle(25*(seconds %2),0,0,4,0,-4);triangle(-4,0,4,0,0,25*(seconds %2));triangle(-4,0,4,0,0,-25*(seconds %2));triangle(-25*(seconds %2),0,0,4,0,-4);}else{ //sun
noStroke();fill(249,228,95);
circle (230,150,125); //cloud that appears every OTHER second
fill(255);noStroke();ellipse(330, height/2-70,50,50*(seconds %2));ellipse(360, height/2-80,80,80*(seconds %2));ellipse(390, height/2-70,80,80*(seconds %2));ellipse(420, height/2-70,50,50*(seconds %2));}}
I wanted to use lines and play around with transparency, so that’s what I did with the three seconds, minutes and hours lines. Besides the inner yellow line that extended each second, I also added yellow flowers/stars that would randomly populate the canvas per second. In the code you can see that when the hour of day is less than 7 (before 7am) or greater than 18 (after 6pm), the background color and the different parts (sun and cloud) will change into its night version (moon and star). Since there were now two elements measuring seconds, I had the cloud and star appear every other second for a bit of variety.
For my abstract clock I chose to use a database of song lyrics that mention specific times of day. The clock breaks up the day into 886 equal units of time, the number of song lyrics in the data set, and displays each lyric one after another. The background color also changes with the time of day being referenced in the song. As a result the time measured by this clock is not the actual time of day, but rather the time of day represented within our popular musical cannon mapped to a real 24 hour day. Hours that are referenced more often last longer on this clock and those only mentioned a few times pass by quickly.
//Tim Nelson-Pyne
//tnelsonp@andrew.cmu.edu
//Section C
//Project-06-Abstract Clock
functionpreload(){ //loads a .txt file that contains a large sampling of song lyrics
//that refer to specific times of day
timeLyrics =loadStrings('https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/10/timeLyrics.txt')}functionsetup(){createCanvas(400,400);background(0);}functiondraw(){ //gets the total amount of seconds that have ellapsed that day
var s =second();var m =minute();var h =hour();
m = m *60
h = h *3600var totalS = m + h + s;var i =map(totalS,0,86400,0,886);
i =round(i); //changes background color based on the time that the song lyrics are refering to
if(i <421|| i >780){ //its nightime
fill(0);}if(i >=421& i <481){ //its 5am
fill(10,0,50);}if(i >=481& i <538){ //its 6am
fill(141,163,152);}if(i >=538& i <562){ //its 7 am
fill(217,133,69);}if(i >=562& i <595){ //its 8 am
fill(249,192,107);}if(i >=595& i <628){ //its 9 am
fill(255,230,190);}if(i >=628& i <631){ //its 10 am
fill(255,255,200);}if(i >=631& i <722){ //its day
fill(255);}if(i >=722& i <747){ //its 5pm
fill(255,230,190);}if(i >=747& i <761){ //its 6pm
fill(238,108,32);}if(i >=761& i <=780){ //its 7pm
fill(100,15,36);}textSize(15);noStroke(); //redraws the background
rect(0,0, width, height); //changes the type color based on what the background color is
if(i <421|| i >780){fill(255);}else{fill(100);} //displays a song lyric
//each lyric gets the same amount of time on screen
//the lyrics repeat each day
textAlign(CENTER);text(timeLyrics[i],0,10, width, height);}
//cbtruong;
//Section B;
var secondVal;var minuteVal;var hourVal;var monthVal;var sixtyCircleX =[];var sixtyCircleY =[];var sixtyCircleX2 =[];var sixtyCircleY2 =[];var hourAngle =[];functionsetup(){createCanvas(480,480);background(220);text("p5.js vers 0.9.0 test.",10,15);
secondVal =second();
minuteVal =minute();
hourVal =hour();
monthVal =month();for(var i =0; i <8; i++){
hourAngle.push(i*45);}for(var y =10; y <120; y +=20){for(var x =10; x <200; x +=20){
sixtyCircleX.push(x);
sixtyCircleY.push(y);}}for(var y2 =370; y2 <480; y2 +=20){for(var x2 =290; x2 <480; x2 +=20){
sixtyCircleX2.push(x2);
sixtyCircleY2.push(y2);}}}functiondraw(){background(205,202,240);timeOfDay(hourVal);for(var i =0; i <8; i++){noStroke();fill(230,100,120);if(i > hourVal %8){fill(27,30,35);}hourSquare(hourAngle[i]);
hourAngle[i]+=0.1;}for(var j =0; j <60; j++){fill(100,230,120);if(j > secondVal){fill(240);}sixtyCircleTime(sixtyCircleX[j], sixtyCircleY[j]);}for(var l =0; l <60; l++){fill(120,120,230);if(l > minuteVal){fill(240);}sixtyCircleTime(sixtyCircleX2[l], sixtyCircleY2[l]);}for(var m =180; m <=480; m +=25){fill(240);if(m >= monthVal*22.5){fill(45,67,89);}push();translate(-60,20);rotate(radians(330));monthTri(20, m);monthTri(260, m);pop();}}functionhourSquare(hourAngle){push();translate(230,230);square(80*cos(radians(hourAngle)),80*sin(radians(hourAngle)),20);pop();}functiontimeOfDay(hourValue){if(hourVal >15){fill(227,111,30);}elseif(hourVal <15& hourVal >7){fill(252,209,77);}else{fill(27,30,35);}circle(240,240,100);}functionsixtyCircleTime(x, y){circle(x, y,20);}function monthTri (x, y){triangle(x, y, x +20, y, x +10, y +20);}
I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I split into 3, Morning (7-15), Afternoon (15-23), and Night (23-7)) and the hours passed of each time. It is very basic.
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Assignment 06-A: Abstract Clock
functionsetup(){createCanvas(480,480);}functiondraw(){var minu =minute(); //sky darkens by the hour
background(hour()*5); //scoop slowly falls by the minute
for(var col =0; col <=5* minu; col+=1){fill("pink");push();translate(225,40);circle(0, col,20);pop();} //arm waves for each second
if(second()%2==0){line(150,350,100,325);}elseif(second()%2!=0){line(150,350,100,375);} //stick figure man
fill("white");circle(150,300,50); //head
fill("black");circle(140,298,5);circle(160,298,5);line(150,325,150,400); //back
line(150,400,125,450); //left leg
line(150,400,175,450); //right leg
line(150,350,225,350); //arm with ice cream
fill(250,215,160);triangle(225,365,215,345,235,345); //ice cream cone
}
I really wanted the program to have ice cream scoops stacking, but I couldn’t figure out a way to do it without my code crashing (since the y of the circle would have to be -=, but you can’t have negative minutes). Instead it is falling very slowly until it falls onto the cone at 59 minutes.
angle =20;var x=0;var y =300;functionsetup(){createCanvas(480,480);}functiondraw(){
s =second();
m =minute();
h =hour();
dx1 =600/s; // used for line seconds
dy1 =600/s;
dx2 =200/s;
dy2 =-200/s;
x1 =100; // used for line seconds
y1 =40;
x2 =300;
y2 =400;
angles =30push();background(244,241,222);for(var i =0; i < s; i +=1){ //second lines
strokeWeight(2)stroke(129,179,154)line(i, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;}pop();for(var i =0; i< m; i+=1){ //minute circles
noFill();stroke(223,122,94)strokeWeight(2);ellipse(300,100, i*7, i*7) //increase circle size
}for(var i =0; i< h; i+=1){ //hour circles
push();translate(240,240)noFill();stroke(60,64,91)strokeWeight(3);rotate(radians(50));ellipse(i*25-300,40,15,15) //change circle position
pop();}timer(x, y); //bottom right timer
if(h <7|| h>=19){noStroke() // moon depending on hour
fill(60,64,91)ellipse(430,380,80,80);fill(244,241,222)ellipse(450,370,80,80);}else{sun(); //sun depending on hour
}}functiontimer(x, y){ //for bottom right corner
textSize(20);push();noStroke()fill(250)rect(380,450,100,50);fill(60,64,91)text(h,390,470)fill(0)text(":",412,470)fill(223,122,94)text(m,420,470)fill(0)text(":",442,470)fill(129,179,154)text(s,450,470)pop();}functionsun(){translate(410,380);noStroke();fill(222,222,74)ellipse(0,0,50,50);for(var i =0; i<50; i++){rotate(radians(angle))rect(-5,-10,5,60);}}
I remember learning about the Korean water clock that was invented in the Chosun dynasty in elementary school, which inspired me to create a simplified version of it through p5.js.
var angle =180;functionsetup(){createCanvas(420,400); // rectMode(CENTER);
}functiondraw(){background(0);fill(255);textAlign(CENTER);textSize(30);text('The water clock', width/2,50);textSize(10);textAlign(LEFT);let hr =hour();let mn =minute();let sc =second();fill(255);text(hr +':'+ mn +':'+ sc,10,150);text('24:00:00', width-65,150);rect(100,140,30,5);rect(200,140,30,10); //hour
push();fill(255);translate(350,380);rotate(radians(180)); //rotation to make the rectangle grow upwards
rect(0,0,120,240);fill(0,0,255);translate(5,0);rect(0,0,110, hr*10);pop(); //minute
push();fill(255); //red rectangle
translate(205,260);rotate(radians(180)); //rotation to make the rectangle grow upwards
rect(0,0,80,120);fill(0,75,255);translate(5,0);rect(0,0,70, mn*2);if(mn==59){ //when each the mn container is full, water is transferred to the hr contatiner
translate(-30,115);stroke(0,100,255);strokeWeight(5);line(-8,0,30,0);stroke(0,0,255);line(-8,0,-8,-115);}pop(); //second
noStroke();push();fill(255);translate(100,200);rotate(radians(angle)); //rotation to make the rectangle grow upwards
rect(0,0,40,60);fill(0,150,255);translate(5,0);rect(0,0,30, sc);if(sc==59){ //when each the sc container is full, water is transferred to the mn contatiner
translate(-30,57.5);stroke(0,150,255);strokeWeight(3);line(-8,0,30,0);stroke(0,100,255);line(-8,0,-8,-115);}pop();}
For my project, I decided to create an abstract clock that tells the time through an animated frog. In this project, the frog slow closes its eyes following every passing second, and when a minute passes its eyes jump back to their starting position. The background itself is programmed to change subtly for every minute that passes. At the bottom of the canvas are blades of grass, one representing each hour that has already passed in the day.
var flyX =225;var flyY =0;functionsetup(){createCanvas(480,480);background(255,220,220);ellipseMode(CENTER);rectMode(CENTER);}
//function that draws the frog on canvas
functionfrog(){
//frog body
stroke(163,207,144);fill(163,207,144);quad(20,480,460,480,340,308,140,308);
//frog head
stroke(176,217,159);fill(176,217,159);ellipse(width/2, height/2,360,302);ellipse(130,130,126,120);ellipse(350,130,126,120);
//frog blush
stroke(240,142,117)fill(240,142,117);ellipse(70,218,83,46);ellipse(410,218,83,46);}
//function for the flies that surround the frog
functionflies(x, y){translate(width/2, height/2)for(var i =0; i <24; i++){push();rotate(TWO_PI*i/24);fill(0);rect(x, y,1,1);pop();}for(var i =0; i <12; i++){push();noStroke();fill(0);rotate(TWO_PI*i/12);rect(x, y,5,5)pop();}}functiongrass(){var x =0;var hr =hour();for(var x =0; x <=20*(hr-1); x +=20){fill(61,118,37);triangle(x,480, x+20,480, x+10,460);}}functiondraw(){
//initializaing variables for time
var sec =second();var min =minute();var hr =hour();var eyeX =56;var eyeY =66;background(min*5, min*3.5, min*3);
//draws the frog on to the canvas
frog();
//draws blades of grass on canvas that represent the hour of the day
noStroke();grass();
//frog mouth and eyes
stroke(0);strokeWeight(2);fill(0);ellipse(350,140, eyeX, eyeY-sec**1);ellipse(130,140, eyeX, eyeY-sec**1);line(210,168,270,168);
//calling function to draw flies
flies(flyX, flyY);
flyX +=random(-1,1);
flyY +=random(-1,1);
//draws blades of grass
}
//Yanina Shavialenka
//Section B
//yshavial@andrew.cmu.edu
var x =15;var y =15;var xSpeed =1;var ySpeed =0;var xCircleSec =40;var yCircleSec =30;var xCircleMin =70;var yCircleMin =60;var xCircleHour =103;var yCircleHour =103;functionsetup(){createCanvas(480,480);background(220);text("p5.js vers 0.9.0 test.",10,15);}functiondraw(){background(160,160,160);seconds();minutes();hours();}functionseconds(){stroke(255,255,0);fill(0,102,0);square(x, y,450);/*
These for loops draw the 13 lines on the green square to
make space for the seconds.
Counting starts at top left triangle to the right and
continues clockwise.
*/for(var i=37.5; i<=420; i+=28.8){stroke(255,255,0);line(x+i, y, x+i, y+37.5);}for(var i=37.5; i<=420; i+=28.8){stroke(255,255,0);line(x+412.5, y+i, x+450, y+i);}for(var i=37.5; i<=420; i+=28.8){stroke(255,255,0);line(x+i, y+412.5, x+i, y+450);}for(var i=37.5; i<=420; i+=28.8){stroke(255,255,0);line(x, y+i, x+37.5, y+i);} // These are 4 corner lines for seconds.
line(x, y, x+37.5, y+37.5);line(x+450, y, x+412.5, y+37.5);line(x+450, y+450, x+412.5, y+412.5);line(x, y+450, x+37.5, y+412.5); //Ball for seconds.
fill(0);circle(xCircleSec, yCircleSec,10);/*
These if-else statements check when to move the position of the ball
based on the seconds.
*/if(15<=second()&second()<30){
xCircleSec = width -32;
yCircleSec =38+28.8*(second()-15);
xSpeed =0;
ySpeed =1;}elseif(30<=second()&second()<45){
xCircleSec = width -38-28.8*(second()-30);
yCircleSec = height -33;
xSpeed =-1;
ySpeed =0;}elseif(second()>=45){
xCircleSec =33;
yCircleSec = height -38-28.8*(second()-45);
xSpeed =0;
ySpeed =-1;}elseif(second()<15){
xCircleSec =38+28.8*second();
yCircleSec =33;
xSpeed =1;
ySpeed =0;}}functionminutes(){stroke(255,255,0);fill(0,0,190);square(x+37.5, y+37.5,375);/*
These for loops draw the 13 lines on the green square to
make space for the minutes.
Counting starts at top left triangle to the right and
continues clockwise.
*/for(var i=75; i<=375; i+=23.07){stroke(255,255,0);line(x+i, y+37.5, x+i, y+75);}for(var i=75; i<=375; i+=23.07){stroke(255,255,0);line(x+375, y+i, x+412.5, y+i);}for(var i=75; i<=375; i+=23.07){stroke(255,255,0);line(x+i, y+375, x+i, y+412.5);}for(var i=75; i<=375; i+=23.07){stroke(255,255,0);line(x+37.5, y+i, x+75, y+i);} // These are 4 corner lines for minutes.
line(x+37.5, y+37.5, x+(37.5*2), y+(37.5*2));line(x+412.5, y+37.5, x+375, y+(37.5*2));line(x+412.5, y+412.5, x+375, y+375);line(x+37.2, y+412.5, x+(37.5*2), y+375); //Ball for minutes.
fill(0);circle(xCircleMin, yCircleMin,10);/*
These if-else statements check when to move the position of the ball
based on the minutes.
*/if(15<=minute()&minute()<30){
xCircleMin = width -72;
yCircleMin =56+23.07*(minute()-15);
xSpeed =0;
ySpeed =1;}elseif(30<=minute()&minute()<45){
xCircleMin = width-55-23.07*(minute()-30);
yCircleMin = height -72;
xSpeed =-1;
ySpeed =0;}elseif(minute()>=45){
xCircleMin =72;
yCircleMin= height-56-23.07*(minute()-45);
xSpeed =0;
ySpeed =-1;}elseif(minute()<15){
xCircleMin =56+23.07*minute();
yCircleMin =72;
xSpeed =1;
ySpeed =0;}}functionhours(){stroke(255,255,0);fill(240,20,20);square(x+75, y+75,300); //These lines divide 24 spaces for hours
stroke(255,255,0);line(x+75, y+121.14, x+121.14, y+75);line(x+75, y+167.28, x+167.28, y+75);line(x+75, y+213.42, x+213.42, y+75);line(x+75, y+259.56, x+259.56, y+75);line(x+75, y+305.7, x+305.7, y+75);line(x+(37.5*2), y+351.84, x+351.84, y+(37.5*2));line(x+98.07, y+375, x+375, y+98.07);line(x+144.221, y+375, x+375, y+144.21);line(x+190.35, y+375, x+375, y+190.35);line(x+236.49, y+375, x+375, y+236.49);line(x+282.63, y+375, x+375, y+282.63);line(x+328.77, y+375, x+375, y+328.77);line(113,113,367,367);//Middle division line for hours
//Ball for hours.
fill(0);circle(xCircleHour, yCircleHour,10);/*
These if-else statements check for the hours.
The position of a circle updates based on the hour 0-23.
Upper and bottom triangles represent 12 am and 12 pm or
00:00 and 12:00.
Counting starts from 00:00 at the top triangle and goes clockwise.
*/if(hour()==0){
xCircleHour =103;
yCircleHour =103;
xSpeed =1;
ySpeed =1;}elseif(hour()==1){
xCircleHour =140;
yCircleHour =110;
xSpeed =1;
ySpeed =1;}elseif(hour()==2){
xCircleHour =175;
yCircleHour =120;
xSpeed =1;
ySpeed =1;}elseif(hour()==3){
xCircleHour =210;
yCircleHour =130;
xSpeed =1;
ySpeed =1;}elseif(hour()==4){
xCircleHour =245;
yCircleHour =140;
xSpeed =1;
ySpeed =1;}elseif(hour()==5){
xCircleHour =280;
yCircleHour =150;
xSpeed =1;
ySpeed =1;}elseif(hour()==6){
xCircleHour =317;
yCircleHour =160;
xSpeed =1;
ySpeed =1;}elseif(hour()==7){
xCircleHour =340;
yCircleHour =185;
xSpeed =1;
ySpeed =1;}elseif(hour()==8){
xCircleHour =350;
yCircleHour =220;
xSpeed =1;
ySpeed =1;}elseif(hour()==9){
xCircleHour =360;
yCircleHour =260;
xSpeed =1;
ySpeed =1;}elseif(hour()==10){
xCircleHour =360;
yCircleHour =305;
xSpeed =1;
ySpeed =1;}elseif(hour()==11){
xCircleHour =370;
yCircleHour =340;
xSpeed =1;
ySpeed =1;}elseif(hour()==12){
xCircleHour =377;
yCircleHour =377;
xSpeed =1;
ySpeed =1;}elseif(hour()==13){
xCircleHour =340;
yCircleHour =370;
xSpeed =1;
ySpeed =1;}elseif(hour()==14){
xCircleHour =305;
yCircleHour =360;
xSpeed =1;
ySpeed =1;}elseif(hour()==15){
xCircleHour =265;
yCircleHour =355;
xSpeed =1;
ySpeed =1;}elseif(hour()==16){
xCircleHour =235;
yCircleHour =340;
xSpeed =1;
ySpeed =1;}elseif(hour()==17){
xCircleHour =200;
yCircleHour =325;
xSpeed =1;
ySpeed =1;}elseif(hour()==18){
xCircleHour =165;
yCircleHour =315;
xSpeed =1;
ySpeed =1;}elseif(hour()==19){
xCircleHour =150;
yCircleHour =285;
xSpeed =1;
ySpeed =1;}elseif(hour()==20){
xCircleHour =135;
yCircleHour =255;
xSpeed =1;
ySpeed =1;}elseif(hour()==21){
xCircleHour =130;
yCircleHour =215;
xSpeed =1;
ySpeed =1;}elseif(hour()==22){
xCircleHour =120;
yCircleHour =175;
xSpeed =1;
ySpeed =1;}elseif(hour()==23){
xCircleHour =110;
yCircleHour =140;
xSpeed =1;
ySpeed =1;}}
|
This project was very difficult in the aspect of just coming up with ideas how to make it look like a clock without it actually being a clock. My outer green square represents seconds: each side has 15 seconds such as it is easy to count time by quoters. Blue square stands for minutes with same description for how it works. The pink square represents hours. Two triangles in top left and bottom right corners represents 12 am and 12 pm or 00:00 and 12:00.
I’ve used primary colors of CMU such as green, blue, red, yellow and black to make it a Tartan Clock.
//Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment-06-project
var cloudVar =[]; //array for cloud x coordinate
var rainVar =[]; //array for cloud y coordinate
var hourTime; //variable to store hour
var minuteTime; //vairable to store minute
functionsetup(){createCanvas(600,600);}functiondraw(){background(155);
hourTime =hour();
minuteTime =minute();for(var i =0; i <=23; i++){ //sets cloud x position by mapping the current second of the day to an x value on the canvas
cloudVar[i]=map((second()+(60*minute())+(60*60*(hour()-i))),0,(24-i)*60*60,-105,width);}for(i =0; i <=59; i++){ //sets the rain y position my mapping the current second of the hour to a y value on the canvas
rainVar[i]=map((second()+60*(minute()-i)),0,(60-i)*60,-12,height+10)}for(var counter =0; counter <=23; counter ++){ //for loop that checks how many hours into the day it is and draws that many clouds with the stored x values and each hour that has passed
if(hourTime >= counter){drawCloud(cloudVar[counter],counter);}}for(var counter =0; counter <=59; counter ++){ //for loop that checks how many minutes into the hour it is and draws that many rain drops with the stored y values and each minute that has passed
if(minuteTime >= counter){drawRain(rainVar[counter],counter);}}}functiondrawCloud(x,counter){ //function to draw clouds
var y; //long amount of if statements to set the y coordinate
if(counter ==0){
y =50}elseif(counter ==1){
y =150}elseif(counter ==2){
y =250}elseif(counter ==3){
y =350}elseif(counter ==4){
y =450}elseif(counter ==5){
y =550}elseif(counter ==6){
y =50}elseif(counter ==7){
y =150}elseif(counter ==8){
y =250}elseif(counter ==9){
y =350}elseif(counter ==10){
y =450}elseif(counter ==11){
y =550}elseif(counter ==12){
y =50}elseif(counter ==13){
y =150}elseif(counter ==14){
y =250}elseif(counter ==15){
y =350}elseif(counter ==16){
y =450}elseif(counter ==17){
y =550}elseif(counter ==18){
y =50}elseif(counter ==19){
y =150}elseif(counter ==20){
y =250}elseif(counter ==21){
y =350}elseif(counter ==22){
y =450}elseif(counter ==23){
y =550}fill(255); //series of ellipses that draws the cloud
ellipse(x,y,60,50);ellipse(x+30,y-10,60,50);ellipse(x+80,y,60,50);ellipse(x+20,y+20,60,50);ellipse(x+60,y+15,60,50);push();noStroke();ellipse(x+40,y+10,100,55)pop();}functiondrawRain(y,counter){ //function to draw rain
var x; //insanely long amount of if statements, like seriously there has to be an easier way to do this, to have the raindrops fall in a "random" pattern
if(counter ==0){
x =5;}if(counter ==39){
x =15;}if(counter ==20){
x =25;}if(counter ==2){
x =35;}if(counter ==48){
x =45;}if(counter ==38){
x =55;}if(counter ==59){
x =65;}if(counter ==23){
x =75;}if(counter ==19){
x =85;}if(counter ==21){
x =95;}if(counter ==47){
x =105;}if(counter ==24){
x =115;}if(counter ==1){
x =125;}if(counter ==27){
x =135;}if(counter ==25){
x =145;}if(counter ==37){
x =155;}if(counter ==49){
x =165;}if(counter ==3){
x =175;}if(counter ==28){
x =185;}if(counter ==46){
x =195;}if(counter ==58){
x =205;}if(counter ==57){
x =215;}if(counter ==50){
x =225;}if(counter ==36){
x =235;}if(counter ==45){
x =245;}if(counter ==9){
x =255;}if(counter ==35){
x =265;}if(counter ==5){
x =275;}if(counter ==51){
x =285;}if(counter ==40){
x =295;}if(counter ==17){
x =305;}if(counter ==13){
x =315;}if(counter ==22){
x =325;}if(counter ==16){
x =335;}if(counter ==34){
x =345;}if(counter ==4){
x =355;}if(counter ==29){
x =365;}if(counter ==12){
x =375;}if(counter ==56){
x =385;}if(counter ==55){
x =395;}if(counter ==11){
x =405;}if(counter ==26){
x =415;}if(counter ==15){
x =425;}if(counter ==33){
x =435;}if(counter ==41){
x =445;}if(counter ==44){
x =455;}if(counter ==30){
x =465;}if(counter ==10){
x =475;}if(counter ==6){
x =485;}if(counter ==18){
x =495;}if(counter ==42){
x =505;}if(counter ==14){
x =515;}if(counter ==52){
x =525;}if(counter ==7){
x =535;}if(counter ==53){
x =545;}if(counter ==31){
x =555;}if(counter ==8){
x =565;}if(counter ==54){
x =575;}if(counter ==43){
x =585;}if(counter ==32){
x =595;}fill(0,0,255); //draws a small ellipse as a rain drop
ellipse(x,y,7,30)}
This project was a lot of fun but very challenging. I came up with my idea fairly early on (I was brainstorming and listening to storm sounds). The amount of clouds is the amount of hours in the day, including a cloud for 0:00, and the amount of rain drops is how many minutes it has been in the day, including a drop for minute 0. The drops fall from the top and the clouds move left to right, with their positions being updated every second. I had to do a lot of algebra to have working formulas for the dynamic positions and ran into a lot of bugs when it came to keeping track of so many variables. My sketches became very incoherent very quickly. I also ended up writing an insane amount of for statements which was not good. If I could do this project again I would try to figure out a way to do what the if statements accomplished with some sort of loop.