Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

Programming Questions

big_slim

Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

in Programming Questions • 3 years ago

I'm trying to recreate polarclock in processing, I've got so it displays the arcs according to the correct time, but I'm trying to make the second arc update in every frame (24 frames a second) instead of just every second (1 frame a second) to create a very smooth animation. I trying to use millis() to do this, but just can't figure it out for the life of me, the specific line of code is on line 42/43.

Any help would be appreciated.

Thanks

Dan

int diameter;
int arc_x;
int arc_y;
float degrees_0;
float degrees_90;
float degrees_180;
float degrees_270;
float degrees_360;
PFont font;
void setup() {
size(640, 480); // Sets the size of the application
frameRate(24); // Sets the frame rate of the appliation
smooth(); // Anti Aliasing on
strokeCap(SQUARE); // Sets the edges of the arc to square instead of round
font = loadFont("BauhausStd-Medium-42.vlw");
textFont(font);
diameter = 200;
arc_x = width / 2; // Arcs aligned to the centre of the screen
arc_y = height / 2; // Arcs aligned to the centre of the screen
degrees_0 = map(0, 0, 360, 0, TWO_PI) - HALF_PI;
degrees_90 = map(90, 0, 360, 0, TWO_PI) - HALF_PI;
degrees_180 = map(180, 0, 360, 0, TWO_PI) - HALF_PI;
degrees_270 = map(270, 0, 360, 0, TWO_PI) - HALF_PI;
degrees_360 = map(360, 0, 360, 0, TWO_PI) - HALF_PI;
}
void draw() {
background(200);
noFill();
strokeWeight(20);
text("The time is: " + hour() + ":" + minute() + ":" + second(), 20, 50);
text("The date is: " + day() + ":" + month() + ":" + year(), 20, 460);
float secondAngle = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
//float secondAngle = map(second() + norm(millis(), 0, 1000), 0, 60, 0, TWO_PI) - HALF_PI;
float minuteAngle = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
float hourAngle = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI) - HALF_PI;
float dayAngle = map(day(), 1, 31, 0, TWO_PI) - HALF_PI;
float monthAngle = map(month(), 1, 12, 0, TWO_PI) - HALF_PI;
float monthDiameter = diameter * 1.8;
float dayDiameter = diameter * 1.6;
float secondDiameter = diameter * 1.4;
float minuteDiameter = diameter * 1.2;
float hourDiameter = diameter;
// Second Arc
stroke(255);
arc(arc_x, arc_y, secondDiameter, secondDiameter, degrees_0, secondAngle);
// Minute Arc
stroke(245);
arc(arc_x, arc_y, minuteDiameter, minuteDiameter, degrees_0, minuteAngle);
// Hour Arc
stroke(235);
arc(arc_x, arc_y, hourDiameter, hourDiameter, degrees_0, hourAngle);
// Day Arc
stroke(225);
arc(arc_x, arc_y, dayDiameter, dayDiameter, degrees_0, dayAngle);
// Month Arc
stroke(215);
arc(arc_x, arc_y, monthDiameter, monthDiameter, degrees_0, monthAngle);
if(second() == 0) {
stroke(255);
ellipse(arc_x, arc_y, secondDiameter, secondDiameter);
}
}

Replies(5)

kooogy

Re: Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

3 years ago

millis() is different from the minutes() seconds() etc - it's relative and isn't periodic - so it'll just keep growing.

"Returns the number of milliseconds (thousandths of a second) since starting an applet. This information is often used for timing animation sequences."

quarks

Re: Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

3 years ago

The main problem is that seconds() has a resolution of 1 second so can't be used to do what you want. The following changes will do the trick.

Add three new variables above your setup()

long baseTime;
float currSecs, lastSecs;

Add the folowing lines as the last lines in setup()

// Calculate the number of millis for the last whole minute
// ie when second() would have returned 0
int baseTime = millis() - second() *1000;
// Initialise these so they work in draw()
lastSecs = currSecs = ((millis() - baseTime)`000)/1000.0;

In setup remove the frameRate command as you will no longer need it.

The rest of the changes are in draw()

Add this line after the 2 text statements and before the commands to calculate the arcs

// Calculate the current number of seconds as a float
currSecs = ((millis() - baseTime)`000)/1000.0;

Also in draw change the secondAngle calculation to

float secondAngle = map(currSecs, 0, 60, 0, TWO_PI) - HALF_PI;

Finally at the end of draw where you test for seconds() == 0 change this to

if(currSecs < lastSecs) {
stroke(255);
ellipse(arc_x, arc_y, secondDiameter, secondDiameter);
}
lastSecs = currSecs;

This will change the arc when the second roll over from 59.999 > 0.0 otherwise the second hand gets stuck for 1 second between 0>1 second. Finally remember the number of seconds in lastSecs so this test will work next time.

I tried it out and it works smoothly.

Nice sketch by the way.

big_slim

Re: Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

3 years ago

Hi thanks for your detailed response, I just tried the code you suggested but I'm getting errors from this section of code on line 6.

// Calculate the number of millis for the last whole minute
// ie when second() would have returned 0
int baseTime = millis() - second() *1000;
// Initialise these so they work in draw()
lastSecs = currSecs = ((millis() - baseTime)`000)/1000.0;

I'm getting the error from the `000 part? Could you please explain what this is, I'm not familiar with it.

Thanks

Dan

PhiLho

Re: Re: Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

3 years ago

It is a bug of the forum, which I reported. The original should look like:
((millis() - baseTime) % 60000) / 1000.0
(I find it looking better with spaces, anyway...)

big_slim

Re: Processing Polar Clock Minute Arc.. Just need a second pair of eyes to look at..

3 years ago

Thanks for clearing that error up, I've got the app to compile properly now.. I'm just trying to add text to each arc to follow the moving endpoint round. I'll keep posting code if people are interested?

Top Reply