Particle Network Animations in JS
I just did a minor revamp of the TEC Club homepage in order to include a live, JS generated network of floating dots. Opaque interconnections will pop to life when the dots travel within 100 pixels of each other. On mouse over, the connections will fade away and the dots will grow increase in opacity. It can be quite entertaining to watch. I enjoy playing this version in full screen and just watching it.
I was inspired by the new Mavenlink brand refresh, the dashboard of which I have placed an image of here:
I was inspired by the logo in particular:
This reminded me of the networked-dot charts that I seen before (most recently in Good Will Hunting as the second problem that Will Hunting solved). Simple canvas particle animations are relatively simple, so I decided to spend a little bit of time whipping something together.
The codepen demo that follows is substantially more performant than v1, after spending an optimization period on it I was able to reduce frame draw time by roughly 60%. This was mostly in part to switching from using MDN: array.some() and instead using MDN: for loops. It’s too bad that the convenient syntax provided by basic MDN: array methods.
See the Pen XJExGv by Alex Wendland (@awendland) on CodePen.
This evolved into an interactive version and eventually the version that can be found on the TEC Club homepage. Here’s a screenshot of the current state of the TEC Club homepage to demonstrate a still version of the effect.
You can delve into the CodePens in order to see the JS, CSS and HTML workings of the effect. I currently (2015-02-20) have three projects related to it:
- Initial Mavenlink creation http://codepen.io/awendland/pen/XJExGv
- Performance testing version http://codepen.io/awendland/pen/wBmLxN
- Draft 1 TEC Club animation http://codepen.io/awendland/pen/wBmLRO
The current production code for the animation on the TEC Club website can be found at