Stippling

100%

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

This stippling example uses a capacity-constrained point distribution algorithm to render a portrait of President Obama from a grayscale source image. The canvas displays 2000 colored sites, each with 15 assigned points, which iteratively swap points and recenter to achieve a uniform, dense stipple pattern. The animation runs in a loop, redrawing the points and site locations every frame. The code uses Canvas `getImageData` to read pixel density, then applies a custom algorithm with flat typed arrays (`Float32Array`, `Uint32Array`) to optimize performance in the browser.

AI-generated description

Stress testing the stippling application of this capacity-constrained distribution method. By storing everything in a few flat typed arrays, a group of 2000 sites seems possible (though still quite slow) in browser.

See also: Philippe Rivière's neighbors-of-neighbors variation on the algorithm

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/04dc09a2fd164da21f34c5301538cb0e'>Stippling</a>

Similar vizzes

Loading thumbnail…

CCPD Snowden

This example uses a Capacity Constrained Point Distribution to render a portrait of Edward Snowden from a photograph. The code loads the image via a Canvas `getImageData` call, samples pixels to generate a set of points, and then iteratively swaps points between neighboring Voronoi cells—computed with `d3.voronoi`—to evenly distribute them according to local image density. The resulting animation shows the points and Voronoi polygons updating in SVG as the distribution converges, with the final arrangement forming the recognizable portrait. The algorithm is a faster variant of the original capacity-constrained approach, using only local neighborhood swaps.

PPhilippe Rivière

67% match

Loading thumbnail…

Canvas Scatterplot

This example renders 20,000 randomly generated points as a Canvas scatterplot, with x, y, and radius values sampled from normal distributions. It demonstrates a color-picking technique for interaction: a hidden canvas draws each point in a unique RGB color, and the visible canvas draws them in steelblue. On mousemove, the code calls Canvas `getImageData` on the hidden canvas to identify the point under the cursor, then displays a tooltip with its coordinates and radius. It uses d3.scaleLinear for axes and d3.timer for a brief animation loop.

JJverma

64% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

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

64% match

Loading thumbnail…

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Mmbostock

64% match

Loading thumbnail…

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

64% match

Loading thumbnail…

Drawing A Face

This example creates a stylized human face using only points plotted on a two-dimensional canvas. Each point represents a sample from a mathematical function, and the points are arranged to form facial features like eyes, a nose, and a mouth. The visualization uses the HTML5 Canvas API to draw and update positions, while a simple animation loop moves the points to create a subtle, consistent motion. The code is minimal, relying on native browser capabilities without external libraries or data files.

DD1AndOnly1

64% match

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Mmbostock

63% match