Uniform Random II

100%

Uniform Random II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 6, 2014

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.

AI-generated description

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

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

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

80% match

Loading thumbnail…

Uniform Random III

This example generates 10,000 random points within a fixed width and height, then computes their Voronoi diagram using `d3.geom.voronoi` with a clip extent matching the SVG canvas. Each Voronoi cell is rendered as an SVG path, filled with a color from a cubehelix scale (`d3.scale.cubehelix`) that maps the cell’s polygon area to a hue range. The coloring transitions smoothly from bright green to deep purple as area increases, creating a visually textured mosaic. The code uses D3 v3, the custom cubehelix interpolation library, and random uniform sampling.

Mmbostock

80% match

Loading thumbnail…

Uniform Random

A grid of 3,000 circles appears one by one at random positions across a 960×500 SVG canvas. Each circle starts with a radius of zero and animates outward to a radius of two pixels via D3's `transition.attr`. The animation uses `d3.timer` to append ten new circles per frame, driven by a custom `uniformRandomSampler` function that returns `[Math.random() * width, Math.random() * height]` coordinates. This demonstrates a simple, lightweight approach to generating and animating random scatter points with D3 v3.

Mmbostock

71% match

Loading thumbnail…

Painting Manhattan-distance Voronoi

This example paints a canvas pixel-by-pixel to show the Manhattan-distance Voronoi diagram of 400 random points. Each pixel receives the color of its nearest site, revealing diamond-shaped cell boundaries. The rendering iterates over every pixel sequentially using a `d3.interval`, computing the Manhattan distance via a custom function and selecting the closest site with `d3.scan`. The sites are drawn as white crosses on top of the colored cells, and the animation pauses after 30 seconds or when all pixels are processed.

PPhilippe Rivière

69% match

Loading thumbnail…

Voronoi Tesselation

This example visualizes a Voronoi tessellation of 100 random points within an SVG canvas, with each cell filled by a random HSL color and vertices marked as small circles. Moving the mouse repositions the first vertex, dynamically recomputing the tessellation and updating only the paths whose geometry changed. The code uses the D3 library’s `voronoi` function from the `jit/voronoi.min.js` module, along with SVG path elements and `d3.svg.mouse` for mouse coordinates. The rendering is immediate, without animations or transitions.

Mmbostock

69% match

Loading thumbnail…

Painting Euclidian Voronoi

This example paints a Euclidean Voronoi diagram pixel by pixel onto a canvas, with each pixel colored according to its nearest site among 400 randomly placed points. A white overlay of the true Voronoi cell boundaries, computed with `d3.voronoi().polygons()`, is drawn after the painting finishes. The rendering uses an `O(n*x*y)` brute-force scan, computing squared Euclidean distances with `d3.scan()` and filling one vertical strip per pixel column. Site markers are drawn with colored strokes using Canvas 2D methods.

PPhilippe Rivière

68% match

Loading thumbnail…

Voronoi Spirals III

Voronoi Spirals III generates a dynamic, color-cycling animation from 100 random seed points. The code computes Voronoi cells using d3.voronoi, then iteratively shifts each cell's vertices to create expanding spiral-like polygons over 256 red-hued frames. The final composition is captured via Canvas getImageData, and a d3.timer loop maps each frame's red intensity through a d3.scaleRainbow palette using an elapsed-time offset, producing a continuously shifting rainbow animation. The result showcases a morphing Voronoi tessellation whose colors cycle through the spectrum.

Mmbostock

67% match