Skip to main content
SimilarExport ZIP
100%

Particle tentacles

✓ Published0🌍 Public
TThanaporn-sk
Last edited May 15, 2017
Created on May 15, 2017

Twelve hundred rainbow-colored particles chase one another in a looping chain across a canvas, leaving fading trails of motion as they bounce off the walls. The animation renders each frame with the Canvas 2D API, using an offscreen canvas and `drawImage` to create the persistent trail effect. Each particle steers toward the next using a custom `Vec2` class implementing steering behaviors, while `d3.timer` drives the animation loop and `d3.interpolateRainbow` assigns colors.

AI-generated description

This got a little weird.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/ffce0162d5f55eafb9866a1b588831e8'>Particle tentacles</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Particle tentacles

Twelve hundred rainbow-colored particles chase one another in a looping chain across a canvas, leaving fading trails of motion as they bounce off the walls. The animation renders each frame with the Canvas 2D API, using an offscreen canvas and `drawImage` to create the persistent trail effect. Each particle steers toward the next using a custom `Vec2` class implementing steering behaviors, while `d3.timer` drives the animation loop and `d3.interpolateRainbow` assigns colors.

TThanaporn-sk
100% match
Loading thumbnail…

Connected Particles

This example shows 100 blue particles drifting vertically across a canvas, with lines connecting any pair whose distance falls below a threshold; the lines fade out as particles approach a maximum separation, creating a dynamic web that shifts as particles move. Using the d3-timer module for animation, the code updates particle positions on each tick, draws connections with varying opacity based on squared distances, and renders the particles as circles via the Canvas 2D API. The underlying data is procedurally generated random coordinates, with particles wrapping around the top and bottom edges.

AAjayyy
78% match
Loading thumbnail…

Connected Particles II

A field of 100 small particles drifts vertically on a dark canvas, with translucent gray circles drawn between any pair that comes within 100 pixels of each other. As particles move, their connecting arcs fade in and out based on proximity, creating a shifting network of temporary links. The animation runs via a custom d3-timer loop, using Canvas arc and fill operations per frame. Each particle’s horizontal position is fixed, while vertical velocity varies randomly, causing them to wrap around the edges.

Mmbostock
78% match
Loading thumbnail…

Connected Particles

One hundred particles drift vertically at constant speeds across a canvas, with lines connecting nearby particles whose opacity fades as distance increases. The visualization uses d3-timer’s timer for animation and the Canvas 2D API for drawing arcs and strokes. Each particle’s horizontal position resets randomly when it exits vertically, while line visibility depends on squared distance thresholds. The code relies on `d3.timer` and direct canvas context methods like `clearRect`, `arc`, and `lineTo`.

Mmbostock
78% match
Loading thumbnail…

Particle collision

A swarm of 1,500 glowing particles falls and collides within shifting circular walls and a planet-like boundary, leaving colorful motion trails on a black canvas. The simulation uses `d3.forceSimulation` with custom collision, gravity, and wall-locking forces, rendered via Canvas 2D. Two particle groups cycle through D3 color interpolators (e.g., `d3.interpolateViridis`, `d3.interpolateMagma`), and randomized settings for radius, gravity, and palette timing make each reload unique.

FFrissAnalytics
76% match
Loading thumbnail…

Connected Particles

A field of one thousand particles drifts vertically on a dark canvas, with each particle’s size varying according to its speed to suggest depth. Thin curved lines connect nearby particles, with opacity fading as the distance between pairs grows beyond a minimum threshold. This animated piece uses D3.js for its timer and the Canvas API for all drawing, implementing a custom algorithm that updates vertical positions and wraps particles around the screen edges.

BBrideau
75% match
Loading thumbnail…

Fork of React & D3 Starter

This interactive particle constellation visualizes 100+ colored particles that move with physics-based velocity, bounce off screen edges, and connect to nearby particles with fading lines. Particles are attracted to the mouse cursor, growing larger when approached. Built with React 19 and D3.js v7, the example uses d3.interpolateRainbow for gradient colors and requestAnimationFrame for smooth 60fps animation. Live sliders adjust particle count and connection distance, while a "Regenerate" button randomizes positions and colors through React state management.

NNita
74% match
Loading thumbnail…

Colorcomb

Four hundred particles drift and bounce across a full-screen canvas, their paths perturbed by random forces and velocity damping. A Voronoi tessellation of their positions is drawn twice: first as a thick black stroke for contrast, then each cell is stroked with a color derived from its centroid’s screen coordinates, converted through `d3.lab` and `d3.hcl` with a hue that rotates over time. The animation uses `d3-timer`, `d3-voronoi`, and Canvas 2D rendering.

Mmbostock
74% match