A Quick Look Into The Math Of Animations With JavaScript

http://coding.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/

by aditiyaa1 • 15 years ago

107 12 15 years ago

coding.smashingmagazine.com

unwind2• 15 years ago

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.

thaumaturgy2• 15 years 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.

joahua• 15 years 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?

gord• 15 years 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.

unwind2• 15 years ago

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

davidsiems• 15 years 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)

tychonoff• 15 years ago

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.

jc4p• 15 years 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.

ars• 15 years 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.

jtchang• 15 years 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

apitaru• 15 years 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

A Quick Look Into The Math Of Animations With JavaScript

Related Stories