Simplex Wave + Explanations

100%

Simplex Wave + Explanations

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Aug 12, 2016

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.

AI-generated description

This block experiments SimplexNoise (see also 3, 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.

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

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

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

69% match

Loading thumbnail…

Voronoï playground : undulating radial wave

This example shows a Voronoï tessellation morphing around an undulating radial wave. A white circular path continuously deforms, driven by simplex noise, while semi-transparent Voronoï cells fill the surrounding space and shift with the wave’s movement. The cell borders reveal smooth, emergent patterns from the tessellation. The code uses D3 v4’s `d3.voronoi` layout, `d3.interval` for animation, `d3.scaleLinear` for opacity, and the simplex-noise.js library to generate the wave’s noisy radius. A saturate filter highlights the area near the wave path.

KKcnarf

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

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

65% match

Loading thumbnail…

Circle Wave

Three concentric, overlapping circles in cyan, magenta, and yellow continuously deform into a shifting wave pattern on a dark background. A slider labeled “Frequency” adjusts the speed of the oscillation, while the shapes are drawn as closed radial-line paths that update every frame. The code uses D3 v4’s `d3.radialLine`, `d3.curveLinearClosed`, and `d3.timer`, with the stroke colors blended via CSS `mix-blend-mode: darken`. The radius of each point is computed from a cosine function and a time-based term, creating the rhythmic, breathing motion.

AAlainRo

65% match

Loading thumbnail…

Messing around with Sine Wave Circles

Four overlapping sine and cosine waves are rendered as horizontal rows of blue, crimson, turquoise, and orange circles. Each wave uses a separate D3 group and a `d3.timer` to animate the vertical positions of 50 circles per row in real time. The animation is driven by `Math.sin` and `Math.cos` functions with a shared time parameter, creating contrasting phase-shifted motion across the four color-coded sets. Circles are positioned using D3’s data join and `attr` updates, with an SVG canvas sized 960 by 500 pixels.

SSebastian Barrett

65% match