Flocking faces

100%

Flocking faces

✓ Published0🌍 Public

Last edited May 20, 2017

Created on May 20, 2017

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.

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 boids

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.

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

76% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a playful face entirely out of circles and lines inside an SVG, with features that wiggle and bounce. Using D3.js v5 and its `d3.forceSimulation` API, the face’s eyes, pupils, and mouth are treated as particles linked by spring-like forces, so they jiggle organically. The code defines the facial geometry through `d3.forceManyBody` and `d3.forceLink`, with the simulation ticking to update element positions each frame. Rendered in a 960×500 SVG canvas, the face emerges purely from code without external data sources.

BBun

75% match

Loading thumbnail…

Let's make a face with D3.js!

A face drawn from a network graph animates as force-directed simulation moves its nodes. The D3.js code uses `d3.forceSimulation` with `forceX`, `forceY`, `forceCollide`, `forceManyBody`, and `forceLink` forces to arrange vertices from a JSON data file. The Canvas rendering updates on each tick, drawing edges with `drawEdge` and circular nodes with `drawNode` to form the face’s features.

Hhhhheeee

74% match

Loading thumbnail…

Make a Face with D3.js

A playful interactive face is assembled from draggable geometric shapes, with eyes that track the pointer and a mouth that reacts. The example builds the face using SVG elements positioned with D3’s data-join, then applies forces via `d3.forceSimulation` to gently jostle the features. Pointer events drive the pupil movement through `d3.pointer`, while a timer updates the jaw’s position. The code demonstrates layered selections, transition methods like `transition.attrTween`, and event handling for a touch of character.

AAveryBurke

73% match

Loading thumbnail…

Fork of make a face d3js

This example shows an interactive face made of circles that respond to mouse movement using a D3 force simulation. The visualization reads COVID-19 case data from a CSV file, though the display itself focuses on the playful animated face rather than a traditional chart. Built with D3 v7 and React, the code uses `d3.forceSimulation` to position the facial features, which are rendered as SVG elements within a 960x500 viewport. The simulation continuously updates node positions, creating a lively, dynamic expression that follows the pointer.

GGodspower Wodi

73% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a cartoon face using D3.js v5, with each facial feature—eyes, nose, and mouth—drawn as separate SVG shapes. The code uses `d3.forceSimulation` to position the features dynamically, creating a playful, animated arrangement. The page renders to an SVG canvas of 960 by 500 pixels, with styles handled in a separate CSS file. The face emerges from the interaction of simulated forces, showcasing how D3's physics-based layout can organize visual elements.

Mmirna981

73% match

Loading thumbnail…

Face made with d3.js

A face built from SVG primitives animates through a series of facial expressions. The circular face, positioned via an SVG group transform, holds two eyes that pulse by scaling their radius. Eyebrows shift vertically and rotate, while the mouth, drawn with the `d3.arc` path generator, expands and contracts its inner and outer radii. The `d3.selection.transition` API orchestrates these 2000-millisecond animations, creating a looping, humorous sequence. The example uses d3.v7 to manipulate and transition the SVG elements directly.

SSebastian Barrett

72% match