Skip to content

Commit 4649ec6

Browse files
danlexclaude
danlex
and
claude
committed
Add #115 Fourier Epicycles to gallery: math art with rotating circles
Circles on circles draw complex curves — the Fourier series visible. Fills the 'math art' category gap from the quality audit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 5d324af commit 4649ec6

3 files changed

Lines changed: 56 additions & 15 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# Particles
22

33
[![GitHub Pages](https://img.shields.io/badge/Live%20Demo-danlex.github.io%2Fparticles-blue?style=flat-square)](https://danlex.github.io/particles/)
4-
[![Animations](https://img.shields.io/badge/Animations-114-brightgreen?style=flat-square)](https://danlex.github.io/particles/)
4+
[![Animations](https://img.shields.io/badge/Animations-115-brightgreen?style=flat-square)](https://danlex.github.io/particles/)
55
[![Three.js](https://img.shields.io/badge/Three.js-r160-orange?style=flat-square)](https://threejs.org/)
66
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow?style=flat-square)](LICENSE)
77

8-
A gallery of **114 real-time, interactive GPU particle animations**. Each runs **65,536 particles** entirely on the GPU using [Three.js](https://threejs.org/) r160 and `GPUComputationRenderer`.
8+
A gallery of **115 real-time, interactive GPU particle animations**. Each runs **65,536 particles** entirely on the GPU using [Three.js](https://threejs.org/) r160 and `GPUComputationRenderer`.
99

1010
**[View Live Gallery](https://danlex.github.io/particles/)**
1111

1212
---
1313

1414
## Features
1515

16-
- **114 unique animations** across 13 categories
16+
- **115 unique animations** across 13 categories
1717
- **65,536 particles** per animation (256x256 GPU compute texture)
1818
- **Mouse interaction** — particles react to your cursor in every animation
1919
- **Real-time controls** — Speed, Bloom, Size, Hue sliders + zoom buttons

‎index.html‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66

77
<!-- Primary Meta Tags -->
8-
<title>Particles — 114 Interactive GPU Particle Animations | Three.js + WebGL</title>
9-
<meta name="title" content="Particles — 114 Interactive GPU Particle Animations | Three.js + WebGL">
10-
<meta name="description" content="Explore 114 real-time, interactive GPU particle animations. 65,536 particles each, fully GPU-computed with Three.js and WebGL. Lorenz attractors, fractals, physics simulations, sacred geometry, and more. Mouse-interactive.">
8+
<title>Particles — 115 Interactive GPU Particle Animations | Three.js + WebGL</title>
9+
<meta name="title" content="Particles — 115 Interactive GPU Particle Animations | Three.js + WebGL">
10+
<meta name="description" content="Explore 115 real-time, interactive GPU particle animations. 65,536 particles each, fully GPU-computed with Three.js and WebGL. Lorenz attractors, fractals, physics simulations, sacred geometry, and more. Mouse-interactive.">
1111
<meta name="keywords" content="particle animation, GPU particles, three.js, webgl, strange attractor, lorenz attractor, fractal, shader, GLSL, creative coding, generative art, GPUComputationRenderer, mathematical visualization, chaos theory, physics simulation, interactive art, demoscene, GPGPU, compute shader, particle system, WebGL gallery, real-time graphics, mathematical art, procedural generation, reaction diffusion, turing patterns, double pendulum, n-body simulation, sacred geometry, mandala, fibonacci, supershape, gyroid, klein bottle, metaballs, curl noise, fireworks, supernova, black hole simulation">
1212
<meta name="author" content="Alexandru DAN">
1313
<meta name="robots" content="index, follow">
@@ -19,8 +19,8 @@
1919
<!-- Open Graph / Facebook -->
2020
<meta property="og:type" content="website">
2121
<meta property="og:url" content="https://danlex.github.io/particles/">
22-
<meta property="og:title" content="Particles — 114 Interactive GPU Particle Animations">
23-
<meta property="og:description" content="Explore 114 real-time, interactive GPU particle animations. Strange attractors, fractals, physics simulations, sacred geometry. 65,536 particles each, fully GPU-computed with Three.js + WebGL.">
22+
<meta property="og:title" content="Particles — 115 Interactive GPU Particle Animations">
23+
<meta property="og:description" content="Explore 115 real-time, interactive GPU particle animations. Strange attractors, fractals, physics simulations, sacred geometry. 65,536 particles each, fully GPU-computed with Three.js + WebGL.">
2424
<meta property="og:image" content="https://danlex.github.io/particles/og-image.svg">
2525
<meta property="og:image:width" content="1200">
2626
<meta property="og:image:height" content="630">
@@ -30,8 +30,8 @@
3030
<!-- Twitter -->
3131
<meta name="twitter:card" content="summary_large_image">
3232
<meta name="twitter:url" content="https://danlex.github.io/particles/">
33-
<meta name="twitter:title" content="Particles — 114 Interactive GPU Particle Animations">
34-
<meta name="twitter:description" content="Explore 114 interactive GPU particle animations. Strange attractors, fractals, physics sims, sacred geometry. 65K particles, fully GPU-computed.">
33+
<meta name="twitter:title" content="Particles — 115 Interactive GPU Particle Animations">
34+
<meta name="twitter:description" content="Explore 115 interactive GPU particle animations. Strange attractors, fractals, physics sims, sacred geometry. 65K particles, fully GPU-computed.">
3535
<meta name="twitter:image" content="https://danlex.github.io/particles/og-image.svg">
3636
<meta name="twitter:image:alt" content="A gallery of glowing particle animations on a dark background">
3737

@@ -46,7 +46,7 @@
4646
"@type": "WebApplication",
4747
"name": "Particles",
4848
"url": "https://danlex.github.io/particles/",
49-
"description": "A gallery of 114 real-time, interactive GPU particle animations built with Three.js and GPUComputationRenderer. Features strange attractors, fractals, physics simulations, sacred geometry, and more.",
49+
"description": "A gallery of 115 real-time, interactive GPU particle animations built with Three.js and GPUComputationRenderer. Features strange attractors, fractals, physics simulations, sacred geometry, and more.",
5050
"applicationCategory": "MultimediaApplication",
5151
"operatingSystem": "Any (WebGL-capable browser)",
5252
"browserRequirements": "Requires WebGL 2.0",
@@ -72,7 +72,7 @@
7272
"@type": "CollectionPage",
7373
"name": "GPU Particle Animation Gallery",
7474
"url": "https://danlex.github.io/particles/",
75-
"description": "Browse 114 interactive GPU particle animations organized by category: strange attractors, fractals, physics simulations, sacred geometry, astrophysics, and more.",
75+
"description": "Browse 115 interactive GPU particle animations organized by category: strange attractors, fractals, physics simulations, sacred geometry, astrophysics, and more.",
7676
"numberOfItems": 62,
7777
"author": {
7878
"@type": "Person",
@@ -322,6 +322,15 @@ <h1>GPU Particle Animations</h1>
322322
</div>
323323

324324
<div class="grid">
325+
<a class="card" data-created="2026-04-08" href="fourier-epicycles.html">
326+
<div class="card-preview"><canvas id="c-fourier"></canvas><div class="play-hint"></div></div>
327+
<div class="card-info">
328+
<div class="card-title">Fourier Epicycles</div>
329+
<div class="card-desc">Circles rotating on circles draw complex curves. The Fourier series made visible with progressively more epicycles.</div>
330+
<div class="card-tags"><span class="card-tag">Math Art</span><span class="card-tag">Fourier Series</span><span class="card-particles">65,536 particles</span></div>
331+
</div>
332+
</a>
333+
325334
<a class="card" data-created="2026-04-08" href="audio-terrain.html">
326335
<div class="card-preview"><canvas id="c-audioterrain"></canvas><div class="play-hint"></div></div>
327336
<div class="card-info">
@@ -2356,7 +2365,7 @@ <h1>GPU Particle Animations</h1>
23562365
const { ctx, w, h } = setupCanvas('c-ocean');
23572366
for (let i = 0; i < 6000; i++) {
23582367
const gx = (i % 80) / 80 * 30 - 15;
2359-
const gz = Math.floor(i / 80) / 114 * 30 - 15;
2368+
const gz = Math.floor(i / 80) / 115 * 30 - 15;
23602369
const phase1 = 1.0 * (gx*0.7 + gz*0.7);
23612370
const phase2 = 2.0 * (gx*0.9 - gz*0.4);
23622371
const y = 0.4*Math.sin(phase1) + 0.2*Math.sin(phase2) + 0.1*Math.sin(3*(-gx*0.3+gz*0.95));
@@ -3411,9 +3420,39 @@ <h1>GPU Particle Animations</h1>
34113420
drawProtein(); drawGravWaves(); drawOceanCurr(); drawMagReconn();
34123421
drawRayleigh(); drawDendrites(); drawPlates(); drawDiffusion();
34133422
drawNewtonRings(); drawPredPrey(); drawDoppler(); drawCoralReef();
3414-
drawPlasmaInstab(); drawAudioTerrain();
3423+
drawPlasmaInstab(); drawAudioTerrain(); drawFourier();
34153424
};
34163425

3426+
function drawFourier() {
3427+
const { ctx, w, h } = setupCanvas('c-fourier');
3428+
// Draw the traced curve from epicycles
3429+
for (let i=0;i<3000;i++) {
3430+
const t=i/3000*Math.PI*8;
3431+
let x=0,y=0;
3432+
for (let n=1;n<=8;n++) {
3433+
const r=3/n;
3434+
if(n%2===1){x+=r*Math.cos(n*t+n*0.5);y+=r*Math.sin(n*t+n*0.5);}
3435+
else{x+=r*0.7*Math.sin(n*t*1.3+n*0.5);y+=r*0.7*Math.cos(n*t*0.8+n*0.5);}
3436+
}
3437+
const age=i/3000;
3438+
const { px, py, d: dd } = project(x*1.5,y*1.5,age*2-1,w,h,8,15);
3439+
const hu=(age*288)%360;
3440+
const li=12+(1-age)*25;
3441+
ctx.fillStyle = hsl(hu,70,li,0.35*dd*(1-age*0.5));
3442+
ctx.beginPath();ctx.arc(px,py,Math.max(0.3,0.7*dd),0,Math.PI*2);ctx.fill();
3443+
}
3444+
// Draw circles (dim)
3445+
for (let n=1;n<=5;n++) {
3446+
const r=3/n*1.5;
3447+
for (let j=0;j<40;j++) {
3448+
const a=j/40*Math.PI*2;
3449+
const { px, py, d: dd } = project(r*Math.cos(a),r*Math.sin(a),0,w,h,8,15);
3450+
ctx.fillStyle = hsl(0,0,8,0.15*dd);
3451+
ctx.beginPath();ctx.arc(px,py,0.3,0,Math.PI*2);ctx.fill();
3452+
}
3453+
}
3454+
}
3455+
34173456
function drawAudioTerrain() {
34183457
const { ctx, w, h } = setupCanvas('c-audioterrain');
34193458
for (let i=0;i<5000;i++) {
@@ -4385,7 +4424,7 @@ <h1>GPU Particle Animations</h1>
43854424
heading += (Math.random()-0.5) * 0.8;
43864425
}
43874426
const { px, py, d: dd } = project(x*1.3, y*1.3, z*1.3, w, h, 4, 22);
4388-
const hu = (heading / 6.28 * 114 + 108) % 360;
4427+
const hu = (heading / 6.28 * 115 + 108) % 360;
43894428
ctx.fillStyle = hsl(hu, 60, 27, 0.3*dd);
43904429
ctx.beginPath();
43914430
ctx.arc(px, py, Math.max(0.3, 0.7*dd), 0, Math.PI*2);
@@ -4747,6 +4786,7 @@ <h1>GPU Particle Animations</h1>
47474786
'c-doppler': drawDoppler, 'c-coralreef': drawCoralReef,
47484787
'c-plasmainstab': drawPlasmaInstab,
47494788
'c-audioterrain': drawAudioTerrain,
4789+
'c-fourier': drawFourier,
47504790
};
47514791

47524792
// Redraw on resize

‎sitemap.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,4 +120,5 @@
120120
<url><loc>https://danlex.github.io/particles/coral-reef.html</loc><lastmod>2026-04-08</lastmod><priority>0.8</priority></url>
121121
<url><loc>https://danlex.github.io/particles/plasma-instability.html</loc><lastmod>2026-04-08</lastmod><priority>0.8</priority></url>
122122
<url><loc>https://danlex.github.io/particles/audio-terrain.html</loc><lastmod>2026-04-08</lastmod><priority>0.8</priority></url>
123+
<url><loc>https://danlex.github.io/particles/fourier-epicycles.html</loc><lastmod>2026-04-08</lastmod><priority>0.8</priority></url>
123124
</urlset>

0 commit comments

Comments
 (0)