Work

Flux2D — A Real‑Time Particle Simulation Engine

A falling-sand particle simulation with 52 elements across 7 categories — physics, chemistry, and biology all running at 60fps in pure vanilla JavaScript and HTML5 Canvas. Zero dependencies, zero build tools, zero frameworks.

Role

Solo Developer

Year

2025

Source

GitHub
Screenshot 1
Screenshot 2
Screenshot 3
1/3
52 Elements
7 Categories
0 Dependencies
60 Target FPS
JavaScript94.2%
CSS3.9%
HTML1.9%
JavaScriptHTML5 CanvasCSS

What It Does

Flux2D lets you paint elements onto a canvas and watch physics, chemistry, and biological systems interact in real-time. Powders fall, liquids flow, gases rise, fire spreads, plants grow from seeds, and chain reactions cascade — all driven by a cellular automaton grid running at 60fps with a single putImageData() call per frame.

How It Works

Parallel typed arrays (Uint8Array / Int16Array) replace per-cell objects for cache-friendly access and zero garbage collection overhead. Horizontal scan direction alternates every tick to prevent directional bias. Bresenham line interpolation fills paint gaps for smooth brush strokes.

Physics: density-based displacement, temperature conduction, and phase transitions (ice → water → steam). Chemistry: per-element reaction maps with chain reactions (gunpowder igniting methane). Biology: seed-based plant growth, moss colonization, algae blooms, and fungal spreading.

Key Features

  • 52 elements across Solids, Powders, Liquids, Gases, Life, Energy, and Tools
  • 5 pre-built templates — Volcano, Aquarium, Explosion Lab, Zen Garden, Winterscape
  • Direct pixel buffer rendering — ImageData manipulation, no DOM overhead
  • Touch support with configurable circular brush (1–20px radius)
  • Pause / step / speed controls with live FPS and particle counters