Brownian Motion Constrained in Rectangle

100%

Brownian Motion Constrained in Rectangle

✓ Published0🌍 Public

Last edited Nov 18, 2016

Created on Nov 18, 2016

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.

AI-generated description

A mixed bag of forces:

Brownian motion
Elastic Bounce on a container’s edge
Collide

Displayed as an Urquhart graph just because.

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/56c02237d9951c4bb12ed41cf64d6e4c'>Urquhart Force Mesh</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/75f14da692354b49a88b9c015324eaae'>Brownian Motion Urquhart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Brownian Motion Urquhart

This example shows 200 points moving under the influence of three forces: Brownian motion, collision avoidance, and elastic bouncing off a circular container. The resulting point distribution is visualized through an Urquhart graph, a simplification of the Delaunay triangulation that removes the longest edge of each triangle. The simulation uses D3’s `forceSimulation` module with custom force functions for `brownian`, `collide`, and `bounce-on-container` interactions. Rendering is done on a Canvas element, where the graph’s edges are drawn with thick light-gray strokes beneath thin black lines, and each node is a small yellow-filled circle. The mouse can also drag the first node, injecting new force into the system.

PPhilippe Rivière

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

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

76% match

Loading thumbnail…

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.

PPhilippe Rivière

75% match

Loading thumbnail…

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.

PPhilippe Rivière

75% match

Loading thumbnail…

Untitled

Twenty colored rectangles of random sizes bounce off one another and the edges of an SVG canvas, continuously accelerated by a custom force simulation built with `d3.forceSimulation`. Each particle moves at a constant velocity, with a custom `rectCollide` force handling pairwise collisions via a quadtree, and a `boundedBox` force keeping them inside the frame. Rectangles are draggable with `d3.drag`, which temporarily alters their velocity. The visualization uses D3 v4 with ordinal color scaling and direct SVG manipulation.

MMadalena

75% match

Loading thumbnail…

Circles bouncing inside a rectangle

This example shows twenty colored circles bouncing and colliding within a rectangular boundary, with each circle moving at a constant speed and bouncing off the walls. The visualization adapts D3.js’s force layout to animate the circles, using custom gravity and collision functions to handle wall reflections and circle-to-circle collisions. The code relies on `d3.layout.force` for the simulation loop, `d3.geom.quadtree` for efficient collision detection, and SVG elements for rendering. Circle positions and velocities are manually updated in the tick function, while a static rectangle outlines the containment area, and the data consists of randomly generated circles with varied radii and colors.

663anp3ca

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

74% match