Particle viSFest

100%

Particle viSFest

✓ Published0🌍 Public

Last edited Oct 4, 2018

Created on Oct 7, 2017

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.

AI-generated description

Move your mouse to slosh the text around.

The SVG filter comes from Nadieh Bremer's great blog post about making gooey effects.

The idea of drawing text on a <canvas> element and using the bitmap to identify points within the text came from Toph Tucker's block that reverse-engineers FizzyText.

forked from <a href='http://bl.ocks.org/armollica/'>armollica</a>'s block: <a href='http://bl.ocks.org/armollica/06a202c9f7df191ace8a1f97e33ffb97'>Slimy Text</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/f973a941606aa38fed321fbce0c8bd7f'>Particle viSFest</a>

mit Licensed

Similar vizzes

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

83% 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…

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…

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

74% match

Loading thumbnail…

Fork of Untitled

Twenty colored rectangles bounce and slide within a fixed SVG canvas, colliding with each other and the boundaries. The animation runs on a `d3.forceSimulation` with custom forces for rectangular collision and bounding-box containment, while a drag handler lets users move any rectangle. Each particle has a random size, velocity, and direction, with a distinct color from `d3.schemeCategory20`. The custom `rectCollide` force uses a `d3.quadtree` to efficiently resolve overlaps.

AAnthony Zornig

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

72% match

Loading thumbnail…

thing 0001

A word rendered as text is represented by hundreds of small squares that drift randomly across the screen before settling into the letterforms. The visualization rasterizes the word "enj" onto a hidden canvas using `fillText` and `getImageData`, sampling pixel coordinates as target positions. Each square is a `<rect>` whose position is animated by `d3.forceSimulation`, using `forceX`, `forceY`, and `forceCollide` to move particles toward their targets while preventing overlap. The color and stroke width vary with distance from the center, drawn on both SVG and canvas elements using D3 v4 and the `d3-scale-chromatic` color scale.

FFrissAnalytics

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

72% match