
Bézier Clock - frigaardj
http://jackf.net/bezier-clock/
======
nyan_sandwich
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
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
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
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.

------
frigaardj
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
My crappy addition to clocks:
[http://myoldclock.appspot.com/](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
Another entry in the "weird clocks" thread:
[http://sandbox.mikepurvis.com/js/clock/](http://sandbox.mikepurvis.com/js/clock/)

------
mholt
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...](https://play.google.com/store/apps/details?id=ch.bitspin.timely&hl=en)

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

So pretty.

------
TrainedMonkey
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
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
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
Or change the motion curve so that it stays in the recognizable state for
longer, like 90% of the time.

~~~
dredmorbius
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
Currently the animations all last at most 20 seconds, irrespective of the
transition duration.

------
femto113
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
cool challenge, but how do you do less than 5 bezier points for the numeral 8?

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

~~~
femto113
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/](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
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](https://www.youtube.com/watch?v=yddpzyQoy_0&feature=youtu.be)

~~~
femto113
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
Hello!! I created something extremely similar and fully
scriptable/configurable several years ago:

[http://www.animaclock.com/](http://www.animaclock.com/)

[http://www.animaclock.com/viewfont?font=anifont4_bez&clean=1...](http://www.animaclock.com/viewfont?font=anifont4_bez&clean=1&_mag=1.5)

[http://www.animaclock.com/viewfont?font=mrcl_kk_ghost&clean=...](http://www.animaclock.com/viewfont?font=mrcl_kk_ghost&clean=1&_mag=1.5)

------
tdicola
Nice animation. Something similar is JWZ's dali clock:
[http://www.jwz.org/xdaliclock/](http://www.jwz.org/xdaliclock/)

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

------
devindotcom
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
Seems like you can toggle that by hitting space.

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

~~~
yaur
How do you do that on an iPhone?

~~~
dangerlibrary
Use it to buy a laptop.

------
jlward4th
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
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/](http://p5js.org/)

------
chillingeffect
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
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](http://jackf.net/bezier-clock/bezier_clock.pde)

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

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

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

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

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

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

[0]:
[https://play.google.com/store/apps/details?id=ch.bitspin.tim...](https://play.google.com/store/apps/details?id=ch.bitspin.timely&hl=en_GB)

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

~~~
pit
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");
          }
        }

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

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

------
heeen
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
I'm not sure, but it's a line in Processing.js that breaks everything if
removed. Not something easily fixable.

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

------
vog
Great idea!

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

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

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

------
frandroid
Finally, Dali Clock arrives on the web!

------
randartie
Gives me a headache

------
weegy
I love it!

------
propela
hello

------
ctdonath
Apple Watch.

'nuf said.

~~~
ctdonath
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.

