napplet.soy
Create a napplet
Back to Powder Tool
SOURCE / PINNED RELEASE

Made of little things.

Powder Tool

Release
242076e6da24…
Author-recorded commit
c4489f440f27…
License
LICENSE
Author’s source reference
nostr://npub182jczunncwe0jn6frpqwq3e0qjws7yqqnc3auccqv9nte2dnd63scjm4rf/wss%3A%2F%2Fgit.napplet.soy%2F/n-48e516e34e5

Archive hash verified: f2fd072590aac7a5…. The source-to-build association is the author’s claim; it has not been independently rebuilt.

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#15191d" />
    <title>Powder Tool</title>
  </head>
  <body>
    <main id="app">
      <div class="toolbar" aria-label="Simulation controls">
        <button id="palette-toggle" class="icon-button" title="Materials and tools" aria-label="Materials and tools" aria-expanded="false" aria-controls="palette"><svg viewBox="0 0 20 20"><path d="M3 4h14M3 10h14M3 16h14"/></svg></button>
        <button id="pause" class="primary" title="Pause simulation" aria-label="Pause simulation"><svg viewBox="0 0 20 20"><path d="M7 5v10M13 5v10"/></svg><span class="button-label">Pause</span></button>
        <button id="step" class="icon-button" title="Advance one frame" aria-label="Advance one frame"><svg viewBox="0 0 20 20"><path d="m5 4 8 6-8 6ZM15 4v12"/></svg></button>
        <span class="divider"></span>
        <label class="scene-field"><span class="sr-only">Example scene</span><select id="scene"><option value="playground">Playground</option><option value="waterworks">Waterworks</option><option value="furnace">Furnace</option><option value="gaslab">Gas lab</option><option value="empty">Empty canvas</option></select></label>
        <button id="reset" class="icon-button secondary-control" title="Restart scene" aria-label="Restart scene"><svg viewBox="0 0 20 20"><path d="M4 7a6 6 0 1 1-1 5M4 3v5h5"/></svg></button>
        <span class="toolbar-spacer"></span>
        <span id="live-state" class="live-state"><i></i>LIVE</span>
        <button id="save" class="secondary-control" title="Save this scene"><svg viewBox="0 0 20 20"><path d="M4 3h10l3 3v11H3V3ZM6 3v5h7V3M6 17v-6h8v6"/></svg><span class="button-label">Save</span></button>
        <button id="load" class="icon-button secondary-control" title="Load saved scene" aria-label="Load saved scene"><svg viewBox="0 0 20 20"><path d="M3 16V5h5l2 2h7v9ZM3 10h14"/></svg></button>
      </div>
      <div class="workbench">
        <aside id="palette" aria-label="Materials and tools">
          <div class="section-label">TOOLS</div>
          <div id="tools" class="tool-grid" role="group" aria-label="Drawing tools"></div>
          <section id="emitter-editor" hidden aria-label="Emitter configuration">
            <div class="section-label">EMITTER <span id="emitter-id">NEW</span></div>
            <label for="emitter-list">Source</label><select id="emitter-list" aria-label="Select emitter"><option value="new">New emitter</option></select>
            <label for="emitter-material">Material</label><select id="emitter-material" aria-label="Emitter material"></select>
            <label for="emitter-rate">Flow rate <output id="emitter-rate-value">240 /s</output></label>
            <input id="emitter-rate" type="range" min="30" max="2400" step="30" value="240" aria-label="Emitter flow rate" />
            <label for="emitter-radius">Outlet width <output id="emitter-radius-value">12 px</output></label>
            <input id="emitter-radius" type="range" min="1" max="24" value="6" aria-label="Emitter outlet radius" />
            <label for="emitter-direction">Outlet direction</label><select id="emitter-direction"><option value="down">↓ Down</option><option value="up">↑ Up</option><option value="left">← Left</option><option value="right">→ Right</option></select>
            <label class="emitter-enabled"><input id="emitter-enabled" type="checkbox" checked /> Enabled</label>
            <div class="edit-controls"><button id="emitter-new">New</button><button id="emitter-remove" disabled>Remove</button></div>
            <p class="emitter-tip" id="emitter-tip">Configure a source, then tap the stage to place it.</p>
            <button id="emitter-place">Place on stage</button>
          </section>
          <div class="section-label">MATERIALS <span>7</span></div>
          <div id="materials" class="material-grid" role="group" aria-label="Choose a material"></div>
          <div class="section-label">GASES <span>5</span></div>
          <div id="gases" class="material-grid" role="group" aria-label="Choose a gas"></div>
          <div class="section-label">RIGID BODIES <span>2</span></div>
          <div id="bodies" class="material-grid" role="group" aria-label="Choose a rigid body"></div>
          <div class="brush-control">
            <label for="brush">Brush size <output id="brush-value">16 px</output></label>
            <input id="brush" type="range" min="1" max="48" value="16" aria-label="Brush size" />
            <div class="range-labels"><span>Fine</span><span>Wide</span></div>
          </div>
          <div class="gravity-control">
            <label for="gravity">Gravity <output id="gravity-value">1.0×</output></label>
            <input id="gravity" type="range" min="0" max="20" value="10" aria-label="Gravity" />
          </div>
          <label class="resolution-control" for="resolution">Stage detail <select id="resolution"><option value="300">Standard · 300 wide</option><option value="450">Fine · 450 wide</option><option value="600" selected>Ultra · 600 wide</option></select></label>
          <div class="edit-controls"><button id="undo" title="Undo the last edit">↶ Undo</button><button id="clear" title="Clear the canvas">Clear</button></div>
          <div class="drawer-actions"><button id="drawer-save">Save scene</button><button id="drawer-load">Load scene</button><button id="drawer-reset">Restart scene</button></div>
          <div class="material-detail"><span id="detail-kind">GRANULAR</span><strong id="detail-name">Sand</strong><p id="detail-text">Falls, piles up, and sinks through water.</p></div>
        </aside>
        <section class="viewport" aria-label="Physics workspace">
          <canvas id="canvas" tabindex="0" aria-label="Physics sandbox. Paint with the selected material, or select Grab to move rigid bodies."></canvas>
          <div class="scene-badge"><span id="scene-name">Playground</span><span id="stage-size" class="scene-mode">600 × 400</span></div>
          <div id="paused-badge" hidden>Ⅱ PAUSED</div>
          <div id="hint" class="canvas-hint">Drag to pour sand <span>·</span> Try dropping a stone into the water</div>
          <div id="toast" role="status" aria-live="polite" hidden></div>
          <div class="canvas-tools"><button id="quick-emitter" title="Configure and place an emitter" aria-label="Configure and place an emitter"><svg viewBox="0 0 20 20"><path d="M4 7h12v8H4ZM7 4v-2M10 4v-3M13 4v-2M7 18h6"/></svg></button><button id="quick-grab" title="Grab and throw rigid bodies" aria-label="Grab and throw rigid bodies"><svg viewBox="0 0 20 20"><path d="M6 10V6a1.5 1.5 0 0 1 3 0v3-5a1.5 1.5 0 0 1 3 0v5-3a1.5 1.5 0 0 1 3 0v4-2a1.5 1.5 0 0 1 3 0v5c0 4-3 5-6 5-2 0-3-1-5-4l-3-3a1.5 1.5 0 0 1 2-2l2 2"/></svg></button><button id="quick-erase" title="Erase material or rigid bodies" aria-label="Erase material or rigid bodies"><svg viewBox="0 0 20 20"><path d="m3 11 8-8 6 6-8 8H6ZM7 7l6 6M9 17h8"/></svg></button></div>
          <div class="telemetry" aria-label="Simulation statistics"><span><b id="particles">0</b> particles</span><span><b id="body-count">0</b> bodies</span><span class="fps"><b id="fps">60</b> fps</span></div>
        </section>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>