Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Sorting Ballet

A row of rainbow bars sorts itself as a dance, every swap a hop, then un-sorts again. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified117 lines of codev1.0.0

In Text & data

Next: Fibonacci Spiral DataSurprise me

Sorting Ballet preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

24
0
1
9

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 1.7 MB)
Info

What it is

A row of rainbow bars that sorts itself as a dance. A sorting algorithm (insertion, bubble, selection or quick sort) runs on a shuffled row; every swap is two bars hopping past each other in an arc, one over and one under. When the row is in order a wave of lift runs along it, then the same dance is played backwards until the row is shuffled again. Choose the number of bars, the algorithm, where the rainbow starts, how high the bars hop, the seed that shuffles the row, the backdrop colour and whether the camera sways.

Reuse it in your own idea

  • CS explainer: Insertion, 24 bars.
  • Fast and busy: Bubble, many bars.
  • Calm: Selection, big hops.

Which part is reusable

src/sorting-ballet.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The dance speed depends on the number of swaps: bubble sort with many bars is very fast.
  • Only swaps are shown, not the comparisons.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/sorting-ballet.js
Exports
  • createSortingBallet({ bars?, algorithm?, hue?, hop?, seed? }) => { group, swaps, setProgress(progress), dispose() }
  • sortingSwaps(values, algorithm?) => [slotA, slotB][]
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The bars stand on y = 0, about 15 wide and up to 4.8 tall; swapping bars hop in an arc and slide ±0.9 in depth to pass each other.

Lighting: A warm key light with a shadow map, a floor and the studio environment.

Timing: setProgress(progress) replays the swaps up to the current moment (at most a few hundred); frames render in any order.

Output
1080×1080, 30 fps, 20 s · procedural (computed from the frame number) · seamless loop — The sort runs forward over the first half of the loop, the row holds in order for a moment with a wave of lift, and the same swaps are played backwards over the second half, so the row is back to its shuffled start at the last frame.
Tested
Rendered 600 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One instanced draw call of up to 48 bars with a shadow map; replaying up to a thousand swaps per frame on the CPU: under a millisecond. Software WebGL renders in about a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- sorting-ballet/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:5668a5f8b9783a9f…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/data-information/sorting-ballet (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: precomputed swap lists for four algorithms replayed at a steady rate with hopping bars, a lift wave when sorted and the same dance in reverse on an exact loop.
BinMore like this

More like this

Play these full screen

Wave Text

Text layer2DSeamless loop6 seconds