Poisson-Disc II

100%

Poisson-Disc II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 7, 2014

This animation illustrates the Poisson-disc sampling algorithm, which generates a set of points with a minimum spacing. Red dots are active samples; one is selected randomly, and up to *k* candidate points (open black circles) are generated in an annulus around it. Candidates are rejected if too close to any existing sample, shown by a gray exclusion zone and black lines to the offending neighbor. Inactive samples turn black, and the process ends when none remain active. The code uses d3.svg.arc for the annulus and CSS transitions for animation.

AI-generated description

This animation demonstrates how Bridson’s poisson-disc sampling algorithm works.

Red dots represent “active” samples. At each iteration, one is selected randomly from the set of all active samples. Then, up to k candidate samples (shown as hollow black dots), are randomly generated within an annulus surrounding the selected sample.

The annulus extends from radius r to 2r, where r is the minimum allowable distance between any two samples. Candidate samples within radius r from an existing sample are rejected; this “exclusion zone” is shown in gray, along with a black line connecting the rejected candidates with the existing sample that is too close. If the candidate is acceptable, it is added as a new active sample.

A background grid of size r/√2 is used to accelerate the distance check for each candidate. Because each cell can only contain at most one sample, only a fixed number of neighboring cells need to be inspected.

If none of the k candidates are acceptable, the selected active sample is marked as inactive and will no longer be used to generate candidates. Inactive samples are shown in black.

When no samples remain active, the algorithm ends.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Poisson-Disc

Poisson-Disc uses d3.timer to progressively render a two-dimensional Poisson-disc sampling of 960 by 500 pixels. The animation reveals the algorithm’s output by appending SVG circles that transition their radius from zero to two pixels. The code implements Bridson’s algorithm, based on Jason Davies’ version, which generates evenly distributed random samples without clustering. Each new point is rejected if it falls within a minimum distance (radius 10) of existing points, producing a blue-noise pattern across the canvas.

Mmbostock

87% match

Loading thumbnail…

Poisson-Disc

The visualization shows a square canvas being progressively filled with small circles using Poisson-disc sampling, a method for generating evenly distributed random points. The algorithm, based on Bridson’s technique, ensures each new point is at least a specified distance from existing ones, creating a uniform, pseudo-random pattern. Built with d3.v3, the animation adds circles one at a time via `d3.timer`, with each circle’s radius animated using `transition()`. The code explicitly implements the sampling logic, including a grid-based spatial index for efficient distance checks, and renders the result as SVG circles.

JJaapSuter

85% match

Loading thumbnail…

Poisson-Disc V

This animation visualizes Bridson’s Poisson-disc sampling algorithm by showing the branching process as new samples are added. Each time a sample is placed, a line animates outward from the neighboring sample that spawned it, revealing the algorithm’s growth tree. The code uses d3.v3 to append SVG line elements and applies staggered transitions with a delay based on each sample’s depth, making the generation order visible. The sampling itself follows Jason Davies’s implementation, generating random points with a minimum radius while rejecting candidates that are too close or outside the canvas.

Mmbostock

82% match

Loading thumbnail…

Poisson-Disc IV

This example generates a set of points using a Poisson-disc sampling algorithm and renders them as a clipped Voronoi diagram. The SVG paths are filled with a color mapped from each polygon’s area using a cubehelix color scale, creating a smooth gradient across the canvas. The code uses d3.geom.voronoi for the diagram, d3.scale.cubehelix for coloring, and d3.svg for rendering. The Poisson-disc sampler is based on Jason Davies’ implementation, with a fixed radius of 5.68 pixels.

Mmbostock

81% match

Loading thumbnail…

Poisson-Disc III

This visualization uses Poisson-disc sampling to place 10,000 points across Van Gogh’s *The Starry Night*, then renders each point as a Voronoi cell colored by the underlying image pixel. The code loads the painting into a Canvas, reads its pixel data via `getImageData`, and fills each cell with the sampled color. It relies on `d3.geom.voronoi` for the cell geometry and a custom `poissonDiscSampler` function to ensure even spacing between points. The output is a stippled, mosaic-like reinterpretation of the artwork, contrasting with uniform random sampling.

Mmbostock

74% match

Loading thumbnail…

Annulus Sampling I

This animation shows the perils of naïve annulus sampling, where points cluster near the inner edge because the radius and angle are chosen uniformly at random. The result is a biased density that does not fill the annular region evenly. The code uses a Canvas context with `d3.select`, `d3.timer`, and explicit `context.arc` and `context.fill` calls to draw the samples over time, adding 50 points per frame until 1,000 total are placed. The static background ring uses an evenodd fill rule to show the sampling region.

Mmbostock

70% match

Loading thumbnail…

Annulus Sampling II

A static annulus is drawn on a Canvas, with points appearing over time to demonstrate uniform random sampling within the ring. The code uses the D3.js timer to animate the process, plotting 50 new points per frame. Each point’s radius is derived from the square root of a uniform random value scaled between the squared inner and outer radii, ensuring spatial uniformity. The implementation relies on Canvas API calls like `arc()` and `fill()`, with the sampling logic computed via JavaScript’s `Math.random()` and trigonometric functions.

Mmbostock

68% match

Loading thumbnail…

Color Mesh II

This example displays a colorful abstract image made of triangular cells formed by a Delaunay triangulation of a Poisson-disc sample of points. The visualization is rendered as SVG paths in a browser using the D3 v3 library, specifically calling `d3.geom.voronoi` to compute the triangulation. Each triangle is filled and stroked with a color determined by the `d3.lab` color space, which maps the centroid’s distance from the center to a luminance and hue gradient, creating smooth color transitions across the canvas. The underlying point distribution is generated via a custom Poisson-disc sampler, ensuring evenly spaced vertices.

Mmbostock

66% match