Skip to content

Commit e91acbe

Browse files
danlexclaude
danlex
and
claude
committed
Add #110 Predator-Prey: flocking prey evade hunting predators
90% prey flock toward a Lissajous center with cohesion, fleeing from 3 orbiting predators. The flock splits and reforms as predators approach. Cyan-green prey, red-orange predators. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent c476925 commit e91acbe

4 files changed

Lines changed: 553 additions & 16 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-109-brightgreen?style=flat-square)](https://danlex.github.io/particles/)
4+
[![Animations](https://img.shields.io/badge/Animations-110-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 **109 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 **110 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-
- **109 unique animations** across 13 categories
16+
- **110 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: 49 additions & 13 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 — 109 Interactive GPU Particle Animations | Three.js + WebGL</title>
9-
<meta name="title" content="Particles — 109 Interactive GPU Particle Animations | Three.js + WebGL">
10-
<meta name="description" content="Explore 109 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 — 110 Interactive GPU Particle Animations | Three.js + WebGL</title>
9+
<meta name="title" content="Particles — 110 Interactive GPU Particle Animations | Three.js + WebGL">
10+
<meta name="description" content="Explore 110 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 — 109 Interactive GPU Particle Animations">
23-
<meta property="og:description" content="Explore 109 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 — 110 Interactive GPU Particle Animations">
23+
<meta property="og:description" content="Explore 110 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 — 109 Interactive GPU Particle Animations">
34-
<meta name="twitter:description" content="Explore 109 interactive GPU particle animations. Strange attractors, fractals, physics sims, sacred geometry. 65K particles, fully GPU-computed.">
33+
<meta name="twitter:title" content="Particles — 110 Interactive GPU Particle Animations">
34+
<meta name="twitter:description" content="Explore 110 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 109 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 110 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 109 interactive GPU particle animations organized by category: strange attractors, fractals, physics simulations, sacred geometry, astrophysics, and more.",
75+
"description": "Browse 110 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-07" href="predator-prey.html">
326+
<div class="card-preview"><canvas id="c-predprey"></canvas><div class="play-hint"></div></div>
327+
<div class="card-info">
328+
<div class="card-title">Predator-Prey</div>
329+
<div class="card-desc">Prey flock together while predators hunt them. The flock splits, reforms, and evades in a Lotka-Volterra dance.</div>
330+
<div class="card-tags"><span class="card-tag">Ecology</span><span class="card-tag">Predator-Prey</span><span class="card-particles">65,536 particles</span></div>
331+
</div>
332+
</a>
333+
325334
<a class="card" data-created="2026-04-07" href="newtons-rings.html">
326335
<div class="card-preview"><canvas id="c-newtonrings"></canvas><div class="play-hint"></div></div>
327336
<div class="card-info">
@@ -2311,7 +2320,7 @@ <h1>GPU Particle Animations</h1>
23112320
const { ctx, w, h } = setupCanvas('c-ocean');
23122321
for (let i = 0; i < 6000; i++) {
23132322
const gx = (i % 80) / 80 * 30 - 15;
2314-
const gz = Math.floor(i / 80) / 109 * 30 - 15;
2323+
const gz = Math.floor(i / 80) / 110 * 30 - 15;
23152324
const phase1 = 1.0 * (gx*0.7 + gz*0.7);
23162325
const phase2 = 2.0 * (gx*0.9 - gz*0.4);
23172326
const y = 0.4*Math.sin(phase1) + 0.2*Math.sin(phase2) + 0.1*Math.sin(3*(-gx*0.3+gz*0.95));
@@ -3365,9 +3374,36 @@ <h1>GPU Particle Animations</h1>
33653374
drawPulsar(); drawSolarWind(); drawSorting(); drawBloodFlow();
33663375
drawProtein(); drawGravWaves(); drawOceanCurr(); drawMagReconn();
33673376
drawRayleigh(); drawDendrites(); drawPlates(); drawDiffusion();
3368-
drawNewtonRings();
3377+
drawNewtonRings(); drawPredPrey();
33693378
};
33703379

3380+
function drawPredPrey() {
3381+
const { ctx, w, h } = setupCanvas('c-predprey');
3382+
// Prey flock
3383+
for (let i=0;i<3500;i++) {
3384+
const a=Math.random()*Math.PI*2;
3385+
const p=Math.acos(2*Math.random()-1);
3386+
const r=0.5+Math.random()*2.5;
3387+
const x=r*Math.sin(p)*Math.cos(a);
3388+
const y=r*Math.cos(p);
3389+
const z=r*Math.sin(p)*Math.sin(a);
3390+
const { px, py, d: dd } = project(x,y,z,w,h,12,18);
3391+
ctx.fillStyle = hsl(162, 60, 24, 0.3*dd);
3392+
ctx.beginPath();ctx.arc(px,py,Math.max(0.3,0.6*dd),0,Math.PI*2);ctx.fill();
3393+
}
3394+
// Predators
3395+
for (let i=0;i<300;i++) {
3396+
const a=Math.random()*Math.PI*2;
3397+
const r=6+Math.random()*3;
3398+
const x=r*Math.cos(a);
3399+
const y=(Math.random()-0.5)*4;
3400+
const z=r*Math.sin(a);
3401+
const { px, py, d: dd } = project(x,y,z,w,h,12,18);
3402+
ctx.fillStyle = hsl(11, 70, 37, 0.5*dd);
3403+
ctx.beginPath();ctx.arc(px,py,Math.max(0.5,1.0*dd),0,Math.PI*2);ctx.fill();
3404+
}
3405+
}
3406+
33713407
function drawNewtonRings() {
33723408
const { ctx, w, h } = setupCanvas('c-newtonrings');
33733409
const c1=[0,0],c2=[-2.5,-3],c3=[1,3.5];
@@ -4210,7 +4246,7 @@ <h1>GPU Particle Animations</h1>
42104246
heading += (Math.random()-0.5) * 0.8;
42114247
}
42124248
const { px, py, d: dd } = project(x*1.3, y*1.3, z*1.3, w, h, 4, 22);
4213-
const hu = (heading / 6.28 * 109 + 108) % 360;
4249+
const hu = (heading / 6.28 * 110 + 108) % 360;
42144250
ctx.fillStyle = hsl(hu, 60, 27, 0.3*dd);
42154251
ctx.beginPath();
42164252
ctx.arc(px, py, Math.max(0.3, 0.7*dd), 0, Math.PI*2);
@@ -4568,7 +4604,7 @@ <h1>GPU Particle Animations</h1>
45684604
'c-oceancurr': drawOceanCurr, 'c-magreconn': drawMagReconn,
45694605
'c-rayleigh': drawRayleigh, 'c-dendrites': drawDendrites,
45704606
'c-plates': drawPlates, 'c-diffusion': drawDiffusion,
4571-
'c-newtonrings': drawNewtonRings,
4607+
'c-newtonrings': drawNewtonRings, 'c-predprey': drawPredPrey,
45724608
};
45734609

45744610
// Redraw on resize

0 commit comments

Comments
 (0)