Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bézier Clock

jackf.net

Post reply on HN
Print view View original

41–50 of 73 posts

Re: Bézier Clock

#41

Post by Breakthrough »

nyan_sandwich wrote: post #3

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.

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.

Re: Bézier Clock

#42

Post by tslater2006 »

chillingeffect wrote: post #39

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?

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

Re: Bézier Clock

#43

Post by colinjenken »

femto113 wrote: post #38
colinjenken wrote: post #34

Earlier quoted context omitted.

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

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…

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

Re: Bézier Clock

#45

Post by femto113 »

colinjenken wrote: post #43
femto113 wrote: post #38

Earlier quoted context omitted.

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…

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

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?

Re: Bézier Clock

#46

Post by codecam »

Breakthrough wrote: post #41
nyan_sandwich wrote: post #3

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.

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…

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

Re: Bézier Clock

#47

Post by drifkin »

codecam wrote: post #46
Breakthrough wrote: post #41

Earlier 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…

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

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

Re: Bézier Clock

#49

Post by [deleted] »

waqf wrote: post #18
nyan_sandwich wrote: post #3

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.

Or, y'know, a cubic Bezier interpolation.

[deleted]

Re: Bézier Clock

#50

Post by chillingeffect »

tslater2006 wrote: post #42
chillingeffect wrote: post #39

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?

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

Ah! I see now. Thank you very much for explaining that.
Post reply on HN