Simplex Worms + Explanations

100%

Simplex Worms + Explanations

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Aug 2, 2016

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.

AI-generated description

This block experiments SimplexNoise.

Work initiated by this block from elenstar, Drawing Vector Field, and the outstanding Neonflames.

Cherry on the cake: this is my first block with canvas. Yeaheahhhhhhh

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v.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…

Simplex Wave + Explanations

A step-by-step tutorial demonstrates how to create a continuous radial noise using SimplexNoise. Four stacked canvases explain the process: first, two SimplexNoise functions generate values based on angles sampled every 4°, with the second shifted by π. These underlying noises are then applied radially, highlighting discontinuities with red segments, and weighted with a cosine-based function to eliminate breaks. The final canvas shows the resulting balanced radial wave, illustrating the summation of the continuous-but-unbalanced noises. The code uses D3 v4 for layout and intervals, canvases for rendering, and the simplex-noise.js library.

KKcnarf

79% match

Loading thumbnail…

Simplex Radiations

Animated radial lines bloom outward from a moving center point on a canvas, each shape growing continuously via SimplexNoise. The visualization uses simplex-noise.js to generate smooth, evolving vertex positions in polar coordinates, addressing the challenge of creating seamless noise around the 0 and 2π boundary by blending two noise functions. Rendered with the Canvas 2D API and d3.interval for animation, the radiations follow the mouse cursor while damping their movement, showing how polar-coordinate noise can produce organic, ever-changing geometric forms.

KKcnarf

77% match

Loading thumbnail…

Simplex Flurry

Twelve tentacle-like paths radiate from a central point, moving and curling across a canvas with a smooth, fluid motion. The visualization uses a canvas element and the simplex-noise.js library to generate organic, evolving paths. Each tentacle is influenced by the mouse position, which acts as an attractor. The code uses D3.js v4 for interval updates and mouse event handling, while the paths are drawn with semi-transparent strokes that create a fading trail effect. The key technique involves using a tentacle's rank as a third parameter in the noise function to ensure each path diverges from the shared origin.

KKcnarf

77% match

Loading thumbnail…

Blobbing Worms

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.

KKcnarf

73% match

Loading thumbnail…

simplex landscape

A dynamic SVG landscape morphs continuously, generated by simplex noise and rendered as an animated terrain of grey land and light blue water. The visualization uses the `simplex-noise.js` library to compute two noise layers—a main landscape and additional details—whose amplitudes and densities are adjustable via a dat.GUI control panel. D3.js (v3.5.5) draws the paths, while a timer updates the horizon each frame, and an optional water level can be displayed or used to filter the terrain.

KKcnarf

69% match

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

68% match

Loading thumbnail…

SynWurm

SynWurm generates an animated, colorful visual composition using D3.js. It displays a dynamic set of interconnected circles, lines, and rectangles that move and change size over time. The animation is driven by a timer that updates a continuously changing dataset. The SVG rendering uses `selectAll` and `join` to efficiently update the positions, sizes, and colors of these geometric elements, creating a fluid, evolving pattern. The code generates new data points using a sinusoidal function and D3's `range` utility, with color assigned via a random color generator.

Aadventuresenglish.info@gmail.com

67% match

Loading thumbnail…

#10print

A circular grid of slash marks continuously regenerates inside a black, round SVG canvas, its patterns and opacity driven by 3D Simplex noise. Each cell's rotation flips between slash and backslash, while opacity varies with the noise value, producing an organic, flickering maze. The animation runs via `d3.interval`, updating per-cell values and applying transitions with `attrTween`-like direct attributes. It uses D3 v4, the `simplex-noise.js` library, and draws SVG paths for the line characters.

KKcnarf

67% match