Connected Particles

100%

Connected Particles

✓ Published0🌍 Public

Last edited Oct 7, 2018

Created on Jun 9, 2015

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

AI-generated description

A test of the d3-timer module.

gpl-3.0 Licensed

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

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

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

75% match

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Mmbostock

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

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

72% match

Loading thumbnail…

Voronoi Topology

One hundred particles drift and bounce across a canvas, their movements guided by random acceleration and velocity decay. A Voronoi diagram of their positions is computed, then converted into a TopoJSON topology using d3-voronoi and custom logic, allowing adjacent cells to be merged or meshed via topojson.merge and topojson.mesh. The canvas animation renders the resulting cell boundaries in gray and highlights alternating merged cells as semi-transparent red polygons, with particle positions drawn as red or black dots.

Mmbostock

72% match