Connected Particles

100%

Connected Particles

✓ Published0🌍 Public

Last edited Oct 29, 2015

Created on Oct 29, 2015

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.

AI-generated description

A modification of Mike Bostock's Connected Particles. An exercise to become familiar with the canvas. Varied the circle size to give some element of depth, and turned the lines into curves.

Similar vizzes

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

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

85% match

Loading thumbnail…

Connected Particles III

This example renders 200 particles as small circles on an HTML5 Canvas, with each particle moving via a random walk that includes velocity damping. Lines connect pairs of particles whenever their distance is less than 60 pixels, with line opacity varying based on proximity, turning fully opaque below 40 pixels. The simulation uses a custom timer based on `requestAnimationFrame`, and the drawing relies on Canvas methods like `beginPath`, `arc`, `moveTo`, and `lineTo`. Both particle positions and connection lines are updated each frame, creating a dynamic web of interactions.

Mmbostock

81% match

Loading thumbnail…

Untitled

This example visualizes a dynamic, two-dimensional particle system where thousands of glowing points drift and collide within a bounded rectangular field. It shows the emergent patterns of clustering and dispersion as forces of attraction and repulsion act on the particles over time. The code uses `d3.forceSimulation` with custom force functions to manage particle velocities and positions, rendering each frame to an HTML5 Canvas. Particle trails are created by semi-transparent redraws, and the interaction of the forces produces a fluid, organic motion across the display.

Ssnowswirlin

74% match

Loading thumbnail…

Untitled

This visualization shows a simulated swarm of glowing particles that respond to mouse movement, creating a dynamic, organic flow across the screen. The particles are governed by a physics system using `d3.forceSimulation` with forces for centering, collision, and velocity, while each particle’s position and trail are drawn on an HTML5 `<canvas>` via `requestAnimationFrame`. The code uses `d3.scaleLinear` to map distance and speed to color and opacity, and the mouse interaction adjusts the simulation’s force strengths in real time. The rendering relies entirely on canvas 2D context methods like `arc` and `fillRect`, with a dark background from `styles.css`.

Eemanuelemurgolo

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

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

72% match

Loading thumbnail…

Voroblobinoids

A field of one hundred particle points performs a random walk with velocity damping and elastic collisions against the canvas edges. Each frame, the D3 Voronoi tessellation of these points is computed using `d3_voronoi.voronoi`, and the resulting convex cells are drawn with rounded corners via a custom `drawRoundedPolygon` function. Canvas rendering strokes the cell boundaries in white and light gray, while the particles themselves appear as small black dots. The animation loop uses `d3_timer.timer` to drive the real-time updates.

Mmbostock

72% match