Tyler Hallada - Blog

I’ve been messing around with a library called PixiJS which allows you to create WebGL animations which will fall back to HTML5 canvas if WebGL is not available in the browser. I mostly like it because the API is similar to HTML5 canvas which I was already familiar with. I can’t say that I like the PixiJS API and documentation that much, though. For this project, I mostly just used a small portion of it to create WebGL (GPU accelerated) primitive shapes (lines and circles).

Play with it here: http://proximity.hallada.net

Read/clone the code here: https://github.com/thallada/proximity-structures

The idea was inspired by all those countless node network graphics that I see all the time as stock graphics on generic tech articles.

This was really fun to program. I didn’t care much about perfect code, I just kept hacking one thing onto another while watching the instantaneous feedback of the points and lines responding to my changes until I had something worth sharing.

Details

The majority of the animation you see is based on tweening. Each point has an origin and destination stored in memory. Every clock tick (orchestrated by the almighty requestAnimationFrame), the main loop calculates where each point should be in the path between its origin and destination based on how long until it completes its “cycle”. There is a global cycleDuration, defaulted to 60. Every frame increments the cycle counter by 1 until it reaches 60, at which point it folds over back to 0. Every point is assigned a number between 1 and 60. This is its start cycle. When the global cycle counter equals a point’s start cycle number, the point has reached its destination and a new target destination is randomly chosen.

Each point is also randomly assigned a color. When a point is within connectionDistance of another point in the canvas, a line is drawn between the two points, their colors are averaged, and the points’ colors become the average color weighted by the distance between the points. You can see clusters of points converging on a color in the animation.

Click interaction is implemented by modifying point target destinations within a radius around the click. Initially, a mouse hover will push points away. Clicking and holding will draw points in, progressively growing the effect radius in the process to capture more and more points.

I thought it was really neat that without integrating any physics engine whatsoever, I ended up with something that looked sort of physics based thanks to the tweening functions. Changing the tweening functions that the points use seems to change the physical properties and interactions of the points. The elastic tweening function makes the connections between the points snap like rubber bands. And, while I am not drawing any explicit polygons, just points and lines based on proximity, it sometimes looks like the points are coalescing into some three-dimensional structure.

I’ll probably make another procedural animation like this in the future since it was so fun. Next time, I’ll probably start from the get-go in ES2015 (or ES7, or ES8??) and proper data structures.