A Quick Look Into The Math Of Animations With JavaScript | Hacker News Reader

A Quick Look Into The Math Of Animations With JavaScript

coding.smashingmagazine.com

107 pointsaditiyaa112 comments

Open articleView on HN

Cool article, it left out my favorite function though: http://en.wikipedia.org/wiki/Smoothstep

This is the magic sauce you need. (more visual demo here: http://sol.gfxile.net/interpolation/index.html)

The author shunned mathematics in favor of programming, but this exercise showed why that was a mistake.

Compared to serious mathematics, programming is relatively trivial.

With mathematics, you can do anything in computing.

Without it, you're reduced to this feeble exercise in self-enlightment.

I completely agree with you. This line:

  As humans, however, degrees ranging from 0 to 360 are much easier to read. That’s why you can and should convert between them with this simple formula.

Made be cringe.

Radians made no sense to me - until I found out the relationship to PI and then it's a much more natural was of describing angle - especially if you use Tau.

Very classical material, especially if you've ever been (as the author) writing demos/intros in the 80s/90s (http://en.wikipedia.org/wiki/Demoscene). I have many memories of writing basic programs that spat out sine tables, since it wasn't possible to compute something as complex as a sine in real-time.

Yep, and they're still useful: I use a logarithmic computation for fading elements in and out with JavaScript, and by pre-computing the values for each step and storing them in an array, the fade still looks smooth even on older hardware.

I'd love to see this in action - do you have a link? Do you literally serve a precomputed array as part of the JS and iterate over that using opacity/IE filter/whatever, or is it more nuanced than that?

Sure: http://shomi.associatedtechs.com/

It's not precomputed server-side, it's precomputed when the fade effect is called in the JS. The value for each step is then stored in the task object that performs the fade. Which is cheating a little bit, I suppose, but this way, I can fade from any value to any value, at what appears to be the same "speed", without any glitching.

yes, I much enjoyed flipcode.com back in the day, particularly Alex Champandards series - http://www.flipcode.com/archives/The_Art_of_Demomaking-Issue...

I played with Javascript sine animations as a way of introduce the idea of sine function in some intuitive way.

Eg Two Rotating Circles - http://quantblog.wordpress.com/2011/10/05/adding-circles-jav...

I think Javascript hacking in a web page is todays equivalent to hacking GW-Basic, Turbo Pascal or A86 assembler for my generation.

Of course, back in (my) day, the web didn't exist, so there was no flipcode.com. :| Now off to trim the lawn.

Reading this tutorial reminded me of the first time I realized how handy a bit of math can be for animation. I think it was this little ease-out snippet that opened my eyes (served me well for years to come):

posX += (destX - posX)/ slowdownRate

Moves an item like so: X....X...X..X.X

This ball is so much fun to play with! Single click to where you want the ball to go.

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

Reply on news.ycombinator.com