Skip to content

Particle Galaxy

A spiral galaxy of tens of thousands of glowing stars turning with differential rotation: the inner stars lap the outer ones. Loops perfectly.

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

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

Next: Hawking RadiationSurprise me

Particle Galaxy 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

24000
3
1
1
15

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

Info

What it is

A spiral galaxy of tens of thousands of glowing particles. Stars are scattered along logarithmic arms round a hot core, golden near the middle and blue-white in the arms, with a thin disc of haze, and the whole galaxy turns with differential rotation: the inner stars lap the outer ones, so the arms wind and unwind as it goes. Choose the number of stars, the number of arms, the colours (classic, rose, emerald or mono), how tightly the arms wind, how many laps the outer stars make per loop, the seed and whether the camera sways.

Reuse it in your own idea

  • Space title: Classic, three arms.
  • Dreamy: Rose, tight arms.
  • Dense: Emerald, two arms.

Which part is reusable

src/particle-galaxy.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

  • Star sizes are set in the shader from a scale you give with setView; change the render size and call it again.
  • The stars follow circular orbits; there is no gravity simulation.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/particle-galaxy.js
Exports
  • createParticleGalaxy({ stars?, arms?, palette?, twist?, laps?, seed? }) => { group, setProgress(progress), setView(heightPx, fovDeg), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { classic, rose, emerald, mono }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, points and shader materials.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The galaxy lies in the xz plane centred on the origin, stars out to a radius of 8; the camera looks down at about 36° from 28 away.

Lighting: Self-lit additive points; the bloom gives the glow.

Timing: setProgress(progress) sets one uniform; the star positions are worked out in the vertex shader; frames render in any order.

Output
1080×1080, 30 fps, 14 s · procedural (computed from the frame number) · seamless loop — Every star makes a whole number of laps per loop (the inner ones more), its twinkle runs whole cycles and the camera tilt is a sine of the loop, so the last frame meets the first.
Tested
Rendered 420 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 draw call of up to 60 000 points with all motion in the vertex shader, plus the bloom: about 3 ms a frame on an integrated Intel GPU. Software WebGL renders in about three seconds a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- particle-galaxy/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:64a097fe1b4c9373…
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/particle-systems/particle-galaxy (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original scene: logarithmic spiral arms of shader-driven point stars with whole laps per star on a differential rotation, through a bloom, on an exact loop.
BinMore like this

String Art

Background3DSeamless loop12 seconds