Vortex Emergence

Circular Vortex Emergence

A dense cluster of a thousand particles circulates within a circular boundary, with their motion shaped by a D3 force simulation that balances collision, velocity decay, and a speed-limiting force. Clicking introduces a central vertical barrier that temporarily divides the system, altering particle trajectories and energy distribution. The simulation runs on a Canvas, with real-time red and green line charts at the bottom tracking the average squared velocities of particles on each side of the divider. The code uses `d3.forceSimulation`, custom force functions, `d3.scaleLinear`, and Canvas 2D rendering.

89% match

Not an Ideal Gas

A simulation of 800 particles in a box with a central gap shows how the mean squared velocity evolves over time, plotted as a line chart below. The gap’s aperture shrinks as the simulation cools, and clicking the canvas restarts the process. The code uses `d3.forceSimulation` with a custom `forceCollide` and `velocityDecay`, plus custom bounce and barrier forces. Rendering combines Canvas for the particles and a d3 `area` path on SVG for the speed trace.

78% match

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

75% match

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

71% match

Expand and fill force (work in progress)

Five hundred colored circles cluster in a cloud, then slowly diffuse outward as a force simulation seeks lower-density regions. The visualization uses custom forces within d3.forceSimulation, including a grid force and a hexbin-based expand force that samples random hexagon rotations and pushes nodes toward emptier neighboring bins. Rendered on Canvas, the circles respond to mouse movement, with the first node pinned to the cursor and the simulation restarting on interaction. The code employs d3.hexbin to compute density weights and d3.forceCollide to prevent overlaps.

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

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.

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