Flocking boids

100%

Flocking boids

✓ Published0🌍 Public

Last edited Jun 24, 2019

Created on Jun 24, 2019

A canvas-based flocking simulation that animates hundreds of boids following Craig Reynolds’ classic behavioral rules of alignment, cohesion, and separation. Clicking on the canvas adds new boids. The default “By Movement” coloring shades each boid via d3.interpolateWarm based on a moving average of its acceleration magnitude, while an alternative “Rainbow” mode assigns colors via d3.interpolateRainbow. A dat.GUI panel adjusts parameters like flockmate radius, velocities, and starting formations, with each frame rerendering trails on two stacked canvas elements.

AI-generated description

Playing around with Boids-style flocking. Click to add more, coloring by movement colors each boid by a moving average of its acceleration magnitude.

Similar vizzes

Loading thumbnail…

Flocking faces

Hundreds of hand-drawn face sketches, loaded from a JSON file of stroke coordinates, swarm across a canvas as a boids-style flocking simulation. Clicking adds more boids. Each face is drawn with a `d3.line` and `curveBasis` call. The color of each face indicates its movement speed, mapped via `d3.interpolateWarm` to a moving average of acceleration magnitude. The simulation uses the `Vec2` library for vector math, and renders to two layered Canvas elements to create motion trails. Adjustable parameters for flocking forces and starting positions are exposed through a `dat.GUI` control panel.

TThanaporn-sk

85% match

Loading thumbnail…

Flocking

This interactive visualization demonstrates a flocking simulation where 30 agents move according to repulsion, orientation, and attraction zones, with colors indicating the current influence (red for repulsion, blue for attraction-only, green for orientation-only, turquoise for both). Users can adjust the three zone radii via number inputs, play, pause, or step through time using d3.interval, and click or drag points to inspect their radii and direction lines. The code uses d3.v4 with SVG rendering, d3.zoom for panning, and d3.transition for smooth radius changes.

TThanaporn-sk

77% match

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Mmbostock

69% match

Loading thumbnail…

Spiraling Birds

A swarm of 130 triangular birds spirals toward the mouse cursor against a dark background, with each bird’s color shifting from yellow to red based on its distance from the pointer. The simulation uses d3.forceSimulation with custom forces: forceSpiral steers the flock toward a logarithmic spiral pattern, while forceB applies local cohesion and alignment based on nearby birds within 30 pixels. A forceCollide prevents overlap, and mouse movement resets the simulation’s alpha to 1, restarting the motion. The birds are rendered as SVG paths, with their rotation and fill color updated on each tick.

TThanaporn-sk

68% match

Loading thumbnail…

Blobbing Particles IV

Three layers of colored particles—green, blue, and red—drift smoothly across the canvas, merging into blobby clusters within each layer while remaining visually distinct across layers. Each particle is a radial-gradient circle clipped to a distance-limited Voronoi cell, so nearby particles appear to fuse together. The animation uses d3.distanceLimitedVoronoi to compute cell boundaries, SimplexNoise to drive continuous movement, and D3 transitions to update positions and opacity in real time, creating a fluid, organic swarm effect.

KKcnarf

68% match

Loading thumbnail…

N-Body Problem II

A swarm of 400 points orbits a central point in a dark canvas, with each point trailing a short line that encodes its instantaneous velocity as a color gradient from magenta to yellow. The simulation uses d3.forceSimulation with a d3.forceManyBody charge force and a d3.forceCenter constraint, while alphaDecay is set to zero so motion never settles. Rendering occurs on a Canvas 2D context, where each tick clears the frame and draws velocity-scaled strokes using d3.scaleLinear for color mapping.

Mmbostock

68% match

Loading thumbnail…

N-Body Problem

Two hundred colored circles gravitate and collide, their motion traced by white velocity streaks, in an N-body simulation rendered on an HTML5 Canvas. The piece uses the D3 v3 APIs `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for efficient collision detection, and `d3.scale.linear` to map speed to a steelblue-to-brown stroke. Each tick pauses the simulation, redraws the scene, and resumes, with circle positions and velocities updated from prior frames.

Mmbostock

68% match

Loading thumbnail…

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.

PPhilippe Rivière

67% match