"PopCircles" - Creating pop-art with Javascript

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

See the Pen Popcircles by Robin Metcalfe (@solarisedesign) on CodePen.

Browser and system compatibility

This demo may currently run sluggishly on some browsers and hardware configurations.

Technical notes

The code contains a variable to adjust the radius of each circle. This isn’t currently configurable via the control panel, as it requires re-initialising the circle matrix internally - not a particularly complex operation, but this hasn’t yet been implemented.

However, you can experiment by adjusting the code to change the value of the default maxRadius setting.

If set to something low (e.g. 3-10) then you’ll potentially see a performance hit.

This appears to be purely down to the very large number of circles required per frame, especially when you add in movement and colour-shifts, the need for a constant and smooth animation places some restrictions on what’s possible.

I attempted to build a solution implementing webgl rendering techniques, but I found the visual result to be less satisfactory than when rendering the same scene in 2D

Further development notes

I believe there are some significant performance gains still to be made though. Some of these will involve interpolation of movement, and approximations of positioning/movement/colour in order to reduce the number of redraws carried out by the rendering engine. At the moment, the code redraws the circles on every frame, which is extremely taxing on the hardware, relatively speaking. I suspect there’s a more efficient way of rendering the circles too.