Ahh, it was so satisfying to watch it right as 59:59 ticked over to 00:00.
Bézier Clock
51–60 of 73 posts
Re: Bézier Clock
#52Cute, but I would prefer if the tweening were adjusted to dwell longer on the numbers when less distorted.
Re: Bézier Clock
#53Apple Watch. 'nuf said.
Fine, naysayers. I'll port it thereto. A Bezier clock is briefly amusing on a web page, but will make a delightful functional showpiece on a watch.
Re: Bézier Clock
#54hello
Re: Bézier Clock
#55Hello!! I created something extremely similar and fully scriptable/configurable several years ago:
http://www.animaclock.com/viewfont?font=anifont4_bez&clean=1...
http://www.animaclock.com/viewfont?font=mrcl_kk_ghost&clean=...
Re: Bézier Clock
#56Excellent. 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.
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 y…
There are many interesting easing functions to play with, primarily due to Robert Penner:
Re: Bézier Clock
#57Hi all, I'm the author.
Thanks for all the feedback - really good to hear you like the clock. I've added some more animation easings as per your suggestions.
To clarify: when continual animation is off, each digit only animates for a specified amount of time. I set this at 20 seconds for all but the 'seconds' digits, which animate continually. I thought this looked cooler and they're inessential to reading the time.
I'll try and port it to Apple watch / Android wear when they release their proper watch face SDKs.
Re: Bézier Clock
#58Excellent. 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.
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 y…
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).
Re: Bézier Clock
#59Earlier quoted context omitted.
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 y…
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]
Re: Bézier Clock
#60Earlier quoted context omitted.
Yes. Perhaps hitting the optimum form at 45 would be ideal. So 4 would start becoming clearer at 40 and then start degenerating after 45.
Or change the motion curve so that it stays in the recognizable state for longer, like 90% of the time.
I'd suggest capping the animation duration. 90% of 10 hours still leaves an hour for the animation.
If you've got an extended clock (days, months, years, centuries, millennia), morphing could take a while.