Simplex Radiations

100%

Simplex Radiations

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Aug 11, 2016

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.

AI-generated description

This block experiments SimplexNoise (see also 2, 1). More particularly, how to produce a continous radial noise.

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

In this block, I use SimplexNoise to produce each radiation's shape and growth. The shape is composed of lines joining several verteces. Verteces evolve thanks to values produced with SimplexNoise. The challenge was to compute a continuous noise between the first few verteces (from 0 rad) and the last few verteces (before 2*PI). The technique I use is:

define 2 noise functions; 1 discontinued around 0 rad, and 1 discontinued around PI
mix the 2 noises so that:
around 0 rad, only the second noise is used (discontinuity of the first noise is eliminated)
around PI, only the first noise is used (discontinuity of the second noise is eliminated)
for other angles, use a smooth mix of the 2 noises (I use a cos-based function)

The Simplex Wave + Explanations block explains this technique in a more appealing way (with drawings ;-).

This block is also the first one that allows me to use SimplexNoise with polar coordinates (instead of cartesian coordinates). Noise depends on r and θ (intead of the more classical x and y).

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

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

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…

#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

72% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

72% match

Loading thumbnail…

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

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

70% match

Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9

70% match