Creating Spider Animation with HTML5 and Javascript

All of this is made from pure HTML5 and Javascript. No any plugins, Flash, GIFs image at all!
Recently, I go to website http://research.domaintools.com and found the amazing animation as shown in image below

Because of my curiosity, I look under the hood to find how it works. It surprise me that all of this is made from pure HTML5 and Javascript. No any plugins, Flash, GIFs image at all!

So, I decided to write the blog to share to you. Here is workflow on how to make spider animation:

First, they create canvas covering the web page.

Then, code get drawing object by calling canvas.getContext() function

After that, Points are randomly created all over the canvas. Each of them stores the 5 points that closest to it.

The drawing is start in function initAnimation()

The code inside initAnimation() calls 2 major functions: animate(), and shiftPoint().

Let see what animate() function is doing first. It loop all the points and set transparent value in active attribute. The more further to the mouse position, the higher transparent of the point.

After the transparent is set,  points is drawn using function Circle.draw(). Each point will draw line connecting to its 5 nearest point using function drawLines().

After all of points and lines are drawn, you will see that in animate() function will call requestAnimationFrame(animate) which tells the browser to repeat calling function animate() again asynchronously.

However, the code requestAnimationFrame(animate) is place at the bottom of the function without any condition checking. This means that animate() will be called forever. So, webpage always loop playing animation until you close.

Another function in initAnimate()  is shiftPoint() which will randomly shift the point. You will see that this function will loop forever too.

Last thing is mouse move event handler which will update the mouse location.

Happy Coding!