Poisson-Disc III

100%

Poisson-Disc III

✓ Published0🌍 Public

Last edited Nov 17, 2016

Created on Nov 17, 2016

The visualization renders Van Gogh’s *The Starry Night* as a mosaic of Voronoi cells, with each cell’s fill color sampled from the corresponding pixel of the source image. It uses a Poisson-disc sampling algorithm to place 10,000 points evenly across the canvas, then applies `d3.geom.voronoi` with a clip extent to construct the cells. The image is loaded via an `Image` object and drawn to a 960×500 canvas, where `getImageData` extracts the color for each sample. The code relies on D3 v3 and Canvas 2D API.

AI-generated description

10,000 poisson-disc samples of Van Gogh’s The Starry Night. Compare to uniform random samples.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/22fd67be72552774736d'>Poisson-Disc III</a>

gpl-3.0 Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Uniform Random II

This example uses 10,000 uniform random samples to reconstruct Van Gogh’s *The Starry Night* as a Voronoi diagram. Each sample point becomes a cell, filled with the color sampled from the original image at that location. The code employs `d3.geom.voronoi` to compute the cells, the Canvas 2D API’s `getImageData` to extract pixel colors, and `d3.rgb` to format fill styles. The source image is drawn to canvas before sampling, and the result offers a stochastic, mosaic-like reinterpretation of the painting.

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

78% match

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

77% 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

76% match

Loading thumbnail…

Mitchell’s Best-Candidate IV

This example reconstructs a low-fidelity version of Van Gogh’s *The Starry Night* on a Canvas element. The page loads the original image, samples 10,000 points using a best-candidate algorithm that maximizes spacing between random points, and then draws a Voronoi diagram where each cell is filled with the color of the source pixel nearest the cell’s seed. The implementation uses d3.v3’s `d3.geom.quadtree` for fast nearest-neighbor searches during sampling and `d3.geom.voronoi` to compute the clipped cells. Colors are read directly from the loaded image via Canvas `getImageData` and applied with `fillStyle`. The result is a stylized, mosaic-like approximation of the painting.

Mmbostock

75% match

Loading thumbnail…

Poisson-Disc

This visualization demonstrates Poisson-disc sampling, a blue-noise distribution pattern that places icons evenly across a canvas while maintaining a minimum distance between them. Using Bridson’s algorithm, the d3.timer function adds 100 new samples per frame, each rendered as an SVG image element that animates from zero to its full size via the .transition() method. The code relies on d3.v4 for timer and transition APIs, with the poissonDiscSampler function handling spatial grid-based rejection sampling to ensure uniform coverage. The icons animate into place, illustrating the algorithm’s progressive point generation in real time.

LLuisSevillano

75% match

Loading thumbnail…

Color Mesh

A Voronoi diagram partitions a 960 by 500 canvas into cells, each filled with a color derived from its sample point's distance from the center using the CIELAB color space. The samples are generated via a Poisson-disc sampling algorithm to ensure even spacing. The visualization renders as an SVG using `d3.geom.voronoi` with clipped extents, and each cell's fill and stroke are set by the `d3.lab` color function. The code builds upon a provided `poissonDiscSampler` implementation.

Mmbostock

71% match