This is a project based on p5.js and inspired by Daniel Shiffman's Coding Challenge on Circle Packing dealing with circle packing based on image edge detection with the help of the Sobel operator.

🤖 Demo 🎨

The sketch has been bootstrapped with the generator-p5-webpack for Yeoman.

• How it works
• Parameters
• Running the project locally
• License

The basic idea is to spawn bubbles randomly on a canvas and let them grow until they hit another bubble so they never overlap each other.

In this specific project an arbitrary image is loaded into the p5 environment and then analyzed by the sobel package on npm. The Sobel operator is then used to detect edges in the image. It results in a grayscale image emphasizing edges.

Each pixels value is then interpreted as a probability for a bubble to spwan at this specific pixel. When there is no change (edge) in the image at a specific pixel, it is very unlikely for a bubble to spawn there whereas it is very likely that a bubble will spawn at a pixel that lies on an edge in the image.

Each bubble has the exact same color of the pixel it originated at in the original image.

During initialization 1.000 bubbles are generated and 10 more are added in each animation frame. When there is not so much space left and the algorithm did not find a matching origin in 10.000 tries, the try to spawn a bubble is discarded. Therefore, the number of new bubbles spawned per frame is in effect lower that 10.

When clicking in a free spot, a new bubble is spawned regardless of the probability that pixel was assigned.

To run the project locally you have to perform the following steps:

1. Clone the repository
2. npm install
3. npm start

GPL-3.0 © Jannik Portz