Canvas Swarm

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 9, 2012

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

AI-generated description

Compare to SVG Swarm.

A response to Trevor Bedford's post, Comparing performance of Processing.js and D3.js.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Mmbostock

81% match

Loading thumbnail…

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma

76% match

Loading thumbnail…

N-Body Problem II

A swarm of 400 points orbits a central point in a dark canvas, with each point trailing a short line that encodes its instantaneous velocity as a color gradient from magenta to yellow. The simulation uses d3.forceSimulation with a d3.forceManyBody charge force and a d3.forceCenter constraint, while alphaDecay is set to zero so motion never settles. Rendering occurs on a Canvas 2D context, where each tick clears the frame and draws velocity-scaled strokes using d3.scaleLinear for color mapping.

Mmbostock

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

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

74% match

Loading thumbnail…

flying-beeswarm

A swarm of 600 colored circles flies along a looping cubic Bézier path that morphs in time. Each circle’s position along the path is fixed by a random value, but `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` jitters the circles apart each frame, creating a dense, collision-free cluster that stretches and warps as the path undulates. The path is drawn as a thick yellow stroke, and circles are rendered in SVG with positions updated via `translate`. Data is procedurally generated using `Math.random()`.

11wheel

74% match

Loading thumbnail…

Swarmalator

A swarm of colored circles self-organizes into dynamic patterns, with each particle's hue representing its internal phase. The simulation uses `d3.forceSimulation` to integrate pairwise interactions that combine spatial attraction with phase coupling, controlled by adjustable parameters J and K. Colors transition smoothly via an HSL mapping, while an optional temperature mode recolorings particles based on their kinetic energy using an Inferno colormap. The visualization runs on a Canvas element, rendered in real time as the swarm evolves and responds to mouse interaction.

FFrissAnalytics

74% match

Loading thumbnail…

Canvas Scatterplot

This example renders 20,000 randomly generated points as a Canvas scatterplot, with x, y, and radius values sampled from normal distributions. It demonstrates a color-picking technique for interaction: a hidden canvas draws each point in a unique RGB color, and the visible canvas draws them in steelblue. On mousemove, the code calls Canvas `getImageData` on the hidden canvas to identify the point under the cursor, then displays a tooltip with its coordinates and radius. It uses d3.scaleLinear for axes and d3.timer for a brief animation loop.

JJverma

74% match