Animating a rotation of 1 rev/sec or faster smoothly

Processing Coding Questions
1

I would like to have a clock hand rotating at 60 rpm but get rid of the visual effect of seeing the hand in more than one location at a time. Obviously with a frame rate of 60, simply trying to draw the hand at 6 degree intervals once per frame it’s just going to look like a mess. But are there any ways to make it look more realistic like this video, which I think is a real watch and not CG? clock

2

You might look at this discussion it covers the problem in some detail and there are several example sketches for you to try out.

3

I studied that one a lot… I am satisfied that I can create the accuracy, I am now looking for some ideas of how to minimize the choppy appearance of the accuracy and I wondered if anyone here had tried to solve this “problem.” Perhaps by introducing a smudge effect that grows as the hand gets fast enough to become choppy looking or something like that.

I guess the thing I am trying to avoid is when a hand starts rotating fast enough, eventually all you will see is blips of the hand here and there in what look like random locations. I know that it’s because with only 60 or so opportunities every second to show the hand, it’s not possible for it to look entirely natural.

So I was hoping to get some ideas of how to perpetuate the illusion of smooth high speed rotation and also be able to transition the effect to and from speeds at which the hand does look smooth on its own because it’s going slow enough. Clock RPS

1 Like
4

Can you share a simple version of the sketch that is giving unsatisfactory results? Are you using framerate-independent movement?

60fps is more than enough for perceptual smooth motion. A video clip of a real clock isn’t running that fast.

That said, when we observe fast rotating things in the world – fan blades, car wheel spokes, second hands (which may be very fast for brief periods of time) they don’t always appear smooth to us, because we can’t see that fast!

Sometimes a sense of realism may also come from things like light cues and / or minor irregularities – many real second hands have a jerking motion, for example.

5

I see what you mean. I haven’t tried making the movement link up to the frame rate.

Here’s an example of what I don’t like. At some point in trying to make something appear to rotate faster, the angle needs to get bigger. So for example, to make this appear to spin faster, you can change the max variable to a smaller number, but eventually you get pie shapes, and that is the part I am trying to disguise.

In reality, you might see this happen with fan blades depending on the lighting conditions, but in general you see a semi-transparent blur. But I am not sure how to go about transitioning from speeds where regular rotation like this gives an acceptable result, such as 1 rotation per second in ten steps, like the watch you showed in the video, to the illusion of something rotating much faster.

PVector loc;
float diameter, radius;
int count = 0;

void setup() {
   size(400, 600, P2D);
   pixelDensity(2);

   loc = new PVector(width/2, height/2);

   diameter = 200;
   radius = diameter / 2;
}

void draw() {
   background(255);
   
   int max = 6;

   pushMatrix();
   translate(loc.x, loc.y);
   rotate(count * TWO_PI / max);
   strokeWeight(25);
   line(0, 0, radius, radius);
   popMatrix();
   
   count++;
   if (count >= max) count = 0;
}
1 Like
6

Hello,

I did something similar and was curious what each frame looked like and also created an animated GIF (had to use 20ms between frames).

This is exactly the same as if running my sketch:
clock

Frames:
image

Code: 
// Rotating Arm
// v1.0.0
// GLV 2020-04-17

float angle;

void setup() 
  {
  size(500, 500);
  }

void draw() 
  {
  background(128);
  surface.setTitle("fps: " + str(frameRate));
  translate(width/2, height/2);
  stroke(255, 255, 0);
  strokeWeight(10);
  
  angle += TAU/60;
  if (angle == TAU) angle = 0;
  
  push();
  rotate(angle);
  line(0, 0, 185, 0);
  pop();
  
  float tmp = TAU/60;
  
  for(int i = 0; i< 60; i++)
    {
    push();
    rotate(i*tmp);
    translate(200, 0);
    line(0, 0, 20, 0);
    pop();
    }
}

:)

2 Likes
7

If you want to simulate this, I’d suggest trying this for a prototype:

  1. draw with arc(), not line() / rect(),
  2. as speed increases over blurstart and up to blurmax, slightly drop the alpha on the arc fill and increase the angle.
2 Likes