<?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: Muhammad Usman</title>
    <description>The latest articles on DEV Community by Muhammad Usman (@muhmdusman).</description>
    <link>https://dev.to/muhmdusman</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%2F3993988%2F408fe3e1-5f89-442c-8dd5-0f61c6f6b9e9.png</url>
      <title>DEV Community: Muhammad Usman</title>
      <link>https://dev.to/muhmdusman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/muhmdusman"/>
    <language>en</language>
    <item>
      <title>HELIOS — The Longest Day: building computation out of sunlight</title>
      <dc:creator>Muhammad Usman</dc:creator>
      <pubDate>Sat, 20 Jun 2026 16:32:23 +0000</pubDate>
      <link>https://dev.to/muhmdusman/helios-the-longest-day-building-computation-out-of-sunlight-k9m</link>
      <guid>https://dev.to/muhmdusman/helios-the-longest-day-building-computation-out-of-sunlight-k9m</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission 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;&lt;strong&gt;HELIOS — The Longest Day&lt;/strong&gt; is a real-time light-routing logic puzzle. On the longest day of the year, sunlight is your only tool: you bend the sun's beam with mirrors, divide it with splitters, and channel it through &lt;strong&gt;optical logic gates&lt;/strong&gt; to wake dormant crystals before the sun sets.&lt;/p&gt;

&lt;p&gt;The goal was to fuse the two themes into a single mechanic instead of bolting them together:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🌅 &lt;strong&gt;Solstice&lt;/strong&gt; — light is the resource, the sun's arc across the sky is your timer, and dusk is the fail state.&lt;/li&gt;
&lt;li&gt;🧠 &lt;strong&gt;Turing&lt;/strong&gt; — you literally &lt;em&gt;build computation out of light&lt;/em&gt;, gate by gate. The final level has you wire up a working logic circuit to wake "the Oracle" — a machine that thinks.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So it's not light-as-decoration. Light &lt;strong&gt;is&lt;/strong&gt; the gameplay, and logic gates &lt;strong&gt;are&lt;/strong&gt; the core mechanic.&lt;/p&gt;

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

&lt;p&gt;&lt;em&gt;Note: the video has no sound, so here's exactly what you're watching:&lt;/em&gt;&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
    &lt;div class="c-embed__content"&gt;
      &lt;div class="c-embed__body flex items-center justify-between"&gt;
        &lt;a href="https://github-production-user-asset-6210df.s3.amazonaws.com/243313993/610794530-7841ffe1-16b5-4173-b221-1d0726ebb035.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;amp;X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20260620%2Fus-east-1%2Fs3%2Faws4_request&amp;amp;X-Amz-Date=20260620T163546Z&amp;amp;X-Amz-Expires=300&amp;amp;X-Amz-Signature=1e37f4ee03866df1e668f008a632fdc49285a883eebe8c19fa0f12e13e001878&amp;amp;X-Amz-SignedHeaders=host&amp;amp;response-content-type=video%2Fwebm" rel="noopener noreferrer" class="c-link fw-bold flex items-center"&gt;
          &lt;span class="mr-2"&gt;github-production-user-asset-6210df.s3.amazonaws.com&lt;/span&gt;
          

        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;☀️ A level loads — a sun emitter fires a beam toward a dark crystal&lt;/li&gt;
&lt;li&gt;🪞 I &lt;strong&gt;drag a mirror&lt;/strong&gt; onto the grid to bend the beam 90°, then &lt;strong&gt;click it to rotate&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;💎 The crystal &lt;strong&gt;lights up green&lt;/strong&gt; the instant the beam reaches it&lt;/li&gt;
&lt;li&gt;🔀 Later levels add &lt;strong&gt;splitters&lt;/strong&gt; (one beam becomes two) and &lt;strong&gt;logic gates&lt;/strong&gt; (AND, OR, XOR, NOT, NAND, NOR)&lt;/li&gt;
&lt;li&gt;🧩 The final level wires up a circuit to wake &lt;strong&gt;the Oracle&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;🌇 The &lt;strong&gt;sky darkens&lt;/strong&gt; the whole time — that's the daylight clock counting down&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;▶️ Play it live:&lt;/strong&gt; &lt;a href="https://muhmdusman.github.io/solistice-game/" rel="noopener noreferrer"&gt;https://muhmdusman.github.io/solistice-game/&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/muhmdusman" rel="noopener noreferrer"&gt;
        muhmdusman
      &lt;/a&gt; / &lt;a href="https://github.com/muhmdusman/solistice-game" rel="noopener noreferrer"&gt;
        solistice-game
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &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;HELIOS — The Longest Day&lt;/h1&gt;
&lt;/div&gt;
&lt;blockquote&gt;
&lt;p&gt;A light-routing logic puzzle for the &lt;strong&gt;June Solstice Game Jam&lt;/strong&gt;. Bend sunlight with mirrors, divide it with splitters, and channel it through &lt;strong&gt;optical logic gates&lt;/strong&gt; to wake the crystals — and finally, the Oracle. An ode to Alan Turing, built from pure light.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/b3a47f568ea38c3f87b73324d3ee453cd1370c427f62db3c1458be2c7e070cdd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a756e655f536f6c73746963652d47616d655f4a616d2d666663653761"&gt;&lt;img src="https://camo.githubusercontent.com/b3a47f568ea38c3f87b73324d3ee453cd1370c427f62db3c1458be2c7e070cdd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4a756e655f536f6c73746963652d47616d655f4a616d2d666663653761" alt="Made for the June Solstice Game Jam"&gt;&lt;/a&gt; &lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/14677b36625a104925b2341558315114ecf44ff82cfc35a027494c303f5fd4cd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4275696c745f776974682d56616e696c6c615f4a532d663662383565"&gt;&lt;img src="https://camo.githubusercontent.com/14677b36625a104925b2341558315114ecf44ff82cfc35a027494c303f5fd4cd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4275696c745f776974682d56616e696c6c615f4a532d663662383565" alt="Vanilla JS"&gt;&lt;/a&gt; &lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/256a0b633a0a88acb41a03df0ef552bc9eab6cd242796bea178e4422400373f4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d366566306136"&gt;&lt;img src="https://camo.githubusercontent.com/256a0b633a0a88acb41a03df0ef552bc9eab6cd242796bea178e4422400373f4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d366566306136" alt="License: MIT"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;What I Built&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;HELIOS — The Longest Day&lt;/strong&gt; is a real-time puzzle game where &lt;strong&gt;sunlight is the only tool you have&lt;/strong&gt;. On the longest day of the year, you guide the sun's beam across a grid using mirrors and beam-splitters, and route it through &lt;strong&gt;optical logic gates&lt;/strong&gt; — AND, OR, XOR, and NOT — to light up dormant crystals before the sun sets.&lt;/p&gt;
&lt;p&gt;The twist that ties the whole thing together: you aren't just solving mazes. You're &lt;strong&gt;building computation out of light&lt;/strong&gt;. Each level asks you to assemble a small logic circuit, and the final level — &lt;em&gt;The Oracle&lt;/em&gt;…&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/muhmdusman/solistice-game" 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;It's pure &lt;strong&gt;vanilla JavaScript + HTML5 Canvas&lt;/strong&gt; — no frameworks, no build step, and no asset files (even the sound is synthesized at runtime with the Web Audio API). The whole game is a tiny, self-contained bundle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The interesting technical part — simulating light as a circuit:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A simple beam-tracer is easy. The hard part is that &lt;strong&gt;gates can feed other gates&lt;/strong&gt;, and beams can loop through mirrors. A gate's output depends on its inputs, which may depend on &lt;em&gt;another&lt;/em&gt; gate's output. That's not a straight line — it's a circuit.&lt;/p&gt;

&lt;p&gt;So the engine &lt;strong&gt;iterates to a fixpoint&lt;/strong&gt;, exactly like simulating real digital logic:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Assume every gate is off, trace all beams&lt;/li&gt;
&lt;li&gt;Re-check each gate based on the light now hitting it&lt;/li&gt;
&lt;li&gt;Re-trace — repeat until nothing changes (the circuit &lt;em&gt;settles&lt;/em&gt;)&lt;/li&gt;
&lt;li&gt;If it never settles, flag it as &lt;em&gt;unstable&lt;/em&gt; instead of hanging
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Iterate gate states until the circuit reaches a stable fixpoint.&lt;/span&gt;
&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;maxIter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;changed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;g&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;gates&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;gatePorts&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;g&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;gateType&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;g&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dir&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;bits&lt;/span&gt;  &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;ports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;inputs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;!!&lt;/span&gt;&lt;span class="nx"&gt;trace&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;gateInputs&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;g&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;][&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt;   &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;evalGate&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;g&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;gateType&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;bits&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;g&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;out&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;gateOn&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;g&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="nx"&gt;changed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="nx"&gt;gateOn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;trace&lt;/span&gt;  &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;traceBeams&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;board&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;gateOn&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;changed&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;       &lt;span class="c1"&gt;// settled ✅&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Making the puzzles provably fair:&lt;/strong&gt; I built the engine to run headlessly in Node, then wrote a brute-force validator that tries every piece placement on all 10 levels and confirms each one is &lt;strong&gt;solvable&lt;/strong&gt; and &lt;strong&gt;not already solved at the start&lt;/strong&gt;. It caught a real bug — one level was accidentally pre-solved before the player touched it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Project structure:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;js/light.js&lt;/code&gt; — the optical simulation engine (ray-tracing + fixpoint gate solver)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;js/levels.js&lt;/code&gt; — 10 hand-designed, validated puzzles&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;js/render.js&lt;/code&gt; — Canvas renderer with animated, flowing beams&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;js/sky.js&lt;/code&gt; — the animated dawn-to-dusk solstice sky&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;js/game.js&lt;/code&gt; — game loop, input, scoring&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;tools/validate-levels.js&lt;/code&gt; — the solvability prover&lt;/li&gt;
&lt;/ul&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;This is the soul of the project. Turing's foundational insight was that computation is &lt;em&gt;substrate-independent&lt;/em&gt; — it doesn't matter whether logic is built from relays, valves, or beams of light. HELIOS lets you &lt;em&gt;feel&lt;/em&gt; that idea:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The core mechanic is building working &lt;strong&gt;logic gates&lt;/strong&gt; (including NAND, the universal gate from which any circuit can be built)&lt;/li&gt;
&lt;li&gt;The campaign escalates from "bend one beam" to "assemble a logic circuit"&lt;/li&gt;
&lt;li&gt;The finale wakes &lt;strong&gt;the Oracle&lt;/strong&gt; — a machine that reasons — and the game closes on Turing's 1950 line: &lt;em&gt;"We can only see a short distance ahead, but we can see plenty there that needs to be done."&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;The horizon silhouette is a nod to the huts of Bletchley Park, where Turing worked&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;🤖 Best Google AI Usage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I used &lt;strong&gt;Google's Gemini&lt;/strong&gt; as a development collaborator throughout the build:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I used &lt;strong&gt;Gemini&lt;/strong&gt; to pressure-test the design — talking through how to fuse the solstice and Turing themes into one mechanic rather than two separate gimmicks&lt;/li&gt;
&lt;li&gt;I leaned on it to reason about the trickiest engineering problem: how to correctly simulate logic gates that feed into each other, which led to the &lt;strong&gt;fixpoint iteration&lt;/strong&gt; approach in the engine&lt;/li&gt;
&lt;li&gt;I used it to help shape the headless test strategy and the brute-force level validator that proves every puzzle is fair&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for reading, and happy solstice. 🌞 Built with vanilla JS, HTML5 Canvas, and the Web Audio API. Licensed MIT.&lt;/p&gt;

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