A Quick Look Into The Math Of Animations With JavaScript (opens in new tab)

(coding.smashingmagazine.com)

107 pointsaditiyaa114y ago12 comments

12 comments

11 comments · 5 top-level

unwind14y ago· 4 in thread

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.

gord14y ago

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.

unwind14y ago

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

thaumaturgy14y ago

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.

joahua14y ago

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?

1 more reply

tychonoff14y ago· 2 in thread

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.

jc4p14y ago

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.

ars14y ago

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.

davidsiems14y ago

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)

apitaru14y ago

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

jtchang14y ago

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

j / k navigate · click thread line to collapse