Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

String Art

Threads stretched across glowing hoops weave cardioids, nephroids and lace as the multiplier slides up and down. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified351 lines of codev1.0.0

In Science & maths, Light, glass & shine, Patterns & illusions

Next: Particle GalaxySurprise me

String Art 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

150
5

How far the multiplier climbs from 2 (a cardioid) before it falls back.

1
0.45
1
1

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

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

What it is

The classic times-table string art: every point of a hoop is joined by a straight thread to the point m times as far round, and the threads together weave curves that are not there: a cardioid when m is 2, a nephroid at 3, a lace of ever more cusps as m grows. Here m slides smoothly up through all the whole numbers to a maximum and back down, so the weave swells, folds and blooms while up to three hoops of different sizes hang in space, tipping slowly, their colours running round. Choose the colours (rainbow, sunset, ocean or gold), how many threads a hoop has, how far the multiplier climbs, the number of hoops, their tilt, the thickness of the threads and the glow.

Reuse it in your own idea

  • Music visualiser or meditation loop: Rainbow hoop, slow.
  • Maths explainer on cardioids and modular arithmetic: Rainbow hoop with the most cusps lowered to 3.
  • Elegant title backdrop: Golden filigree behind a kinetic title.

Which part is reusable

src/string-art.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The multiplier is continuous, so between whole values the thread ends do not land on a fixed set of nails: there are no nails drawn.
  • Every thread is a straight line of the same brightness; there is no wood, cotton or shadow.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/string-art.js
Exports
  • createStringArt({ palette?, lines?, maxMultiplier?, rings?, tilt?, thickness?, glow?, aspect? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { rainbow, sunset, ocean, gold }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, instanced thread ribbons and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Perspective, 30° field of view, the camera 5.5 units from the origin; the hoops have radius 1, 0.66 and 0.32 and hang 0.35 apart in depth.

Lighting: Self-lit: every thread adds its colour; overlaps glow, and the bloom softens them.

Timing: update(time, loopSeconds) sets the loop time; each thread end is a closed-form function of it, so frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The multiplier is a raised cosine of the loop phase (so it climbs and falls once a loop), the colours run round the hoop a whole number of cycles, the thread shimmer has whole cycles and the tilt of the hoops is a sine of the loop, so the last frame meets the first.
Tested
Rendered 360 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
Up to about 1,400 thread ribbons and 540 hoop segments, positioned in the vertex shader, and a small bloom: trivial for any GPU, a fraction of a second a frame in software. At most 480 threads a hoop and three hoops.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- string-art/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:1765e0ac8121bf7e…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/abstract-artistic/string-art (with webgpu-string-art, MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original piece: a smoothly sliding times-table multiplier, hoops hanging in space, thread ribbons projected in the vertex shader, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen