Dirección agujas reloj

[humano]

¡Hola!

Necesito realizar varios cambios en el siguiente reloj, ¿podéis ayudarme?

1. ¿Cómo puedo conseguir que la aguja vaya hacia atrás, es decir, que se mueva en la dirección contraria a las agujas del reloj?

2. ¿Cómo puedo conseguir que los puntos roten como en la imagen?

3. ¿Cómo puedo conseguir que la aguja empiece siempre desde arriba?

¡Gracias!

int cx, cy;
float secondsRadius;

float clockDiameter;

void setup() {
  size(270, 540);
  stroke(255);
  
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}

void draw() {
  background(255,95,95);
  
 
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 10, 0, TWO_PI);
  
    
  // Draw the hand of the clock
  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  
  // Draw the second ticks
  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}

[Lexyth]

You can change the direction of the clock by setting s to negative s (-s). As for the rest, well… that‘s all i understood and i‘m not even sure if that is right

[humano]

Thank you so mucho, Lexyth.

My other 2 questions were:

• ¿How can I rotate second ticks as they are on the uploaded gif?
• ¿And how can hand of the clock start always on top and not on a random position?

Thanks!

[Lexyth]

The position is not random

The clock displays the actual current time (only the second) using the second() method. So to have the clock start at the top, that means to start drawing when the second Hand would be at the top.

To achieve that, there are only 2 ways. Wait until the right time (second) has come, or have the clock start at the top, but display a wrong time.

If you want to wait, you can either use :

void setup() {
   delay((60-second())*1000);
}

Which i don‘t reccomend, because i don‘t know how the IDE really reacts to that…

Or you can use :

bool start = false;

void draw() {

   if (second()%10 == 0) start = true;

   if (start) {
      //all your Code to draw the clock goes in here
      //so basically all your code
   }
}

This is probably better, but a lot of Code for such a simple goal…

As for the second method, displaying the wrong time, you can do this :

int offset;

void setup() {
offset = second();
}

void draw() {

   float s = map(second()-offset, 0, 10, 0, TWO_PI);
   //this is already in your Code, except the -offset part.
   //you‘ll have to subtract PI / 2 from it to get it to start at 12 o‘clock. 
}

As for your first question, i don‘t see a gif, only an image. And as for ticks, do you mean the Hand of the clock?

Edit: Just an assumption, but do you want the Hand to „jump“ like a real clock would and not just turn smoothly? If so, that‘s what should already be happening, since the second() gives back an Int, not a float…

So maybe you want it smooth? In that case, you‘ll have to use millis(), but i‘ll wait for your answer before going on with that

[humano]

Thanks,

I tried with two first options, but they dont work. With third one always start the hand of the clock on the same position, but not the correct one.

Firstable I need to rotate points as seen in the image, and then, start always with the hand of the clock as seen in the image too.

THanks!

[Lexyth]

Well, i might understand the first option not working, cause, as i said, that‘s not really reccomended to do. Just info that it‘s a way.

But what didn‘t work with the second option? It‘s quite straight forward, so there shouldn‘t be too much that could go wrong.

As for the third way, yes, the clock Hand will start at 3 o‘clock. That‘s why i added in the Code the comment that you have to subtract PI / 2 if you want it to be at the right position (which is also written in your Original Code as a comment). Same goes for the points.

As for the rotating points… i don‘t see them rotate, but if that is what you want, you‘ll have to change the way you draw them. I don‘t know how you want to rotate them exactly, but you can change angle to float angle = radians(a)+s;… that would rotate them…

Edit: the second way actually had a flaw… i forgot to put () behind second()… now it should work… and i added % to make the wait shorter

Summary

So in Short :

To make the hand start at the same position each time, way 2 or way 3 i posted before are the way to go.

To make that position be on top, you need to add -HALF_PI at the end of the angle variables (s for the Hand and angle for the points)

[humano]

thank you so much, Lexyth,

Everything works with your instructions, but there is an error in the animation: sometimes there is a distorsion in some points when the hand clock is moving. How can i solve it?

int cx, cy;
int offset;

float secondsRadius;
float clockDiameter;

void setup() {
  size(270, 540);
  background(255,95,95);
  stroke(255);
  offset = second();
  
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}

void draw() {
  background(255,95,95);
  
 
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
    float s = -map(second()-offset, 0, 10, 0, TWO_PI) - HALF_PI; 

  
    
  // Draw the hand of the clock
  stroke(255);
  strokeWeight(5);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  
  // Draw the second ticks
  strokeWeight(5);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=36) {
    float angle = radians(a)+s;
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}

[Lexyth]

I don‘t know, i tested your Code and the points did nothing… also, you can replace -s with -HALF_PI in the variable angle. That way it will still show the right Location for the points, but might solve the problem.

[humano]

yes, that solve the problem! thank you very much!