What is it?

Poisson Disc sampling is a method of evenly distributing randomly positioned points. The demo shows randomly positioned dots forming clumps and leaving empty space. This is indeed random distribution but sometimes it is useful to impose some uniformity in the point positioning. The solution by the algorithm is still based on a random selection but is constrained by rules restricting the proximity to the points neighbours.

Although this is a simplified 2D visual example the algorithm works in 3D, 4D and even 5D and beyond, along with abstracted objects such as test data or training selections.

How did I make it?

I started by reading Fast Poisson Disc Sampling in Arbitrary Dimensions By Robert Bridson ~ University of British Columbia which gives a detailed explanation of the principles used.

Once I had an understanding of the algorithm I proceeded to proto-type it in simple OO style Javascript. As with most of these algorithms they aren't very impressive on their own, they take an input, produce a large amount of output data.

The next step was to build a visual interpretation of the algorithm and the results it produced. This helps greatly to debug the code and demonstrate its use and behaviour. I kept to Javascript for this using a canvas object to draw on.

Later on I added Tailwind CSS and rebuilt the demo for use on this web site.

What I used

• Code editor - VSCode
• Language - Javascript / HTML / CSS / Tailwind CSS
• Knowledge - Maths

Interesting findings

• Poisson disc is also a sub set of the Super Sampling algorithms use a lot in games for anti-aliasing graphics.

Further reading

• The demo web site has some more information to read.
• Fast Poisson Disc Sampling in Arbitrary Dimensions By Robert Bridson ~ University of British Columbia
• Super Sampling
• Github Source Code