Zola 2025-08-24T00:00:00+00:00 /atom.xml Chladni Figures 2025-08-24T00:00:00+00:00 2025-08-24T00:00:00+00:00 Unknown /posts/chladni/ <link rel="stylesheet" href="./chladni.css">  <div class="canvas-container"> <canvas id="main-canvas" class="art-canvas"/> </div> <div id="video-fallback"> <video class="art-canvas" controls> <source src="/posts/chladni/chladni_bevy.mp4" type="video/mp4"> </video> <div class="hint"> <span class="hint-text">Hint:</span> Load this page in a WebGPU-supported browser to control a live simulation! </div> </div> <script type="module"> import init from '/posts/chladni/chladni.js' async function isWebgpuSupported() { if (!navigator.gpu) { return false; } try { const adapter = await navigator.gpu.requestAdapter(); return adapter !== null; } catch (err) { return false; } } isWebgpuSupported().then((supported) => { if (supported) { document.getElementById("video-fallback").hidden = true; init(); } else { document.getElementsByClassName("canvas-container")[0].hidden = true } }); </script> <br> <p>Draw on the canvas to place/remove constraints:</p> <ul> <li>Left click: Place a wall constraint (prevents the plate underneath from moving)</li> <li>Right click: Place an oscillator constraint (Forces the plate to move up and down)</li> <li>Middle click: Clear constraint</li> </ul> <p>You can adjust the frequency of oscillators using "brush frequency" slider at the bottom.</p> <hr/> <p>This is a little simulation of Chladni patterns in <a rel="external" href="https://bevy.org">Bevy</a>, using compute shaders for the plate simulation and <a rel="external" href="https://github.com/laundmo/bevy-spatial">bevy_spatial</a> for the particles.</p> <p><a rel="external" href="https://en.wikipedia.org/wiki/Ernst_Chladni#Chladni_figures">Chladni figures</a> are patterns obtained by placing sand on a metal plate, and vibrating it.</p> <div class="quote"> <p class="quote-body">When resonating, a plate or membrane is divided into regions that vibrate in opposite directions, bounded by lines where no vibration occurs (nodal lines).</p> <span class="quote-source"> https://en.wikipedia.org/wiki/Ernst_Chladni#Chladni_figures</span> </div> <p>The sand will naturally be pushed toward the nodal lines, making the figures appear.</p> <p>Depending on how you constrain the movement of the plate (e.g. pressing it down with your fingers), these regions will change and you can get a variety of different patterns.</p> <br> <img style="display: block; margin-left: auto; margin-right: auto; width: 50%;" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Bowing_chladni_plate.png" title="Chladni plate diagram" alt="A horizontal plate of metal with sand on top. Chladni's left middle finger & thumb press on the side of the plate. With his right hand, he bows the side of the plate using a violin bow."/> <br> <p>There are two parts to this simulation:</p> <ul> <li>The plate: Represented as a 128x128 square grid, where each cell stores its elevation and velocity</li> <li>The sand: A bunch of little sprites</li> </ul> <h2 id="the-plate">The plate</h2> <p>The plate is represented as a texure, with only a red and green channel, corresponding to elevation & velocity respectively. It is simulated within a compute shader, and each point feels a force from its 4 neighbors.</p> <pre class="giallo" style="color: #BFBDB6; background-color: #0D1017;"><code data-lang="wgsl"><span class="giallo-l"><span style="color: #5A6673;font-style: italic;">// get the data of the current cell</span></span> <span class="giallo-l"><span style="color: #FF8F40;">let</span><span> data</span><span style="color: #F29668;"> =</span><span style="color: #FFB454;"> textureLoad</span><span>(input, location);</span></span> <span class="giallo-l"><span style="color: #FF8F40;">var</span><span> pos</span><span style="color: #F29668;"> =</span><span> data</span><span style="color: #F29668;">.</span><span>r;</span></span> <span class="giallo-l"><span style="color: #FF8F40;">var</span><span> vel</span><span style="color: #F29668;"> =</span><span> data</span><span style="color: #F29668;">.</span><span>g;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #5A6673;font-style: italic;">// sample the 4 directions around the current cell</span></span> <span class="giallo-l"><span style="color: #FF8F40;">for</span><span> (</span><span style="color: #FF8F40;">var</span><span> i: </span><span style="color: #FF8F40;">i32</span><span style="color: #F29668;"> =</span><span style="color: #D2A6FF;"> 0</span><span>; i <</span><span style="color: #D2A6FF;"> 4</span><span>; i</span><span style="color: #F29668;">++</span><span>) {</span></span> <span class="giallo-l"><span style="color: #FF8F40;"> let</span><span> t</span><span style="color: #F29668;"> =</span><span style="color: #FFB454;"> f32</span><span>(i)</span><span style="color: #F29668;"> /</span><span style="color: #D2A6FF;"> 4.0</span><span style="color: #F29668;"> *</span><span style="color: #59C2FF;"> TAU</span><span>;</span></span> <span class="giallo-l"><span style="color: #FF8F40;"> let</span><span> d</span><span style="color: #F29668;"> =</span><span style="color: #FFB454;"> vec2f</span><span>(</span><span style="color: #FFB454;">cos</span><span>(t),</span><span style="color: #FFB454;"> sin</span><span>(t));</span></span> <span class="giallo-l"><span style="color: #FF8F40;"> let</span><span> other_data</span><span style="color: #F29668;"> =</span><span style="color: #FFB454;"> sample_input</span><span>(loc</span><span style="color: #F29668;"> +</span><span> d);</span></span> <span class="giallo-l"><span style="color: #FF8F40;"> let</span><span> other_pos</span><span style="color: #F29668;"> =</span><span> other_data</span><span style="color: #F29668;">.</span><span>r;</span></span> <span class="giallo-l"><span style="color: #FF8F40;"> let</span><span> weight</span><span style="color: #F29668;"> =</span><span> other_data</span><span style="color: #F29668;">.</span><span>g;</span></span> <span class="giallo-l"><span style="color: #5A6673;font-style: italic;"> // apply a force if the other cell is at a different elevation</span></span> <span class="giallo-l"><span> vel</span><span style="color: #F29668;"> +=</span><span> (other_pos</span><span style="color: #F29668;"> -</span><span> pos)</span><span style="color: #F29668;"> *</span><span style="color: #59C2FF;"> TENSION</span><span style="color: #F29668;"> *</span><span> weight;</span></span> <span class="giallo-l"><span>}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #5A6673;font-style: italic;">// integrate velocity</span></span> <span class="giallo-l"><span>pos</span><span style="color: #F29668;"> +=</span><span> vel</span><span style="color: #F29668;"> *</span><span style="color: #59C2FF;"> DT</span><span>;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #5A6673;font-style: italic;">// store the updated cell data</span></span> <span class="giallo-l"><span style="color: #FFB454;">textureStore</span><span>(output, location,</span><span style="color: #FFB454;"> vec4f</span><span>(</span><span style="color: #FFB454;">vec2f</span><span>(pos, vel),</span><span style="color: #D2A6FF;"> 0.0</span><span>,</span><span style="color: #D2A6FF;"> 0.0</span><span>));</span></span></code></pre> <p>The <code>sample_input</code> function will return two values packed as a vec2f:</p> <ul> <li>the red channel is position</li> <li>the green channel is the weight of the connection. If it is <code>0.0</code>, this neighbor will not be connected to the current cell.</li> </ul> <p>At the boundaries, <code>sample_input</code> returns a returns a connection weight of <code>0.0</code>.</p> <h3 id="constraints">Constraints</h3> <p>One important aspect to the diversity of these patterns is the way that the plate is constrained. There are three cases:</p> <ul> <li>In some parts, the plate will be totally unconstrained, free to simply follow the movement of its neighbors</li> <li>In other parts, the plate might be pressed down with fingers or clamps, forcing it to have a fixed position and velocity</li> <li>In other parts, the plate might be bowed, resulting in an oscillation</li> </ul> <p>To reflect this, we encode constraints as a separate float texture with a single channel:</p> <ul> <li>If a cell has a constraint value of <code>-1.0</code>, it is unconstrained.</li> <li>Otherwise, its position will be given by <code>sin(time * TAU * constraint_value)</code>. <ul> <li>This means that we can fix a cell in place by giving it a constraint value of <code>0.0</code></li> <li>And that we can force it to oscillate by setting it to any positive value</li> </ul> </li> </ul> <h2 id="the-sand">The sand</h2> <p>The second component of this simulation is the sand particles.<br /> They follow very simple rules</p> <h4 id="go-where-the-plate-moves-the-least">Go where the plate moves the least</h4> <p>The plate oscillates above and below zero, therefore we take the absolute value of the elevation.<br /> We then take the gradient of it at the sand particle's position. This gives us a vector going toward the biggest elevation offset from zero.<br /> We move the sand particle in the opposite direction to that gradient.</p> <h4 id="move-away-from-other-sand-particles">Move away from other sand particles</h4> <p>To avoid them clumping up in the same location, we apply a small force to push them away from each other.<br /> It would be very expensive to naively compute the repulsive force of every particle against every other particle. Thankfully <a rel="external" href="https://docs.rs/bevy_spatial/latest/bevy_spatial/">bevy_spatial</a> lets us efficiently query the K nearest neighbors of a given particle by keeping all positions in a spatial datastructure.</p> <h4 id="stay-on-the-plate">Stay on the plate</h4> <p>Lastly, if a particle falls off the plate, we teleport it back to a random location</p> <h2 id="source-code">Source code</h2> <p>You can find the full source code here! <a rel="external" href="https://codeberg.org/Azorlogh/chladni_figures/">https://codeberg.org/Azorlogh/chladni_figures</a></p> S P E E E D 2024-09-22T00:00:00+00:00 2024-09-22T00:00:00+00:00 Unknown /games/speeed/ <script type="module"> import init from '/games/speeed/speeed.js' let btn = document.getElementById("start-game-btn"); btn.addEventListener("click", () => { init() }) </script> <h3 id="controls">Controls</h3> <p>Move - Left/Right arrows<br /> Jump - Space<br /> Slam - Down arrow</p> <div class="hint"> <span class="hint-text">Hint:</span> You can rebind the keys! </div> Floral Maze 2023-09-22T00:00:00+00:00 2023-09-22T00:00:00+00:00 Unknown /posts/floral-maze/ <div class="canvas-container"> <canvas id="main-canvas" class="art-canvas"></canvas> </div> <script type="module"> import init from '/gallery/floral/floral.js' init() </script> <div class="hint"> <span class="hint-text">Hint:</span> Refresh the page for more patterns! </div> <p>This is a fun generative art piece I made inspired by plant growth and the emerging patterns in nature that arise from simple rules.</p> <p>The working principle is based on agents traversing a square grid, leaving a trail as they move. There are different types of agents, each with their own sets of rules. One such rule is that they are never allowed to cross a previous path, which forces this maze-like formation.</p> <p>There are a couple key aspect that really make this work.</p> <h3 id="inheriting-the-rng">Inheriting the RNG</h3> <p>Agents move randomly according to a pseudo-random number generator (PRNG).</p> <p>Those number generators have an internal state the dictates which outcome they will choose when you request a number, and whenever you do, the internal state changes in a deterministic way.</p> <p>Each individual agent has its own PRNG, and every time the agent splits (or branches off), it's copied over to the agent's children, and therefore they will produce the same sorts of patterns (that is, until they diverge due differences in their environment).</p> <p>All of the agents' actions are taken relative to their heading direction (turn left, turn right, move forward). To enable more symmetries, their direction is not only represented as a rotation, but a chirality as well (clock-wise or counter-clockwise). Thus the direction can be represented by the <a rel="external" href="https://en.wikipedia.org/wiki/Examples_of_groups#dihedral_group_of_order_8">dihedral group Dih<sub>4</sub></a>.</p> <p>One very neat aspect of this inheritance mechanism is that it enables many scales of symmetry: Typically, the first agent will quickly split, and since there aren't many paths yet, they will be able to produce large patterns without diverging, resulting in very large-scale symmetries. However, the agents could also quickly collide and diverge, producing more chaotic patterns.</p> <h3 id="mutation">Mutation</h3> <p>Even with symmetry and randomness, results can still look too bland and predictable. This is where the second aspect comes into play: The genetic code.</p> <p>Agents are associated with a piece of genetic code which describes their preferred behavior (e.g. likes to turn a lot, prefers horizontal lines, produces fewer branches, etc.) As time moves forward, the genome of agents sporadically mutates according to its random number generator, leading to different regions of the board having different visual properties.</p>