Plasma

100%

✓ Published0🌍 Public

Last edited Oct 6, 2018

Created on Oct 6, 2018

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.

AI-generated description

Simulation of attraction-of-opposites particles, similar to the interaction between protons and electrons.

Uses D3's force plugin forceMagnetic to simulate the asymmetrical attraction/repulsion of objects 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 positive (+) vs negative (-) particles.

forked from <a href='http://bl.ocks.org/vasturiano/'>vasturiano</a>'s block: <a href='http://bl.ocks.org/vasturiano/8105c6b44c064e49a046ae1fb07c9f4f'>Plasma</a>

mit Licensed

Similar vizzes

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

72% match

Loading thumbnail…

Accretion

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.

FFrissAnalytics

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

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

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

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

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

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

66% match