Anson-clock
This is not so much a “clock” as it is a minute timer. It’s also a video, because I wrote it in Processing, not p5.js.
//triangle made of three points and an angle
PVector anchor;
PVector trianglePt1;
PVector trianglePt2;
float theta;
PImage img1, img2, maskImage;
//float offset = 0;
//float easing = 0.05;
//class of circles called Spot
//declare the class, the array, and the object
Spot[] sp = new Spot[12];
void setup() {
size(640, 480);
frameRate(60);
anchor = new PVector(width/2, height/2);
theta = 0;
//construct the object
for (int i = 0; i < 12; i++) {
sp[i] = new Spot((i+1)*width/12-(width/12/2), 40, width/12);
}
img1 = loadImage("profile_cutout.png");
}
void draw() {
background(250, 215, 210, 0);
image(img1, 170, 288, 300, 300);
tint(255, 185); // Display at half opacity
blendMode(SUBTRACT);
fill(30, 125, 175);
theta += 360/60/frameRate;
trianglePt1 = calcPointonCircle(radians(theta), 150);
trianglePt2 = calcPointonCircle(radians(theta+90), 150);
triangle(anchor.x, anchor.y, trianglePt1.x, trianglePt1.y, trianglePt2.x, trianglePt2.y);
fill(190, 100, 200);
for (int i = 0; i < sp.length; i++) {
ellipse(sp[i].x, sp[i].y, sp[i].diameter, sp[i].diameter);
}
for (int j = 0; j < 12; j++) {
float thetaCoordinates = radians(j*30);
int radius = 150;
float x = radius*cos(thetaCoordinates) + width/2;
float y = radius*sin(thetaCoordinates) + height/2;
ellipse(x, y, sp[j].diameter/2.65, sp[j].diameter/2.65);
}
/* Below is an effort to get the array of Spots sp[i] to move down the screen. I wanted them to move down
one per hour, and map this to time, but I didn't figure it out.
valid = True
while(valid==True)
for (int i=0; i<12; i++) {
if (random() 0.5) {
then sp[i] [sp[i].y]-1
}
if sp[i][sp[i].y]==height {
valid = false;
}*/
}
//float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
PVector calcPointonCircle(float _theta, float radius) {
PVector tempPoint = new PVector(anchor.x+radius*cos(_theta), anchor.y+radius*sin(_theta));
return tempPoint;
}
class Spot {
float x, y, diameter;
Spot(float xpos, float ypos, float dia) {
x = xpos;
y = ypos;
diameter = dia;
}
}