<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kamran Shahzad</title>
    <description>The latest articles on DEV Community by Kamran Shahzad (@ikamranshahzad).</description>
    <link>https://dev.to/ikamranshahzad</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3993920%2F1af087f0-d5ea-493b-8b25-95ada252462e.jpg</url>
      <title>DEV Community: Kamran Shahzad</title>
      <link>https://dev.to/ikamranshahzad</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ikamranshahzad"/>
    <language>en</language>
    <item>
      <title>Morphogenesis - A Solstice Parade</title>
      <dc:creator>Kamran Shahzad</dc:creator>
      <pubDate>Sat, 20 Jun 2026 23:44:21 +0000</pubDate>
      <link>https://dev.to/ikamranshahzad/morphogenesis-a-solstice-parade-582n</link>
      <guid>https://dev.to/ikamranshahzad/morphogenesis-a-solstice-parade-582n</guid>
      <description>&lt;h2&gt;
  
  
  Morphogenesis — A Solstice Parade
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Submitted for the &lt;a href="https://dev.to/challenges/june-game-jam-2026-06-03"&gt;June Solstice Game Jam&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;A browser game about sorting a parade before the longest day runs out.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The thing that makes it weird (in a good way): every cyclist's costume is a &lt;strong&gt;live Turing reaction–diffusion pattern&lt;/strong&gt; — 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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;🎮 &lt;strong&gt;&lt;a href="https://morphogenesis.vercel.app/" rel="noopener noreferrer"&gt;Play → morphogenesis.vercel.app&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Video Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=52sb476amuM" rel="noopener noreferrer"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/iKamranShahzad" rel="noopener noreferrer"&gt;
        iKamranShahzad
      &lt;/a&gt; / &lt;a href="https://github.com/iKamranShahzad/morphogenesis" rel="noopener noreferrer"&gt;
        morphogenesis
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      A browser based game submission for June Solstice Game Jam
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;Morphogenesis — A Solstice Parade&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;A small browser game built for a Solstice Game Jam, themed on the &lt;strong&gt;Fremont Solstice Parade&lt;/strong&gt; and dedicated to &lt;strong&gt;Alan Turing&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;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 &lt;strong&gt;live Gray–Scott reaction–diffusion pattern&lt;/strong&gt; computed in real time from Turing's 1952 paper &lt;em&gt;The Chemical Basis of Morphogenesis&lt;/em&gt;.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Play&lt;/h2&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Drag&lt;/strong&gt; each marcher into their matching lane: bikes → bike lane, puppets → promenade, floats → avenue.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Right lane&lt;/strong&gt; = Joy, score, and a growing &lt;strong&gt;Flow&lt;/strong&gt; multiplier. &lt;strong&gt;Wrong lane&lt;/strong&gt; = Chaos, and it breaks your flow.&lt;/li&gt;
&lt;li&gt;A flowing, joyful parade literally scores more (radiance). If &lt;strong&gt;Chaos&lt;/strong&gt; hits 100, the parade collapses.&lt;/li&gt;
&lt;li&gt;Survive four escalating acts — &lt;em&gt;Gathering → Procession → Golden Hour → Sundown&lt;/em&gt; — and reach the bonfire.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Run it&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;npm install
npm run&lt;/pre&gt;…
&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/iKamranShahzad/morphogenesis" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;





&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;The engine and the UI are kept completely separate. The engine (&lt;code&gt;src/engine/ParadeGame.js&lt;/code&gt;) is plain JavaScript — no framework, just a &lt;code&gt;requestAnimationFrame&lt;/code&gt; 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. &lt;code&gt;App.jsx&lt;/code&gt; is just the glue between the two.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The reaction–diffusion part&lt;/strong&gt; was the most fun to figure out. Two &lt;code&gt;Float32Array&lt;/code&gt; buffers, ping-ponging each frame, running the Laplacian as a 2D convolution and mapping V-concentration to a color gradient. I tune &lt;code&gt;F&lt;/code&gt; and &lt;code&gt;k&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Scoring&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Audio&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;Vite + Vercel for the build. Fully static, no backend.&lt;/p&gt;




&lt;h2&gt;
  
  
  Prize Category
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Best Ode to Alan Turing&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The dedication screen inside the game reads:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;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.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Every pattern in the game is his math.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Vanilla JS · React · Vite · Web Audio API · Vercel&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gamechallenge</category>
      <category>gamedev</category>
    </item>
  </channel>
</rss>
