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();
}
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
