Clocks that rotate

Programming Questions

jomaira

in Programming Questions • 1 month ago

Hi everyone,

I started on my second project and i'm stuck. I need to make two clocks that rotate. I will try to explain this as good as possible.

I made two analog clocks. One will display the hours and the second one will display the minutes. The clocks dont have arms but will instead just rotate itself. The place where the two clocks touch is the place where the time is displayed.

e.g, If its 6: 30 , the hour and minute clocks will rotate untill the 6h and the 30m meet eachother. I think I can rotate them but I dont know how to rotate the clocks so that the time will always be at the place where the clocks meet eachother.

I hope that someone can help me or at least point me into the right direction

void setup() {
   size(500, 500);
   stroke(255);
   smooth();

   int fontSize=16;

}

void draw() {
   background(200);
   fill(80);

   noStroke();
   // Angles for sin() and cos() start at 3 o'clock;
   // subtract HALF_PI to make them start at the top
   ellipse(100, 100, 160, 160);
   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
   float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
   float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
   stroke(255);
   strokeWeight(1);
   line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
   strokeWeight(2);
   line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
   strokeWeight(4);
   line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);

    fill(255);

    float angle = -HALF_PI + HALF_PI / 3;
   float angle_inc = TWO_PI / 12;
   for ( int i = 1; i <= 12; i++, angle += angle_inc ) {
       text(i,95 + cos(angle) * 70,105 + sin(angle) * 70);
   }

ellipse(270, 270, 300, 300);
}

Replies(8)

PhiLho

Re: Clocks that rotate

1 month ago

Interesting idea. But the code you should seems relatively unrelated.
You can extract from it the code that displays the digits, and use the same idea to display the minute digits in the other clock face.
Where are you stuck, then? In the code rotating the faces? Basically, you will have to use translate along with rotate.

kooogy

Re: Clocks that rotate

1 month ago

start by drawing the two clock faces next to each other, with 1-12 on the first and 0 to 55 (going up in 5s?) on the second. that should be simple enough. use two methods, one for each face.

then the trick is rotating those faces to reflect the time. that's just a bit of maths. but do the first thing first and post it here.

jomaira

Re: Re: Clocks that rotate

1 month ago

thank you .. I made some small changes in the code. I hope my idea is a bit more clearly now.

I removed the arms cause its the clocks that need to rotate. Ive been thinking about a way to make the clocks show the correct number ( hour or minutes) at the cordinates where the clocks meet, but i really have no idea how to do this.

void setup() {
   size(500, 500);
   stroke(255);
   smooth();

   int fontSize=16;

}

void draw() {
   background(255);
   fill(80);

   noStroke();
   // Angles for sin() and cos() start at 3 o'clock;
   // subtract HALF_PI to make them start at the top
   ellipse(100, 100, 160, 160);
   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
   float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
   float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
   stroke(255);

    fill(255);

    float angle = -HALF_PI + HALF_PI / 3;
   float angle_inc = TWO_PI / 12;
   for ( int i = 1; i <= 12; i++, angle += angle_inc ) {
       text(i,95 + cos(angle) * 70,105 + sin(angle) * 70);
   }

   fill(80);
   ellipse(270, 270, 320, 320);
    stroke(255);

    fill(255);


   float mangle = -HALF_PI + HALF_PI / 3;
   float mangle_inc = TWO_PI / 12;
   for ( int i = 0; i <= 55; i=i+5, mangle += mangle_inc ) {
   text(i,265 + cos(mangle) * 140,270 + sin(mangle) * 140);
   }
}

tfguy44

Re: Clocks that rotate

1 month ago

Here, I made the two clocks rotate. I can't be bothered to work out the math to figure out where they should be rotated too, however. I'll leave that to you.

void setup() {
size(500, 500);
stroke(255);
smooth();
ellipseMode(CENTER);
//textAlign(CENTER);
}
void draw() {
background(255);
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
// Draw hour wheel.
pushMatrix();
translate(100,100);
rotate(map(millis()%5000,0,5000,0,TWO_PI)); // Rotate hour wheel.
// Disc.
noStroke();
fill(80);
ellipse(0, 0, 160, 160);
// Numbers.
//stroke(255);
fill(255);
float angle = -HALF_PI + HALF_PI / 3;
float angle_inc = TWO_PI / 12;
for ( int i = 1; i <= 12; i++, angle += angle_inc ) {
text(i, -5 + cos(angle) * 70, 5 + sin(angle) * 70);
}
popMatrix();
// Draw minute wheel.
pushMatrix();
translate(270,270);
rotate(-map(millis()%5000,0,5000,0,TWO_PI)); // Rotate minute wheel.
// Disc.
noStroke();
fill(80);
ellipse(0, 0, 320, 320);
// Numbers.
//stroke(255);
fill(255);
float mangle = -HALF_PI + HALF_PI / 3;
float mangle_inc = TWO_PI / 12;
for ( int i = 0; i <= 55; i=i+5, mangle += mangle_inc ) {
text(i, -5 + cos(mangle) * 140, 5 + sin(mangle) * 140);
}
popMatrix();
}

kooogy

Re: Clocks that rotate

1 month ago

ah, ok, i was expecting the join to be horizontal as that's easier...

the code you've got in there to make 0 at the top rather than at 3 o'clock, you just need to change that so that the 0s meet at your join. PI * .25 for the hours, PI * 1.25 for the minutes.

then you need to subtract an offset for the time. hours * TWO_PI / 12 (*), minutes * TWO_PI / 60

(* for hours, you might want to make this (hours + minutes / 60) * TWO_PI / 12 otherwise it'll say 11 even it it's 11:55)

and use frameRate(5) otherwise it's drawing identical frames 59 times out of 60 and wasting cpu.

jomaira

Re: Re: Clocks that rotate

29 days ago

Sorry to bother you again. I changed the clocks so that theyre horizontal now.
The code said to remove half PI to make the clock start at 3.

Im still new at this and dont really understand would you mean. do you maybe know some similiar code that explains more about it?

void setup() {
   size(700, 400);
   stroke(255);
   smooth();

   int fontSize=16;

}

void draw() {
   background(255);
   fill(80);

   noStroke();
   // Angles for sin() and cos() start at 3 o'clock;
   // subtract HALF_PI to make them start at the top


   ellipse(150, 150, 160, 160);
   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
   float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
   float h = map(hour() % 12, 0, 12, 0, TWO_PI) ;
   stroke(255);

    fill(255);


    float angle = -HALF_PI + HALF_PI / 3;
   float angle_inc = TWO_PI / 12;
   for ( int i = 1; i <= 12; i++, angle += angle_inc ) {
       text(i,145 + cos(angle) * 70,155 + sin(angle) * 70);
   }

   fill(80);
   ellipse(390, 170, 320, 320);
    stroke(255);

    fill(255);


   float mangle = -HALF_PI + HALF_PI / 3;
   float mangle_inc = TWO_PI / 12;
   for ( int i = 0; i <= 55; i=i+5, mangle += mangle_inc ) {
   text(i,385 + cos(mangle) * 140,170 + sin(mangle) * 140);
   }
}

kooogy

Re: Clocks that rotate

29 days ago

> The code said to remove half PI to make the clock start at 3.

what code?

0 degrees is generally 3 o'clock and +ve degrees proceed anti-clockwise from there. that -HALF-PI in your code puts 0 degrees at 12 o'clock position. but i argue that you don't want that, you want 0 degrees (ie 12 o'clock or 0 minutes) to be at the join. so add PI * .25 for the hours (angle) and PI * 1.25 for the minutes (mangle)

here's what i have.

void setup() {
size(500, 500);
stroke(255);
smooth();
int fontSize=16;
frameRate(5);
}
void draw() {
background(255);
fill(80);
noStroke();
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
ellipse(100, 100, 160, 160);
float s = map(second(), 0, 60, 0, TWO_PI);
float m = map(minute(), 0, 60, 0, TWO_PI);
float h = map(hour() % 12, 0, 12, 0, TWO_PI);
stroke(255);
fill(255);
float angle = PI * 2.5; // CHANGED
float angle_inc = TWO_PI / 12;
for (int i = 0 ; i <= 11 ; i++, angle += angle_inc) { // CHANGED
// print 0 as 12
int g = i;
if (g == 0) {
g = 12;
}
text(g, 95 + cos(angle) * 70, 105 + sin(angle) * 70);
}
// minutes
fill(80);
ellipse(270, 270, 320, 320);
stroke(255);
fill(255);
float mangle = PI * 1.25; // CHANGED
float mangle_inc = TWO_PI / 12;
for (int i = 0 ; i <= 55 ; i += 5, mangle += mangle_inc) {
text(i, 265 + cos(mangle) * 140, 270 + sin(mangle) * 140);
}
}

now you need to subtract a value for hours and minutes to rotate the two faces. add it to angle and mangle in lines 22 and 37.

jomaira

Re: Re: Clocks that rotate

29 days ago

thank you guys for helping me.. its works (kinda).. i still have to figure out how to display the correct time, but im getting there..

Top Reply