https://github.com/fildon/triangular-rain
https://github.com/fildon/triangular-rain
Last synced: 16 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/fildon/triangular-rain
- Owner: fildon
- Created: 2026-06-14T08:41:19.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-14T09:02:34.000Z (about 2 months ago)
- Last Synced: 2026-06-14T10:22:19.289Z (about 2 months ago)
- Language: TypeScript
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Triangular Rain
A generative art piece that builds a Sierpiński gasket stochastically, one raindrop at a time.
**[Live demo →](https://rupertmckay.com/triangular-rain)**
## How it works
Generation starts with a hollow inverted equilateral triangle (base at top, apex at bottom). At each step:
1. A random point is chosen from the union of all horizontal line segments, weighted by length.
2. Two rays fire downward from that point at 60° spread — the base angles of an equilateral triangle.
3. Whichever ray hits an existing line first determines the stopping depth; both rays stop at that same height.
4. The three vertices are joined and the resulting downward-pointing triangle is filled black.
Repeat. Over many iterations the filled triangles converge on the Sierpiński gasket. The animation runs until no remaining gaps are large enough to produce a visible triangle (sub-pixel threshold), at which point the piece is complete.
Click anywhere to restart with a new random sequence.
## Tech
- [Vite](https://vite.dev/) + TypeScript
- HTML Canvas (no runtime dependencies)
## Run locally
```bash
npm install
npm run dev
```
## Build
```bash
npm run build
```