Bézier Clock

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.

Breakthrough 11 years 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.

frigaardj 11 years 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).

nyan_sandwich 11 years 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.

mietek 11 years ago | | |

There are many interesting easing functions to play with, primarily due to Robert Penner:

http://www.robertpenner.com/easing/

AlexBelgium 11 years ago | | |

Cool. That's actually fun to try out. http://plnkr.co/edit/JybIMrHpUzGyr39cV5oz?p=preview

codecam 11 years ago | | |

Where did you find bezier_clock.pde to modify? I would like to try a few things as well.

drifkin 11 years ago | | |

http://jackf.net/bezier-clock/bezier_clock.pde

codecam 11 years ago | | |

ah right ... my webprogramming is a bit lacking

edit: thanks

waqf 11 years ago | |

Or, y'know, a cubic Bezier interpolation.

frigaardj 11 years ago |

Hi 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.

kyrra 11 years ago |

My crappy addition to clocks: http://myoldclock.appspot.com/

Did it in about 12 hours for a Google I/O competition 3 years ago. It's a countdown clock instead of a normal clock, but similar idea.

mikepurvis 11 years ago | |

Another entry in the "weird clocks" thread: http://sandbox.mikepurvis.com/js/clock/

surreal 11 years ago | |

Really nice.

I'll throw mine in too then – an "analog" clock drawn by 64 fast-moving LEDs: http://www.thisissurreal.com/shai/hologram/hologram.html (clock is at the bottom)

techaddict009 11 years ago | |

I liked it! You should convert it to clock.

bendyorke 11 years ago | |

This is very mesmerizing

mholt 11 years ago |

Wow, that's awesome. Reminds me of Timely Alarm Clock[1] which I use every day and still tout as probably the single most beautiful Android app ever.

However, for this Bézier clock, it would be more practical if the animation was finished before it had to change again, so that we could read the numbers.

[1]: https://play.google.com/store/apps/details?id=ch.bitspin.tim...

vhost- 11 years ago | |

I _love_ timely. It's the first app I install if I ever need to reinstall my Android OS.

So pretty.

TrainedMonkey 11 years ago |

Looks awesome, but tens of seconds need to morph faster. By the time 4 is clearly formed and visible seconds read 48. While continuous motion is aesthetic, it is hard to tell time.

akovaski 11 years ago | |

The 4 actually becomes its true form at 40 (read the text below the clock), so what you were seeing was not 48 but rather 38.

primelens 11 years ago | | |

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.

smackfu 11 years ago | | |

Or change the motion curve so that it stays in the recognizable state for longer, like 90% of the time.

dredmorbius 11 years ago | | |

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.

frigaardj 11 years ago | | |

Currently the animations all last at most 20 seconds, irrespective of the transition duration.

rumbler 11 years ago | | |

Came here to say this. The "pure" version of each digit should come in the middle, rather than at the beginning, of its interval.

femto113 11 years ago |

I propose a new sport: Bezier clock golf, in which we try to construct a readable clock using the fewest number of control points. Current par is 5.

bruhlery 11 years ago | |

cool challenge, but how do you do less than 5 bezier points for the numeral 8?

colinjenken 11 years ago | | |

Actually you just need 2 for creating an 8 if it's a closed spline. 3 If open.

femto113 11 years ago | | |

Seems like open is a requirement, since not all the numerals are closed and I'm not sure how one would morph between open and closed spines. Playing around here (http://www.victoriakirst.com/beziertool/ anyone know a similar tool that has bookmarkable results so we can share work?) I'm thinking three control points should be achievable (haven't found a way to make a nice looking 4 yet, but most other numerals aren't that hard to pull off).

colinjenken 11 years ago | | |

Here is a quick upload of all the numbers (0-9) built with only 3 points. Sorry about not animating them... didn't have time. https://www.youtube.com/watch?v=yddpzyQoy_0&feature=youtu.be

femto113 11 years ago | | |

Nice. Seems unlikely we could get it down to 2 points as numerals like 3 seem to require two distinct curves, but perhaps someone will try?

propela 11 years ago |

Hello!! I created something extremely similar and fully scriptable/configurable several years ago:

http://www.animaclock.com/

http://www.animaclock.com/viewfont?font=anifont4_bez&clean=1...

http://www.animaclock.com/viewfont?font=mrcl_kk_ghost&clean=...

tdicola 11 years ago |

Nice animation. Something similar is JWZ's dali clock: http://www.jwz.org/xdaliclock/

sixothree 11 years ago | |

I sure do remember that being a lot more awesome at the time.

owenversteeg 11 years ago | |

Oh man. I still use my Palm Vx, and I'm going to put this on there as soon as I get home. Thank you so much!

bendyorke 11 years ago | |

I think that is the first time I've seen Palm OS and Pebble Smart Watch in the same list

devindotcom 11 years ago |

Fun. I'd say you should have every number at x/60 or whatever of the way between first and next state, including hour and such, but that would probably just result in a bunch of unrecognizable squiggles.

edit: oops, RTFM devin

IneffablePigeon 11 years ago | |

Seems like you can toggle that by hitting space.

Edit: oops, three of us got here at the same time

yaur 11 years ago | | |

How do you do that on an iPhone?

dangerlibrary 11 years ago | | |

Use it to buy a laptop.

TrainedMonkey 11 years ago | |

That is already there, press space.

bsimpson 11 years ago | |

Try hitting the spacebar.

jlward4th 11 years ago |

Doesn't work unless cookies / local storage is enabled:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. processing.js:9503

Not sure why processing.js needs local storage to work.

pit 11 years ago |

Processing is absolutely wonderful. Be sure to check out p5.js as well [1], which has hooks into various HTML5 APIs including video and sound.

[1]: http://p5js.org/

chillingeffect 11 years ago |

The graphics are excellent.

I'm curious about the code organization: it seems that processing.js contains both the application code for the clock as well as the libraries for interpreting the Processing code. Is that true? Is that the best organization? Would it not be better to have have a processing.js which is the interpreter/libraries and a bezier_clock.js?

tslater2006 11 years ago | |

Per the Processing.js site, you include the processing.js file and then set an attribute on the canvas showing where to get the PDE file (your code). In this case they set it to: data-processing-sources="bezier_clock.pde"

Making the sources to the clock available here: http://jackf.net/bezier-clock/bezier_clock.pde

chillingeffect 11 years ago | | |

Ah! I see now. Thank you very much for explaining that.

bitwize 11 years ago |

Right now jwz is slapping his own forehead going "bezier curves! Of course! Why didn't I think of that?"

Tloewald 11 years ago |

Cute, but I would prefer if the tweening were adjusted to dwell longer on the numbers when less distorted.

benjaminjackman 11 years ago |

Pretty Cool! I wonder if it's possible / how hard it would be to port to Pebble.

__m 11 years ago | |

probably not that hard, but the resolution is pretty low.

LukeB_UK 11 years ago |

Reminds me of the animation on the numbers in Timely[0]

[0]: https://play.google.com/store/apps/details?id=ch.bitspin.tim...

matthiasb 11 years ago |

It would be fun to have it on phones. Can you make an Android app? ;-)

pit 11 years ago | |

You could do it! Wrap an HTML file into a WebView Activity. The Android portion is pretty much:

    public class MyWebViewActivity extends Activity {
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        setContentView(webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/index.html");
      }
    }

Retr0spectrum 11 years ago | |

I'm not entirely sure why this is being downvoted. It would make a pretty cool clock widget.

arketyp 11 years ago |

I image you would become used to reading the interpolated states eventually. That would be a pretty nice way to write fractions.

RoboTeddy 11 years ago |

I wonder what it would look like with interpolation pathways that minimize the amount of bending

heeen 11 years ago |

Why does this need a cookie to function? I block cookies by default and I get annoyed every time some site requires a cookie for something mundane like displaying the time or playing a game that doesn't even preserve state across browser sessions (like 2048)

edit: 2048 does indeed restore the game, but it should still work without a cookie.

frigaardj 11 years ago | |

I'm not sure, but it's a line in Processing.js that breaks everything if removed. Not something easily fixable.

bujatt 11 years ago |

Very nice and elegant way, for me this would be the first reason to get an Apple Watch

vog 11 years ago |

Great idea!

But why is the site blocking the Ctrl+D keystroke? Don't they want to be bookmarked?

myhf 11 years ago |

Ahh, it was so satisfying to watch it right as 59:59 ticked over to 00:00.

proneb1rd 11 years ago |

Too bad, doesn't work without cookies/localstorage enabled.