My clock is made up of a few planets that orbit each other. One representing the hours, another the minutes, and the last representing seconds.
sketchDownload
]]>
//dvargas David vargas
var starX=[] //x position of stars
var starY=[]//y position of stars
var starB=[]//brightness value of stars
var hourV = {x:0,y:0,diam:50,c:'orange'} //array w/values for orange (hours) circle
var minuteV = {x:0,y:0,diam:30,c:'lightgreen'}//array w/ values for green (minutes) circle
var secondV = {x:0,y:0,diam:10,c:'lightblue'} //array w/ values for blue (seconds) circle
var orbitV ={hX:300,hY:300,mX:0,mY:0,sX:0,sY:0,hD:180,mD:150,sD:75} //array w/ values for 'orbit rings'
var noiseOffset=0 //perlin noise offset
function setup() {
createCanvas(600, 600);
background(255);
for (var i=0;i<80;i++){ //creates random stars
starX[i]=random(0,width)
starY[i]=random(0,height)
}
}
function draw() {
background(0);
var theTime=currentTime() //the time represented by a value between 0 & 12
for(var i=0;This is my abstract clock: The candles’ fire represents the passing of each second, the height of the candle represents the hour of the day and the sheets of paper represent the minutes remaining in the hour.
sketch
]]>//Michael Li
//Section C
function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
background (220)
}
//write object for candle dimensions
var candle = {xPos: 130, yPos: 120, w: 50, h: 280}
//establish variables for the timer
var timerS;
var timerM;
var timerH;
//Pen x position
var penX = 370;
//pen movement indedx
var moveP = 0.3;
function draw() {
background(62, 35, 16); //dark brown
timerM = minute(); //assign minute function for variable
//pages
fill(76, 135, 74); //green book cover
rect(190, 420, 230, 20); //draw bottom cover
//alternate the page color between white and grey for distinction
//use for loop to draw number of pages depending on the minute
for (var i = 0; i<=60-timerM; i++){
noStroke();
if (i%2==0){
fill(255);
} else {
fill(200);
}
//draw pages
rect(190, 420-(3*i), 230, 3);
}
//draw pen function
drawPen(penX, 235+3*timerM);
//pen moves left and right
penX +=moveP;
//constrain pen in a range
if (penX>= 380 || penX <= 350){
moveP = -moveP;
}
//draw the panel with the hour carvings
drawBackPanel(80, 100);
//draw the table
fill(154, 121, 102);
rect(0, height*9/10, width, height*9/10);
//draw hour carvings behind the candle
//for loop to draw the larger lines
for (var i = 0; i <=12; i++){
strokeWeight(3);
stroke(161, 158, 75);
line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));
//drawing the shorter lines
} for (var i = 0; i <=12; i++){
strokeWeight(2);
stroke(161, 158, 75);
line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));
}
//drawing the body of the candle
drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);
//drawing the base of the candle
drawBase(candle.xPos-10, 360);
//assign hour to variable timerH
timerH = hour();
//map the hour to fit the candle length
var hourMap = map(timerH/2, 0, 12, 240, 10);
//candle length changes depending on the hour
candle.yPos = 120 + 240 - hourMap;
candle.h = hourMap + 30;
}
//function for drawing the candle's body
function drawCandleB (x, y, w, h){
//establish remapped value for hour
var hourMap = map(timerH/2, 0, 12, 240, 30);
fill(250, 244, 192); //light yellow
noStroke()
rect(x, y, w, h); //candle body
//function for drawing the fire
drawCandleFire(x, y, w, h);
//function for drawing the wax dripping
drawCanldeT(x, y, w);
//function for drawing the halo of light
drawLight(x, y, w, h, hourMap);
}
//function for drawing the wax
function drawCanldeT (x, y, w){
//set lineweight
strokeWeight(8);
stroke(220, 213, 142); //darker yellow
line(x+2, y, x+w-2, y);//horizontal line
//two drips
line(x+w*3/5, y, x+w*3/5, y+w/2);
line(x+w*4/5, y, x+w*4/5, y+w*3/4);
}
//function for drawing the fire
function drawCandleFire (x, y, w, h){
//establish variable for the tip of the fire
//fire positions
var fTipy;
var fTipx;
//variable for seconds for fire flicker
timerS = second();
//fire flickers each second
if (timerS %2 == 0){
fTipy = y-w*4/5;
fTipx = x+w/2;
} else {
fTipy = y-w*4/5;
fTipx = x+w/2 - 10;
}
noStroke();
//draws the fire
fill(246, 74, 22); //red
ellipse(x+w/2, y-w/5, w/4, w/3);
triangle(fTipx, fTipy, x+w*5/8, y-w/5, x+3*w/8, y-w/5);
}
//halo of light
function drawLight (x, y, w, h, hour){
timerS = second();//establish the second variable
//halo grows and shrinks each second
if (timerS %2 == 0){
hourMap = hour+10;
} else {
hourMap = hour-5;
}
noStroke();
fill(249, 246, 152, 20);//yellow with light transparency
ellipse(x+w/2, y-w*2/5, hourMap*2, hourMap*2); //draws light
}
//function drawing the back panel
function drawBackPanel (x, y){
strokeWeight(9);
stroke(225, 176, 104); // light brown
//outer framing
line(x, y, x, y+350);
line(x+155, y, x+155, y+350);
arc(x+77, y, x+75, y+55, PI, 0);
//inner board
noStroke();
fill(186, 167, 135);
ellipse(x+77, y, x+75, y+55);
rect(x, y, x+75, y+250);
}
//candle base
function drawBase (x, y){
fill(100); //grey
//top and bottom qadralateral
quad(x, y, x+70, y, x+60, y+20, x+10, y+20);
quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);
//middle rectangle
fill(150);
rect(x+10, y+20, 50, 40);
}
//pen
function drawPen (x, y){
push();
translate(x, y); //move to the right
rotate(radians(315)); //rotate for pen mvement
noStroke();
fill(200); //grey
//draws pen
rect(0, 0, 100, 5);
fill(255); //white
triangle(0, 0, 0, 5, -5, 2.5);
pop();
}
I created a boba clock which is milk tea with boba from noon to midnight and juice with lychee jelly from midnight to noon. The number of Jelly/Boba inside the cup, including one inside the straw, represents the hour. Juice/milk shrinks per second, and the full amount disappears per minute. Lastly, a Jelly/Boba stuck inside the straw moves upward per minute and got out from the straw each hour.
sketchDownload
]]>//Alicia Kim
//Section B
var x = [];
var y = [];
var angle = [];
function setup() {
createCanvas(300, 400);
for (var i=0; i<(hour()%12-1); i+=1) {
x[i] = random (120,190);
y[i] = random (200,340);
angle[i] = random(360);
}
for(var j=0; j<height; j+=1){
stroke(lerpColor(color(255,232,239) ,color(255,253,208),j/height));
line(0,j,width,j);
}
}
function draw() {
var s = second();
var min = minute();
stroke(0);
//juice with lychee jelly from midnight to noon
//& milk tea with boba from noon to midniht
push();
if (hour()>12){
drawMilk(s);
}
else if (hour()<=12){
drawJuice(s);
}
pop();
push ();
drawCup();
pop();
push();
drawStraw();
pop();
push();
if (hour()>12){
drawBoba();
strawBoba(min);
}
else if (hour()<=12){
drawJelly();
strawJelly(min);
}
pop();
}
// juice inside the cup shrinks per sec
function drawJuice(s){
fill(255,203,164); //orange
quad(70,75,230,75,215,350,85,350); //juice
//cover
fill(255);
quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));
stroke(255,178,120); //dark orange
fill(255,203,164);
ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}
function drawCup(){
// bigger circle
fill(224,255,255); //light cyan
ellipse (width/2, 75 , 160, 60);
// smaller circle
push();
if (hour()<=12){
fill(255,203,164);
}
else if (hour()>12){
fill(247,231,200);
}
ellipse (width/2, 350, 130, 50);
pop();
//connecting lines
line (70, 75, 85, 350);
line (230, 75, 215, 350);
}
function drawStraw(){
// straw body
push();
fill(0,191,255,50); //sky blue
rect(140,30,20,300);
pop();
// straw holes
ellipse(width/2,30,20,10);
ellipse(width/2,330,20,10);
fill(224,255,255); //light cyan
arc (width/2, 75 , 160, 60, 0, PI, OPEN);
}
// number of jelly inside the cup represents the hour
function drawJelly(){
for (var i=0; i<(hour()%12-1); i++) {
push();
translate(x[i],y[i]);
rotate(radians(angle[i]));
noStroke();
fill(249,246,231,150); //lychee
rect (0,0,10,30); //lychee jelly
pop();
}
}
// jelly inside the straw moves up per minute
function strawJelly(m){
noStroke();
fill(255,255,142);
rect (width/2-5,300-(225/60)*m,10,30);
}
// milk inside the cup shrinks per sec
function drawMilk(s){
stroke(236,220,194); //dark milk color
fill(247,231,200); //milk color
quad(70,75,230,75,215,350,85,350); //juice
//cover
fill(255);
quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));
fill(247,231,200); //milk color
ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}
// number of boba inside the cup & straw represents the hour
function drawBoba(){
for (var i=0; i<(hour()%12-1); i++) {
push();
stroke(70, 51, 51,100); //darker brown
fill(88,59,57,150); //dark brown
ellipse (x[i],y[i],20,20); //boba
pop();
}
}
// boba inside the straw moves up per minute
function strawBoba(m){
noStroke();
fill(88,59,57);
ellipse (width/2,300-(225/60)*m,20,20);
}
I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse’s beam rotates each minute and the lighthouse beam flashes each second.
sketch
]]>//amyhu
//amhyhu@adrew.cmu.edu
//section d
var h; //hour
var m; //minute
var s; //second
var theta = 6; //angle to increase by each minute
var r = 500; //radius of light beam
function setup() {
createCanvas(450,450);
background(220);
}
function draw() {
background("lightblue");
let h = hour();
let m = minute();
let s = second();
//water level is hour
fill("blue");
h = map(h,0,24,0,height);
rect(0, height-h, width, height);
//lighthouse object
drawLighthouse();
//island object
drawIsland();
//light beam speed is what minute it is
push();
translate(125,135);
var x = r*cos(radians(theta*m));
var y = r*sin(radians(theta*m));
//light beam flashing every second
if(s % 2 == 0){
stroke("yellow");
strokeWeight(18);
line(0,0,x,y);
}else{
stroke("white");
strokeWeight(18);
line(0,0,x,y);
}
pop();
}
function drawIsland(){
fill("lightyellow");
//noStroke();
ellipse(0,height,500);
}
function drawLighthouse(){
//rectMode(CENTER);
//stroke(1);
fill("white");
rect(110,120,30,50); //top white bit
fill("red");
rect(100,150,50,200); //red
fill("white");
rect(100,170,50,20); //white stripe
fill("yellow");
circle(125,135,20); //light circle
}
For this assignment, I thought it would be cool to build off last week’s wallpaper and make my Pacman a dynamic clock. It is supposed to be read left to right, then down. So the two horizontal Pacmans are the hour and minute (top and bottom) and the vertical Pacman is the seconds.
// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):
function setup() {
createCanvas(450,590);
}
function dotGrid() {
var PADDING = 20;
var ROWS =19;
var COLUMNS =13;
var CELL_COLOR = 'Blue'
for (var col=0;col<COLUMNS;col++) {
for (var row=0;row<ROWS;row++) {
var left = PADDING+(col*34);
var top = PADDING+(row*34.3);
fill(random(255),random(255),random(255))
circle(left,top,10);
}
}
}
function blueBaracades() {
var PADDING = 40;
var ROWS = 4;
var COLUMNS = 3;
var CELL_SIZE = 140;
var CELL_COLOR = 'Blue'
fill(0);
stroke('Blue')
strokeWeight(3);
for (var col=0;col<COLUMNS;col++) {
for (var row=0;row<ROWS;row++) {
var left = PADDING+(col*CELL_SIZE);
var top = PADDING+(row*CELL_SIZE);
var size = CELL_SIZE - 50;
rect(left,top,size,size);
}
}
}
function pacmanH(h){
fill('yellow');
noStroke();
push() //hour
translate(10,height/3.2);
rotate(radians(310));
arc(h*10,h*10,35,35,radians(80),radians(35)/2); // increments by *10 pixels to the right
pop();
}
function pacmanM(m){
fill('yellow');
noStroke();
push(); // minute
translate(width,height/1.33);
rotate(radians(140));
arc(m*4,m*4,35,35,radians(80),radians(20)/2); // increments by *4 pixels to the left
pop();
}
function pacmanS(s){
fill('yellow');
noStroke();
push(); // second
translate(2*width/3-7,height/26);
rotate(radians(45));
arc(s*6,s*6,35,35,radians(80),radians(20)/2); // increments by *6 pixels down
pop();
}
function draw(){
background('Black');
dotGrid();
blueBaracades();
var s = second();
var h = hour();
var m = minute();
pacmanH(h);
pacmanM(m);
pacmanS(s);
}I was inspired by the coffee mugs that change based on the temperature of the liquid inside. However instead of temperature this mug changes based on time. The color depends on the hour of the day, the height depends on the minute and the steam depends on the second.
sketch
]]>//Nakshatra Menon
//Section C
var cupHeight;
function setup() {
createCanvas(480, 480);
background(246, 242, 240);
}
function draw() {
push();
colorMode(HSB);
background(180, hour()*2, 42);
pop()
fill(44, 28, 7);
noStroke();
rect(0, 300, width, 200);
cup(240, 300);
}
function cup(x,y){ // draws cup
cupHeight = -minute(); // makes the cup taller with the min
push();
translate(x,y) // center of the liquid becomes the origin
// cup handle
strokeWeight(10);
stroke(170);
noFill();
ellipse(70, cupHeight+40, 48-cupHeight, 44);
// saucer
strokeWeight(1);
noStroke();
c(); // color
ellipse(0, 75, 120, 20);
fill(0, 0, 0, 50); // shadow
ellipse(0, 75, 100, 15);
// body of cup
strokeWeight(1);
noStroke();
c(); // color
beginShape();
curveVertex(-76, cupHeight);
curveVertex(-76, cupHeight);
curveVertex(-62, 27);
curveVertex(-38, 60);
curveVertex(0, 75);
curveVertex(38, 60);
curveVertex(62, 27);
curveVertex(76, cupHeight);
curveVertex(76, cupHeight);
endShape();
// liquid
strokeWeight(5);
stroke(170);
fill(110, 69, 17);
ellipse(0, cupHeight, 150, 20);
pop();
// steam
push();
translate(x, y-45)
steam();
pop();
}
function c(){ // changes the color based on the hour
// rounds up the number
var f = ceil(hour()/2)
var f2 = ceil(hour()/3)
var f3 = ceil((hour()-12)/2)
var f4 = ceil((hour()-12)/3)
// color changes based on hour
if(hour()>= 0 & hour()<= 4){ // color goes from red to green
fill((255-63*hour()),63*hour(), 0)
}
if (hour() > 4 && hour() <= 8){ // color goes from green to blue
fill(0,(255-63*f),43*f)
}
if(hour()> 8 && hour()<= 12){ // color goes from blue to red
fill(43*f2, 0, (255-43*f2))
}
if(hour()> 12 && hour()<= 16){ // color goes from red to green
fill((255-43*(hour()-12)),43*(hour()-12), 0)
}
if (hour() > 16 && hour() < 20){ // color goes from green to blue
fill(0,(255-43*(f3)),43*(f3))
}
if(hour()>= 20 && hour()<= 24){ // color goes from blue to red
fill(43*(f4), 0, (255-43*(f4)))
}
}
function steam(){ // steam changes based on second
if (second()<=30){ // when sec less/equal than 30
fill(255, 255, 255, 120-2*second()); // the opacity changes depending on the second
beginShape() // shape 1
curveVertex(0, -12);
curveVertex(0, -12);
curveVertex(-16+second(), -34);
curveVertex(-53+second(), -57);
curveVertex(-52+second(), -107);
curveVertex(21+second(), -119);
curveVertex(10+second(), -158);
curveVertex(47, -171);
curveVertex(54-second(), -108);
curveVertex(18-second(), -80);
curveVertex(42-second(), -43);
curveVertex(13-second(), -24);
curveVertex(0, -12);
curveVertex(0, -12);
endShape();
}
if (second()>30){ // when sec greater than 30
fill(255, 255, 255, 120-2*second()); // opacity changes based on second
beginShape() // shape 2
curveVertex(0, -12);
curveVertex(0, -12);
curveVertex(-16-second(), -34);
curveVertex(-53-second(), -57);
curveVertex(-52-second(), -107);
curveVertex(21-second(), -119);
curveVertex(10-second(), -158);
curveVertex(47, -171);
curveVertex(54+second(), -108);
curveVertex(18+second(), -80);
curveVertex(42+second(), -43);
curveVertex(13+second(), -24);
curveVertex(0, -12);
curveVertex(0, -12);
endShape();
}
}
hours = yolks in the pan. minutes = rotation of pan. month = eggs in carton. this one hurt my brain the most so far!
sketch
]]>// jaden luscher
// jluscher@andrew.cmu.edu
// section a
// project-06: abstract clock
// EGG CLOCK
// the egg clock counts hours as eggs cracked in the pan,
// months as eggs in the carton, and minutes as the rotation of the pan.
// INITIATING VARIABLES
var xYolk = 0; // first yolk starts north-facing
var yYolk = 40; // distance between yolk and center of pan
var hr;
var mo;
function setup() {
createCanvas(400, 300);
noStroke();
angleMode(DEGREES);
frameRate(10);
}
function draw() {
background(240);
translate(150, 150); // center of pan
hr = hour() % 12; // convert 24 hour clock to 12
mo = month();
stovetop();
// EGG WHITE
fill(255);
ellipse(0, 0, randomGaussian(110,1));
// EGG YOLK
push();
for (var i = 0; i <= hr; i++) {
eggYolk(xYolk, yYolk);
rotate(360 / hr);
}
pop();
// EGG CARTON
eggcarton();
monthcounter();
}
function stovetop() {
// SHADOWS
push();
fill(220);
rect(90, 90, -15, -240);
rect(-90, 90, -15, -240);
rect(90, 90, -240, -15);
// GRATES
noFill();
strokeWeight(4);
stroke(120);
line(-150, 90, 90, 90);
line(-150, 0, 90, 0);
line(-150, -90, 90, -90);
line(90, 90, 90, -150);
line(0, 90, 0, -150);
line(-90, 90, -90, -150);
pop();
// PAN
push();
fill(150); // grey for pan
rotate(minute()*6);
minutecounter();
ellipse(0, 0, 140); // pan outer circle
fill(120);
ellipse(0, 0, 130); // pan inner circle
pop();
}
function eggYolk(xYolk, yYolk) {
fill(255, 180, 0);
ellipse(xYolk + noise(-1, 1), yYolk + noise(-1, 1), random (18, 20));
}
// PAN HANDLE ROTATES 360 DEGREES BY THE HOUR
function minutecounter() {
push();
fill(220, 20, 20);
rect(-8, -80, 16, -50);
ellipse(0, -130, 16);
pop();
rect(-6, 0, 12, -80);
}
function eggcarton() {
push();
fill(240, 230, 210); // light grey
rect(145, -95, 70, 190);
fill(220, 220, 210); // darker grey
rect(215, -95, 35, 190);
translate(165, -75);
var x = 0;
var y = 0;
// EMPTY EGG CARTON (GREY DOTS)
for (var j = 0; j < 2; j++) {
for (var i = 0; i < 6; i++) {
ellipse(x, y, 28);
y += 30;
}
y = 0;
x += 30;
}
pop();
}
function monthcounter() {
push();
translate(165, -75);
fill(255);
var x = 0;
var y = 0;
// EGGS FOR JANUARY TO JUNE
for (var j = 0; j < constrain(mo, 0, 6); j++) {
ellipse(x, y, 22);
y += 30;
}
// EGGS FOR MONTHS JULY TO DECEMBER
y = 0;
x += 30;
for (var j = 6; j < mo; j++) {
ellipse(x, y, 22);
y += 30;
}
pop();
}
Graham Murtha
Section A
For this project, I wanted to document time with an apple tree/ deciduous tree. As the minute passes, the leaves change color from green to red, and at the end of each minute wilt off and blow away. As the hour passes, the ground that the tree is on grows more and more red as the leaves/apples fall to the ground. As the day passes, the background color (sky) gets darker and darker, until the last hour of the day, where it goes totally black. There is also a person under the tree trying to collect the falling foliage/apples.
sketch
]]>// Graham Murtha
//Section A
//gmurtha@andrew.cmu.edu
//Project 06 Abstract Clock
// IF YOU STICK AROUND FOR A BIT THE LEAVES WILL WILT AND BLOW AWAY!!
var y = 0
function setup() {
createCanvas(420, 480);
background(200,200,255);
text("p5.js vers 0.9.0 test.", 10, 15);
angleMode(DEGREES);
}
function draw() {
//background color of sky// CHANGES THROUGHOUT THE DAY- DARKEST AT THE 24TH HOUR
var h = hour()
var sky = map(h,0,24,255,0)
background(50,100,sky);
// outline
stroke(200)
noFill();
strokeWeight(.5);
ellipse(width/2,height/2.75, 300);
// Tree trunk
noStroke();
fill(100,60,0)
rect((width/2)-10,height-100,20,-210)
triangle(width/2,height-130,(width/2)-20,height-100,(width/2)+20,height-100)
//GROUND COVER - CHANGES WITH EVERY HOUR- BECOMES MORE RED AS THE HOUR CONTINUES
var m = minute()
var g = map(m,0,60,0,255) // red for ground fill
fill(g,255-g,0);
rect(0,height-100,width,100);
//recentering origin to the middle of the tree circle
translate(width/2,height/2.75);
//APPLE PICKER
var s1 = second()
var p = map(s1,0,60,-100,100) // changing position under the tree
fill(10)
rect(p,150,20,40);
ellipse(p+10,140,20);
strokeWeight(3);
stroke(10);
line(p+2,190,p,210)
line(p+18,190,p+20,210)
line(p,150,p-12,170)
line(p+20,150,p+33,170);
//basket
strokeWeight(1);
fill(255,255,140);
rect(p-15,170,50,20);
// BRANCHES (STATIC)
stroke(100,60,0);
strokeWeight(6);
line(0,0,150,0);
line(100,0,150,-30);
line(100,0,150,30);
line(0,0,-150,0);
line(-100,0,-150,-30);
line(-100,0,-150,30);
push(); //top left quad
rotate(120);
line(0,0,150,0);
line(100,0,150,-30);
line(100,0,150,30);
pop();
push(); // top right quad
rotate(60);
line(0,0,150,0);
line(100,0,150,-30);
line(100,0,150,30);
pop();
push(); // bottom right quad
rotate(-60);
line(0,0,150,0);
line(100,0,150,-30);
line(100,0,150,30);
pop();
push(); // bottom left quad
rotate(240)
line(0,0,150,0);
line(100,0,150,-30);
line(100,0,150,30);
pop();
//APPLES
var s = second()
var rg = map(s,0,60,0,255) // changing color (red-green)
var x = 150
var r = .2 // fall rate
for (var i= 0 ; i < 30 ; i++) {
//base geometry for apples
rotate(15);
x -= r*sin(15);
noStroke();
fill(rg,255-rg,0);
ellipse(x,y,30,15);
ellipse(x-50,y,15,10);
// falling geometry for apples (wilting)
if(s>50 & s<60){
rotate(15);
noStroke();
fill(rg,255-rg,0);
ellipse(x,y,30,15);
ellipse(x-50,y,15,10);
x -= r*sin(15);
y+=r
}
}
}
This abstract clock uses the number of vertices in the polygon to determine the hour. The minute is represented by verticle dots and seconds are represented by the rotation of the polygon.
sketch
]]>// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Project-06
//twelve hr clock
var h;
var backColor;
function setup() {
createCanvas(400, 400);
//convert hour to 12hr cycle
if (hour()>12){
h = hour()-12;
}else if (hour==0){
h = 12;
}else {
h = hour();
}
//set background to white if daytime and black for night time
if(hour()>=5 & hour()<=19){
backColor = color(215,218,219);
}else {
backColor = color("black");
}
background (backColor);
}
function draw() {
//draw minutes
minuteDots();
//draw hours and seconds
polyRotate ();
}
//-----HOUR-----
//draw polygon for hour - num of vertices = hour
function polygon(x,y,rad,points){
noFill();
strokeWeight(0.5);
var newX = 0;
var newY = 0;
//find angle increments
var angle = 360/points;
//if hour is 0 than shape is an ellipse
if(h==0){
ellipse(0,0,rad*2,rad);
}else {
//if house is more than 1, shape has same num of vertices
beginShape();
for(var i=0; i<360; i+=angle){
newX = x + rad * cos(radians(i));
newY = y + rad * sin(radians(i));
vertex (newX, newY);
}
endShape(CLOSE);
}
}
//-----SECOND-----
//draw rotating shape - each shape is a second
function polyRotate (){
push();
translate (width/2, height/2);
var angleIncrement = 6;
//map to 180 not 360 since shape has 2 sides
var secMap = map(second(),0,60,0,360);
for(var a=0; a<=secMap; a=a+angleIncrement){
//marking poly - light blue
//drawing "delay"
if(a>0){
push();
rotate(radians(a-angleIncrement));
stroke(12,222,245);
polygon(0,0,100,h);
pop();
}
//tracking poly - magenta
push();
rotate(radians(a));
strokeWeight(1);
stroke(255,13,223);
polygon(0,0,100,h);
pop();
}
pop();
//restart seconds
if(second()==59){
background(backColor);
}
}
//-----MINUTE-----
//draw dot in line for every minute
function minuteDots(){
push();
translate (width/2, 0);
//map minutes to height of minutes bar
var minuteHeights = map(minute(),0,60,20,height-20);
//draw dots
for (var d=20; d<=minuteHeights; d= d +height/60){
strokeWeight(4);
//marking poly - yellow
//drawing "delay"
if(d>20){
stroke(237,204,14);
point(0,d-height/60);
}
//tracking poly - magenta
stroke(255,13,223);
point(0,d);
}
pop();
//restart minutes
if(minute()>=60){
background(backColor);
}
}
I created an ice cream clock. The scoops run on standard time rather than military time so for every hour, a scoop is added. At 12 pm there is no scoop and it resets. For every second, a new sprinkle falls to the bottom and the chocolate ice cream slowly changes to a raspberry color. With every minute, the ice cream puddle at the bottom of the canvas gets larger ( as if its rising).
sketch
]]>// SRISHT BHAVSAR
// SECTION C 15-104
// PROJECT 6
var diam = 30; // scoop diam
var h; //hours
var m; //min
var s; //second
var c = [];
function setup() {
createCanvas(200, 20);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
for (var i=0; i < 60; i++) {
c[i] = color(random(255), random(255), random(255));
}
}
function draw() {
createCanvas(480, 480);
background('lightblue'); // light blue
let h = hour();
let m = minute();
let s = second();
//minutes equals height of puddle
translate(0,0)
stroke(210, 180, 140);
fill('beige');
rect(0,480,480,-(m));
push()
noStroke();
translate(500,510);
rotate(radians(180));
for (var i = 0; i < diam ; i+= diam) {
for (var j = 0; j < (h-12) * diam ; j+= diam) { // instead of military time, it is 12 hr time
if ( j % 4 == 0) {
fill(98 + s,52,18+s); // chocolate// changes color by second
}
if ( j % 4 == 1) {
fill('beige'); // vanilla
}
if ( j % 4 == 2) {
fill('lightpink'); // strawberry
}
circle(250,j+150,diam); // scoop
}
}
pop();
// ice cream cone w month and date
push();
fill(210, 180, 140);
strokeWeight(5);
stroke('beige');
translate(150,320);
scale(.5);
triangle(155,100,203,300,245,100);
pop();
// ice cream sprinkles are seconds
push();
fill(c[i])
scale(0.8);
for(var i =0; i < 4; i+= 4){
for(var j = 0; j < (s*10); j+= 7) {
ellipse(310, j, 3, 5);
}
}
pop();
frameRate(1);
}