Javascript Animation - Sphere
Sphere.js is just experimental and without any clear objective on where it will go ahead.
After some work on HTML5 and javascript, was quite interested in performing animation on the web through javascript and canvas tag.
Sphere.js is not all mine..(need to give recognition to original creator - Hakim el Hattab)
Sphere.js originally uses setInterval() method. I have changed this to requestAnimationFrame(), which is considered as an efficient way to performing animation on web through javascript.
I had also requested a pull request to Hakim el Hattab on GitHub, but however he didn't want to change Sphere since part of the appeal of this experiment is it's tiny source code and minification. But he certainly acknowledged the fact that requestAnimationFrame() is absolutely the right way to go, and something even he does for his other experiments.
Here is the pull request.
requestAnimationFrame is simply a way to tell the browser ---> "before drawing the next frame on the screen, execute this logic/animation processing".
The browser is in charge of choosing the best moment to execute the code, which results in a more efficient use of resources.
I have also added code for showing the X and Y axes, whose origin will always be the center of the screen (Even when browser window size is resized.)
If you are curious how it looks, a live Demo is here.
After some work on HTML5 and javascript, was quite interested in performing animation on the web through javascript and canvas tag.
Sphere.js is not all mine..(need to give recognition to original creator - Hakim el Hattab)
Sphere.js originally uses setInterval() method. I have changed this to requestAnimationFrame(), which is considered as an efficient way to performing animation on web through javascript.
I had also requested a pull request to Hakim el Hattab on GitHub, but however he didn't want to change Sphere since part of the appeal of this experiment is it's tiny source code and minification. But he certainly acknowledged the fact that requestAnimationFrame() is absolutely the right way to go, and something even he does for his other experiments.
Here is the pull request.
requestAnimationFrame is simply a way to tell the browser ---> "before drawing the next frame on the screen, execute this logic/animation processing".
The browser is in charge of choosing the best moment to execute the code, which results in a more efficient use of resources.
I have also added code for showing the X and Y axes, whose origin will always be the center of the screen (Even when browser window size is resized.)
If you are curious how it looks, a live Demo is here.
Comments
Post a Comment