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.
