N-Body Problem II

100%

N-Body Problem II

✓ Published0🌍 Public

Last edited May 2, 2016

Created on Feb 22, 2016

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

N-Body Problem

Two hundred colored circles gravitate and collide, their motion traced by white velocity streaks, in an N-body simulation rendered on an HTML5 Canvas. The piece uses the D3 v3 APIs `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for efficient collision detection, and `d3.scale.linear` to map speed to a steelblue-to-brown stroke. Each tick pauses the simulation, redraws the scene, and resumes, with circle positions and velocities updated from prior frames.

Mmbostock

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

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

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

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

73% match

Loading thumbnail…

strange dancing behaviour

This example shows a moving chain of 120 colored points arranged in a circle, whose nodes link sequentially and appear to “dance” unpredictably as the simulation runs. The user can drag the first node with the mouse, which perturbs the whole chain. The code uses `d3.forceSimulation` with custom forces, including a “dance” force that pushes each node away from its predecessor, plus `d3.forceManyBody`, `d3.forceX`, `d3.forceY`, and `d3.forceCenter`. Rendering is done on a Canvas via `getContext("2d")`, drawing arcs for points and line segments for links. The data is generated procedurally from 360 degrees divided by a sample rate of 3.

KKcnarf

73% match

Loading thumbnail…

Déménagement 1

Eight thousand points drift outward from the center of a canvas, then pause and leap in random directions, leaving a faint ring before settling into a second, radial distribution. The simulation uses `d3.forceSimulation` with a custom force that randomly repositions particles via `d3.randomLogNormal`, while a separate rendering loop draws the points as black and grey circles. A circular reference path is stroked to indicate the target radius, and the logarithmic scale maps coordinates to screen positions.

PPhilippe Rivière

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

71% match