Accretion

100%

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on Aug 27, 2018

A particle system simulates accretion, where dark gray attractive particles draw in and merge with crimson repellent particles, repelling them instead. Two sliders control particle density and the proportion of attractive versus repellent forces. The visualization uses D3’s `d3.forceSimulation` with `d3.forceMagnetic` for inverse-square attraction/repulsion, `d3.forceBounce` for inelastic collisions, and `d3.forceSurface` to keep particles within the SVG canvas, with controls updating particle poles dynamically.

AI-generated description

Simulation of accretion of particles attracted by electrostatic or gravitational forces, analogous to the interaction within dust clouds found in the early stages of <a href="https://en.wikipedia.org/wiki/Accretion_(astrophysics)">star formation</a>.

Uses D3's force plugin forceMagnetic to simulate the attraction/repulsion of objects of varying mass in an inverse-square relationship with distance. Further, particles are prevented from overlapping by applying a non-elastic collision force using forceBounce.

Using the slider controls you can add/remove particles to the system, and regulate the ratio of attractive (green attracts all other) vs repellent (red repels all other).

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/27fbd16d7e9131fbc8e8e93113f9896c'>Accretion</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3-force-attract: mouse attract II

Fifty circles with randomized positions and radii are rendered as an SVG. The visualization demonstrates a multi-force physics simulation where a force-based layout continuously attracts the circles toward the current mouse location while a separate collision force keeps them from overlapping. The example uses `d3.forceSimulation()` and `d3.forceAttract()` from the d3-force-attract library, with per-node attract strength defined via the `inertia` property. A mouse-move event updates the attract target and restarts the simulation, updating circle positions on each tick.

FFrissAnalytics

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

71% match

Loading thumbnail…

Plasma

This interactive visualization simulates charged particles—large crimson protons and small darkslategrey electrons—that attract and repel based on an inverse-square magnetic force, while non-elastic collision prevents overlap. Sliders adjust the particle count and the positive/negative ratio, showcasing the emergent clustering dynamics. Built with D3.js, it uses `d3.forceSimulation` with custom `forceMagnetic`, `forceBounce`, and `forceSurface` plugins, rendering as SVG circles updated on each tick. The code defines particle generation from a density parameter and applies hard boundary limits to keep them on screen.

FFrissAnalytics

71% match

Loading thumbnail…

Untitled

A force-directed particle system in SVG uses D3 v3’s `d3.layout.force` to simulate 200 circles with random radii, while a fixed center node applies a strong negative charge to repel others. A quadtree (`d3.geom.quadtree`) accelerates collision detection, and the layout’s `on("tick")` event updates circle positions. Mouse movement drives the root node’s velocity via `d3.mouse`, resuming the simulation. The visualization runs in React, though the rendering logic is pure D3.

Bbasskur

70% match

Loading thumbnail…

Particles

Hundreds of small, colored rectangles converge into the word “FRISS” before scattering apart. They then reform and slosh around as the mouse moves, creating a gooey, viscous effect. The code rasterizes text by drawing it to a Canvas and using `getImageData` to identify pixel locations as target points. A `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` animates the elements, while an SVG filter applies the gooey blur and color matrix.

FFrissAnalytics

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

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

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

67% match