Colorcomb

Colorcomb II

A Voronoi diagram of hundreds of colored cells animates on a black canvas, with each cell’s color shifting over time toward a shared palette. The visualization is rendered using the `d3-voronoi` library, which computes the tessellation, while a Canvas drawing loop continuously updates the cell fills. The animation derives from per-cell color interpolation, creating a slowly morphing mosaic of polygons. The code is a single self-contained HTML file using JavaScript and the Canvas API, with no external data source beyond the procedurally generated initial cell positions and colors.

87% match

Voroblobinoids

A field of one hundred particle points performs a random walk with velocity damping and elastic collisions against the canvas edges. Each frame, the D3 Voronoi tessellation of these points is computed using `d3_voronoi.voronoi`, and the resulting convex cells are drawn with rounded corners via a custom `drawRoundedPolygon` function. Canvas rendering strokes the cell boundaries in white and light gray, while the particles themselves appear as small black dots. The animation loop uses `d3_timer.timer` to drive the real-time updates.

77% match

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

75% match

Voronoi Topology

One hundred particles drift and bounce across a canvas, their movements guided by random acceleration and velocity decay. A Voronoi diagram of their positions is computed, then converted into a TopoJSON topology using d3-voronoi and custom logic, allowing adjacent cells to be merged or meshed via topojson.merge and topojson.mesh. The canvas animation renders the resulting cell boundaries in gray and highlights alternating merged cells as semi-transparent red polygons, with particle positions drawn as red or black dots.

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.

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.

Blobbing Particles IV

Three layers of colored particles—green, blue, and red—drift smoothly across the canvas, merging into blobby clusters within each layer while remaining visually distinct across layers. Each particle is a radial-gradient circle clipped to a distance-limited Voronoi cell, so nearby particles appear to fuse together. The animation uses d3.distanceLimitedVoronoi to compute cell boundaries, SimplexNoise to drive continuous movement, and D3 transitions to update positions and opacity in real time, creating a fluid, organic swarm effect.

KKcnarf

Voronoi Spirals II

A Voronoi diagram partitions a canvas into cells around randomly placed sites; this animation continuously warps those cells by rotating each polygon's vertices, creating a swirling, spiraling effect. The fill color shifts through a smooth spectrum as the animation progresses over five seconds. The code uses d3.voronoi to compute the polygons, d3.timer for the animation loop, and d3.scaleCubehelix to interpolate the cell colors. Each frame, the first vertex of a cell is moved toward the next, shortening the polygon's edge before pushing a new point into the array. The rendering is done via the Canvas 2D API.