5 ms·

Excellent. It looks like it uses linear interpolation between the different glyphs, which makes it look a bit jerky. The author might want to try a sinusoidal

Excellent. It looks like it uses linear interpolation between the different glyphs, which makes it look a bit jerky. The author might want to try a sinusoidal interpolation so that velocity reaches zero at the key frames and the whole thing thus spends more time dwelling on the legible parts of the animation and looks smoother.

waqf 12y ago
Or, y'know, a cubic Bezier interpolation.
- deleted 12y ago
  [deleted]
Breakthrough 12y ago
One trick I've noticed to make animations/transitions "snappier" and more natural is to use quadratic/square (power of 2) scaling. For fun I did it on this clock just saving it locally - you can do it by modifying line 140 of `bezier_clock.pde` to square the ratio instead of simply assign it: animationRatio = ratio * ratio; // can also replace with sqrt(ratio) Again, just makes it a little bit 'snappier' (remember you have to hit spacebar to turn on continual animation), and scales it so you can determine the numbers a bit more clear earlier in the cycle because of the scaling on (0.0, 1.0]. This is certainly a fun piece of code to play with.
- codecam 12y ago
  Where did you find bezier_clock.pde to modify? I would like to try a few things as well.
  - drifkin 12y ago
    http://jackf.net/bezier-clock/bezier_clock.pde http://jackf.net/bezier-clock/bezier_clock.pde
    - codecam 12y ago
      ah right ... my webprogramming is a bit lacking edit: thanks
- mietek 12y ago
  There are many interesting easing functions to play with, primarily due to Robert Penner: http://www.robertpenner.com/easing/ http://www.robertpenner.com/easing/
  - AlexBelgium 12y ago
    Cool. That's actually fun to try out. http://plnkr.co/edit/JybIMrHpUzGyr39cV5oz?p=preview http://plnkr.co/edit/JybIMrHpUzGyr39cV5oz?p=preview
- frigaardj 12y ago
  I've updated it with quad, cubic and sinusoidal modes. They all look good. Only problem is that because it's no longer linear, the various points can change at different rates and thus create 'kinks' in the curve. When it's linear, the 'line points' and the associated 'control points' are always in a line locally tangential to the curve (don't know the proper terminology but hopefully you understand).
  - deleted 12y ago
    [deleted]
  - nyan_sandwich 12y ago
    That shouldn't happen if you do the motion transform uniformly on all axes. It should just be equivalent to changing the speed of time, rather than actually changing the trajectories.

waqf 12y ago

Or, y'know, a cubic Bezier interpolation.

deleted 12y ago
[deleted]

Breakthrough 12y ago

One trick I've noticed to make animations/transitions "snappier" and more natural is to use quadratic/square (power of 2) scaling. For fun I did it on this clock just saving it locally - you can do it by modifying line 140 of `bezier_clock.pde` to square the ratio instead of simply assign it: animationRatio = ratio * ratio; // can also replace with sqrt(ratio) Again, just makes it a little bit 'snappier' (remember you have to hit spacebar to turn on continual animation), and scales it so you can determine the numbers a bit more clear earlier in the cycle because of the scaling on (0.0, 1.0]. This is certainly a fun piece of code to play with.

codecam 12y ago
Where did you find bezier_clock.pde to modify? I would like to try a few things as well.
- drifkin 12y ago
  http://jackf.net/bezier-clock/bezier_clock.pde http://jackf.net/bezier-clock/bezier_clock.pde
  - codecam 12y ago
    ah right ... my webprogramming is a bit lacking edit: thanks
mietek 12y ago
There are many interesting easing functions to play with, primarily due to Robert Penner: http://www.robertpenner.com/easing/ http://www.robertpenner.com/easing/
- AlexBelgium 12y ago
  Cool. That's actually fun to try out. http://plnkr.co/edit/JybIMrHpUzGyr39cV5oz?p=preview http://plnkr.co/edit/JybIMrHpUzGyr39cV5oz?p=preview
frigaardj 12y ago
I've updated it with quad, cubic and sinusoidal modes. They all look good. Only problem is that because it's no longer linear, the various points can change at different rates and thus create 'kinks' in the curve. When it's linear, the 'line points' and the associated 'control points' are always in a line locally tangential to the curve (don't know the proper terminology but hopefully you understand).
- deleted 12y ago
  [deleted]
- nyan_sandwich 12y ago
  That shouldn't happen if you do the motion transform uniformly on all axes. It should just be equivalent to changing the speed of time, rather than actually changing the trajectories.