Particle collision

100%

Particle collision

✓ Published0🌍 Public

Last edited Sep 19, 2018

Created on Dec 8, 2016

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Collision test with D3 4.0

Five particles in a D3.js 4.0 force-directed simulation demonstrate the inelastic nature of the built-in `collide` force. Two distinct sizes—four large dust particles and one small gas molecule—move and bounce within a bounded Canvas, colliding with each other and a vertical wall. The simulation runs via `d3.forceSimulation` with a `d3.forceCollide` radius function. Unlike elastic collisions, momentum is conserved but kinetic energy is not, as visible in the particle velocities after impacts. The particles are rendered as red, outlined circles on a transparent Canvas.

FFrissAnalytics

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

80% match

Loading thumbnail…

Test 2

This visualization shows a physics-based particle simulation where colored nodes move and collide within a bounded rectangular space. The code uses d3.forceSimulation with collision and forceX/forceY forces to drive the motion, rendering the particles on an HTML5 canvas via Canvas 2D context paths. Each node is assigned a random color and velocity, and the simulation updates continuously using requestAnimationFrame, drawing circles with varying radii as the forces stabilize the layout.

LLeonardonline

78% match

Loading thumbnail…

Collision Detection

This example demonstrates a collision-detection simulation using D3.js v4, displaying 1000 circles of varying sizes that repel each other while being pulled toward the center of a 960×960 canvas. The visualization uses `d3.forceSimulation` combined with `d3.forceCollide`, `d3.forceX`, and `d3.forceY` to compute particle positions, while rendering occurs via Canvas 2D API calls like `clearRect` and `context.arc`. The force-collision algorithm prevents overlaps by iterating collision checks twice per tick, and randomized radii from 4 to 18 pixels create the visual variety. All drawing is handled directly on the Canvas element rather than through SVG, producing a smooth real-time animation.

FFrissAnalytics

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

77% match

Loading thumbnail…

Particle viSFest

A grid of small colored rectangles forms the word “viSFest,” with each rectangle initially scattered across the black canvas before a force simulation pulls them toward their target positions. Moving the mouse creates a wrecking-ball node that repels nearby rectangles, causing the text to slosh and deform before settling back. The code uses d3.forceSimulation with forceX, forceY, and forceCollide, while d3.scaleSequential with interpolateRainbow colors each rectangle based on its x-coordinate. The initial text shape is rasterized via Canvas getImageData, and rendering uses SVG rect elements without the gooey filter.

FFrissAnalytics

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

76% match

Loading thumbnail…

Brownian Motion Constrained in Rectangle

A canvas displays 200 particles performing Brownian motion inside a rectangle, bouncing elastically off its boundaries. The simulation uses d3.forceSimulation with custom forces for random motion and container collision, plus d3.forceCollide to prevent overlaps. A Voronoi diagram, computed with d3.voronoi, generates an Urquhart graph—its edges are drawn as thick gray lines beneath thin black ones, with white-stroked yellow dots marking each particle. Clicking drags the first node, restarting the simulation.

PPhilippe Rivière

76% match