Blobbing Worms

100%

Blobbing Worms

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jul 29, 2016

Three layers of green, blue, and red worm-like particles wander across the screen, each layer merging into blobs through clipped radial-gradient circles. Closer particles appear brighter, with opacity increasing as they approach. The animation uses SimplexNoise for smooth, organic movement, while D3.js’s `distanceLimitedVoronoi` technique clips each circle to its Voronoi cell, creating the merging effect. Each layer is rendered as an SVG group, and d3.timer drives the animation loop.

AI-generated description

This block is a continuation of a previous block, and a recreation:

apply radial gradient to circle, and clip each circle with a distanceLimitedVornoy cell
use 3 layers: cells of the same layer are blobbing/merging thanks to distanceLimitedVornoy technique; cells of distinct layers are overlapping
closer particles have higher intensity
use SimplexNoise for smooth moves
3 levels for 3 distinct colors (green, blue, red)
[new wrt. previous block] bie bie particles, welcome worms

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v3.4)
<a href='http://blockbuilder.org'>blockbuilder.org</a>
<a href='https://github.com/jwagner/simplex-noise.js'>simplex-noise.js</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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

88% match

Loading thumbnail…

Blobbing Particles III

Two semi-transparent layers of particle clusters merge and separate continuously on a dark SVG canvas. Closer particles appear brighter and more pronounced, while distant ones fade to a baseline opacity. The animation uses D3 v4 for SVG rendering, simplex-noise.js for smooth wandering motion, and a distance-limited Voronoi technique to clip radial-gradient circles, creating the organic blobbing effect.

KKcnarf

86% match

Loading thumbnail…

Blobbing Particles

Two layers of colored particles drift and bounce across a toroidal plane, each layer rendered as semi-transparent cells whose shapes merge and separate. The cells are computed with the `distanceLimitedVoronoi` plugin, and each cell’s fill uses a radial gradient, causing a flickering effect as the cell’s bounding box changes size. The animation runs via `d3.timer`, with particle positions updated by random acceleration and damping, and SVG paths are redrawn each frame.

KKcnarf

83% match

Loading thumbnail…

Blobbing Particles II

Two layers of independently moving particles drift and collide on a dark field, their soft radial-gradient discs merging into blobs within each layer while layers remain distinct. The visualization uses D3.js v4 with a custom `distanceLimitedVoronoi` API to compute clipping paths for each particle, constraining its drawn circle to its Voronoi cell. Particles’ velocities are updated via a simple random walk with damping, and rendering is entirely SVG, with each circle clipped by its cell’s path and a radial gradient applied for a soft edge.

KKcnarf

83% match

Loading thumbnail…

Worm-5

A growing chain of circles undulates across a violet background, its length and radius expanding over time. The animation uses a repeating interval to update a dataset, repositioning each circle along a sine wave while shifting its fill color from green toward darker tones. Built with D3 v7, the code generates data procedurally via `dataMaker.js` and renders SVG circles with chained `.join()` calls in `vizMaker.js`, applying animated attributes for x, y, radius, and fill. Strokes remain white for contrast.

YYiorgos Bagakis

76% match

Loading thumbnail…

Rainbow Worm

A rainbow-colored worm undulates across a dark field, its sinusoidal body shifting with a peristaltic motion. The animation renders the worm as a sequence of thick path segments, each filled with a hue from the HSL color space based on its position. The code uses D3 v3 to compute and update the paths, with the `d3.timer` driving the animation. The lineJoin function calculates the stroke outlines to create a continuous, tube-like shape that varies in thickness and color as it moves.

Mmbostock

74% match

Loading thumbnail…

Rainbow Worm

A rainbow-colored, segmented worm undulates across a dark background. The animation continuously reshapes the sine wave path, with each segment’s hue mapped from its horizontal position via an HSL color scale. Built with D3.js v3, the visualization uses SVG paths and a timer-driven update loop. The code manually computes thick, joined strokes for each quad of points, with width and color varying by segment, recreating the peristaltic motion from the original Protovis example.

FFrissAnalytics

74% match

Loading thumbnail…

Simplex Worms + Explanations

This example explores Simplex noise by drawing animated worms—particles tracing their paths over time—on a canvas. Four synchronized panels dissect the process: one shows the resulting worm trails, another the particles’ movement, a third maps the noise field to directional arrows, and the last visualizes the underlying noise values with interactive controls. Using the simplex-noise.js library and D3.js v4, the visualization lets users adjust the spatial and temporal frequency of the noise field to see how it affects particle behavior and paths.

KKcnarf

73% match