Morphogenesis — A Solstice Parade
Submitted for the June Solstice Game Jam
What I Built
A browser game about sorting a parade before the longest day runs out.
You drag marchers — cyclists, pole-puppets, sun-floats — into their correct lanes. Right lane: Joy goes up, your Flow multiplier grows. Wrong lane: Chaos ticks up. Hit 100 Chaos and the parade collapses. Four acts, each faster than the last. Reach the bonfire.
The thing that makes it weird (in a good way): every cyclist's costume is a live Turing reaction–diffusion pattern — the Gray–Scott equations running frame-by-frame in the browser. Not a texture. An actual simulation, from the same 1952 paper Turing published the year he was prosecuted. The spots and stripes you see are the same mathematics behind leopard spots and coral growth.
The Fremont Solstice Parade is a celebration of showing up exactly as you are. Turing's equations are literally the science of how living things take their shapes. Putting those two things together for a solstice jam felt obvious once I saw it.
🎮 Play → morphogenesis.vercel.app
Video Demo
Code
iKamranShahzad
/
morphogenesis
A browser based game submission for June Solstice Game Jam
Morphogenesis — A Solstice Parade
A small browser game built for a Solstice Game Jam, themed on the Fremont Solstice Parade and dedicated to Alan Turing.
Sort marchers — cyclists, pole-puppets, and sun-floats — into their matching lanes and carry the parade to the bonfire before the longest day burns out. Every cyclist wears a live Gray–Scott reaction–diffusion pattern computed in real time from Turing's 1952 paper The Chemical Basis of Morphogenesis.
Play
- Drag each marcher into their matching lane: bikes → bike lane, puppets → promenade, floats → avenue.
- Right lane = Joy, score, and a growing Flow multiplier. Wrong lane = Chaos, and it breaks your flow.
- A flowing, joyful parade literally scores more (radiance). If Chaos hits 100, the parade collapses.
- Survive four escalating acts — Gathering → Procession → Golden Hour → Sundown — and reach the bonfire.
Run it
npm install
npm run…How I Built It
The engine and the UI are kept completely separate. The engine (src/engine/ParadeGame.js) is plain JavaScript — no framework, just a requestAnimationFrame loop, typed arrays for the simulation, and Web Audio for sound. React handles every overlay: the HUD, act banners, menus. It never touches the canvas. App.jsx is just the glue between the two.
The reaction–diffusion part was the most fun to figure out. Two Float32Array buffers, ping-ponging each frame, running the Laplacian as a 2D convolution and mapping V-concentration to a color gradient. I tune F and k slightly per marcher type so each lane has its own visual fingerprint — same code, different parameters, wildly different patterns. Runs at 60fps for ~15 simultaneous marchers without breaking a sweat.
Scoring is built around the Flow multiplier. Consecutive correct placements grow it up to 4×; one wrong placement resets it. So as the acts speed up, you're making real trade-offs — let a tricky marcher scroll off (small Chaos hit) rather than risk misplacing it and losing a 4× streak.
Audio is all Web Audio API synthesis — no files. Correct placements get a pentatonic chime, wrong ones get a low thud. The background drone shifts pitch and filter cutoff with the Joy/Chaos ratio. A joyful parade sounds noticeably healthier than a chaotic one.
Vite + Vercel for the build. Fully static, no backend.
Prize Category
Best Ode to Alan Turing
The game is dedicated to him. The patterns on every marcher's costume are a direct implementation of his 1952 morphogenesis model — published the same year the British government prosecuted him for being gay. He died two years later.
The dedication screen inside the game reads:
For Alan Turing (1912–1954), prosecuted in 1952 for being different. The patterns his equations describe are everywhere in living things — a celebration of the freedom to be seen exactly as you are.
Every pattern in the game is his math.
Vanilla JS · React · Vite · Web Audio API · Vercel
