Bézier Clock

Instructions: Click to show/hide curve splines & points. Press space to toggle continual animation - i.e. each number will never pause and will always be animating to its next value. For example, at 13:30:30 the hour unit digit would be halfway between 3 and 4 if continual animation were on. This can be hard to read, but looks cool. In theory, it should be possible to read the exact time only from the first digit. With continual animation disabled, digits will animate for a fixed amount of time (default 1s) which you can change by typing a number and pressing Enter. You can also have both at once by pressing 's'; the continual animation will shadow the actual animation. Finally, press 'a' to cycle through linear, quadratic, cubic and sinusoidal easing.

About: This is my first play with Processing.js, put together in a few hours. The program is very simple (see code); it just linearly interpolates five Bézier control points between pre-defined states. Bézier curves are made up of various 'node' points that the curve passes through, and 'control' points for each node that affect the local curvature. By adjust the locations and distance of the control points from the node points, you can create complex curves with very few points. What this program does is calculate straight-line paths between each point's location on the current and next shown digit, and draws a Bézier curve through the interpolated points. Most of the code is fluff to do the actual on-page drawing and to store the pre-defined 10 digits - the core of the program lies at the start of the draw() function and in the update() method of the BezierDigitAnimator. NB for some reason Processing.js won't work if you have cookies disabled in Chrome.

Jack Frigaard, September 2014