function setup() {
createCanvas(400, 250);
}
function draw() {
background(255, 225, 225);
//strawberry jam jar
push();
fill(255, 26, 26);
ellipse(70, 170, 100, 30);
pop();
line(20, 40, 20, 170);
line(120, 40, 120, 170);
push();
noStroke();
fill(255);
ellipse(70, 40, 100, 30);
fill(255, 26, 26);
ellipse(70, 40, 30, 10);
pop();
//raspberry jam jar
push();
fill(102, 0, 34);
ellipse(200, 170, 100, 30);
pop();
line(150, 40, 150, 170);
line(250, 40, 250, 170);
push();
noStroke();
fill(255);
ellipse(200, 40, 100, 30);
fill(102, 0, 34);
ellipse(200, 40, 30, 10);
pop();
//apricot jam jar
push();
fill(240, 90, 26);
ellipse(330, 170, 100, 30);
pop();
line(280, 40, 280, 170);
line(380, 40, 380, 170);
push();
noStroke();
fill(255);
ellipse(330, 40, 100, 30);
fill(240, 90, 26);
ellipse(330, 40, 30, 10);
pop();
//time
var h = hour();
var m = minute();
var s = second();
//height of jam based on time
var maph = map(h, 0, 23, 0, height / 2.25);
var mapm = map(m, 0, 59, 0, height / 2.25);
var maps = map(s, 0, 59, 0, height / 2.25);
push();
noStroke();
//strawberry jam
fill(255, 26, 26);
rect(20, 170, 100, - maps)
//raspberry jam
fill(102, 0, 34);
rect(150, 170, 100, - mapm)
//apricot jam
fill(240, 90, 26);
rect(280, 170, 100, - maph)
pop();
textSize(18);
text("strawberry", 25, 225);
text("raspberry", 160, 225);
text("apricot", 300, 225);
}
I chose to use different jams as a representation of time. Strawberry jam sells more than the other two which is why I made it seconds. Raspberry sells faster than apricot which is why I made it minutes.