Popcircles: A Dynamic Pop-Art Canvas Background Experiment

Originally published: August 3rd, 2023. Updated on: April 29th, 2025.

Since the motif of my website is a simple circle, I thought it would be interesting to try and expand upon that idea. So, I decided to create a fluid, dynamic background based on the theme of pop-art using JavaScript and the HTML Canvas.

(Demo placeholder: Embed or link to the CodePen demo: https://codepen.io/solarisedesign/pen/EjXqaz)

Browser and System Compatibility

Please note: This demo might run sluggishly on some older browsers or less powerful hardware configurations due to the number of elements being animated.

Technical Notes

The code includes a variable to adjust the radius of each circle. This isn't currently configurable via the control panel in the demo, as changing it requires re-initialising the internal circle matrix – not a hugely complex operation, but one I haven't implemented controls for yet.

However, you can experiment by adjusting the code directly to change the value of the default maxRadius setting (or similar variable name in the source).

If you set the radius to something low (e.g., 3-10 pixels), you'll likely see a performance hit. This seems purely down to the sheer number of circles required to fill the screen per frame. When you add movement and colour shifts on top of that, the demand for constant, smooth animation places some restrictions on what's feasible, especially with older 2D canvas rendering techniques.

I did attempt to build a solution using WebGL rendering techniques at the time, but I found the visual result less satisfactory than rendering the same scene in 2D for this particular pop-art style. Sometimes simpler is better, you know.

Further Development Notes

I believe significant performance gains are still possible, though. Some ideas include:

• Interpolation: Smoothly interpolating movement between frames instead of recalculating every position, every time.
• Approximation: Approximating positioning, movement, or colour changes to reduce the computational load per frame.
• Optimized Rendering: The current code likely redraws all circles on every frame, which is relatively taxing. Exploring more efficient rendering techniques (like drawing only changed circles or using techniques like layering canvases) could help. Modern approaches might also involve libraries like PixiJS or Two.js for potentially better performance.

Ultimately, it's an experiment in visual generation using basic web tech.