4 ms·

A Quick Look Into The Math Of Animations With JavaScript

107 points by aditiyaa1 15y ago

unwind 15y 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 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.
- thaumaturgy 15y 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 15y 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?
    - thaumaturgy 15y ago
      Sure: http://shomi.associatedtechs.com/ 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.
- gord 15y 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_01_Prologue.shtml 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-javascript-animation-of-fourier-series/ 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.
  - unwind 15y 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 15y ago
Cool article, it left out my favorite function though: http://en.wikipedia.org/wiki/Smoothstep http://en.wikipedia.org/wiki/Smoothstep This is the magic sauce you need. (more visual demo here: http://sol.gfxile.net/interpolation/index.html http://sol.gfxile.net/interpolation/index.html)
deleted 15y ago
[deleted]
tychonoff 15y 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 15y 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 15y 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 15y 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 http://www.robertpenner.com/easing/easing_demo.html
apitaru 15y 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

107 points by aditiyaa1 15y 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 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.

thaumaturgy 15y 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 15y 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?
  - thaumaturgy 15y ago
    Sure: http://shomi.associatedtechs.com/ 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.
gord 15y 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_01_Prologue.shtml 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-javascript-animation-of-fourier-series/ 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.
- unwind 15y 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 15y ago

Cool article, it left out my favorite function though: http://en.wikipedia.org/wiki/Smoothstep http://en.wikipedia.org/wiki/Smoothstep This is the magic sauce you need. (more visual demo here: http://sol.gfxile.net/interpolation/index.html http://sol.gfxile.net/interpolation/index.html)

deleted 15y ago

[deleted]

tychonoff 15y 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 15y 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 15y 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 15y 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 http://www.robertpenner.com/easing/easing_demo.html

apitaru 15y 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