<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 620px;
    }
    .col-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .badge-solid { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
    .badge-liquid { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .badge-gas { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }

    .canvas-wrap {
      width: 100%;
      height: 130px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      position: relative;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .speed-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .wave-bar-wrap {
      width: 100%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      overflow: hidden;
    }
    .wave-bar {
      height: 100%;
      width: 0%;
      border-radius: 3px;
    }
    .bar-solid { background: #7c3aed; }
    .bar-liquid { background: #2563eb; }
    .bar-gas { background: #d97706; }

    .btn-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ping-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .ping-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="col-card">
      <span class="badge badge-solid">Solid</span>
      <div class="canvas-wrap">
        <canvas id="c-solid"></canvas>
      </div>
      <div class="wave-bar-wrap">
        <div id="bar-solid" class="wave-bar bar-solid"></div>
      </div>
      <span class="speed-tag">⚡ Fastest</span>
    </div>

    
    <div class="col-card">
      <span class="badge badge-liquid">Liquid</span>
      <div class="canvas-wrap">
        <canvas id="c-liquid"></canvas>
      </div>
      <div class="wave-bar-wrap">
        <div id="bar-liquid" class="wave-bar bar-liquid"></div>
      </div>
      <span class="speed-tag">⚡ Fast</span>
    </div>

    
    <div class="col-card">
      <span class="badge badge-gas">Gas</span>
      <div class="canvas-wrap">
        <canvas id="c-gas"></canvas>
      </div>
      <div class="wave-bar-wrap">
        <div id="bar-gas" class="wave-bar bar-gas"></div>
      </div>
      <span class="speed-tag">⚡ Steady</span>
    </div>
  </div>

  <div class="btn-row">
    <button class="ping-btn" id="pingBtn" type="button">
      <span>▶</span> Ping Wave
    </button>
  </div>

  <script>
    const cvsSolid = document.getElementById('c-solid');
    const cvsLiquid = document.getElementById('c-liquid');
    const cvsGas = document.getElementById('c-gas');

    const barSolid = document.getElementById('bar-solid');
    const barLiquid = document.getElementById('bar-liquid');
    const barGas = document.getElementById('bar-gas');
    const pingBtn = document.getElementById('pingBtn');

    let width = 120, height = 130;
    const dpr = window.devicePixelRatio || 1;

    function resizeCanvas(c) {
      const rect = c.getBoundingClientRect();
      width = rect.width;
      height = rect.height;
      c.width = width * dpr;
      c.height = height * dpr;
      const ctx = c.getContext('2d');
      ctx.scale(dpr, dpr);
      return ctx;
    }

    let ctxSolid, ctxLiquid, ctxGas;

    function initCanvases() {
      ctxSolid = resizeCanvas(cvsSolid);
      ctxLiquid = resizeCanvas(cvsLiquid);
      ctxGas = resizeCanvas(cvsGas);
    }
    window.addEventListener('resize', initCanvases);

    // Particle sets
    // 1. Solid: Regular tightly packed grid
    // 2. Liquid: Closely packed, slight random offsets
    // 3. Gas: Far apart
    let solidPts = [], liquidPts = [], gasPts = [];

    function buildParticles() {
      solidPts = [];
      const colsS = 8, rowsS = 7;
      for (let r = 0; r < rowsS; r++) {
        for (let c = 0; c < colsS; c++) {
          solidPts.push({
            gx: 0.12 + c * (0.76 / (colsS - 1)),
            gy: 0.15 + r * (0.70 / (rowsS - 1)),
            r: 4.2
          });
        }
      }

      liquidPts = [];
      const countL = 28;
      // Semi-structured dense layout
      for (let i = 0; i < countL; i++) {
        const row = Math.floor(i / 5);
        const col = i % 5;
        const jitterX = (Math.sin(i * 99) * 0.03);
        const jitterY = (Math.cos(i * 33) * 0.04);
        liquidPts.push({
          gx: 0.14 + col * (0.72 / 4) + jitterX,
          gy: 0.16 + row * (0.68 / 5) + jitterY,
          r: 4.2
        });
      }

      gasPts = [];
      // 9 widely spread particles
      const gasPos = [
        [0.18, 0.22], [0.55, 0.18], [0.82, 0.30],
        [0.25, 0.52], [0.62, 0.48], [0.85, 0.65],
        [0.15, 0.80], [0.48, 0.78], [0.78, 0.85]
      ];
      gasPos.forEach(([x, y]) => {
        gasPts.push({ gx: x, gy: y, r: 4.2 });
      });
    }

    let startTime = performance.now();
    let loopDuration = 3800; // ms

    function triggerPing() {
      startTime = performance.now();
    }
    pingBtn.addEventListener('click', triggerPing);

    function drawSystem(now) {
      if (!ctxSolid) initCanvases();
      if (!solidPts.length) buildParticles();

      const elapsed = (now - startTime) % loopDuration;

      // Wave speeds across [0, 1] relative x-axis:
      // Solid completes in ~800ms
      // Liquid completes in ~1800ms
      // Gas completes in ~3400ms
      const tSolid = Math.min(1, elapsed / 800);
      const tLiquid = Math.min(1, elapsed / 1800);
      const tGas = Math.min(1, elapsed / 3400);

      // Update progress bars
      barSolid.style.width = (tSolid * 100) + '%';
      barLiquid.style.width = (tLiquid * 100) + '%';
      barGas.style.width = (tGas * 100) + '%';

      renderChamber(ctxSolid, solidPts, tSolid, '#7c3aed', '#c4b5fd', 0.10);
      renderChamber(ctxLiquid, liquidPts, tLiquid, '#2563eb', '#93c5fd', 0.14);
      renderChamber(ctxGas, gasPts, tGas, '#d97706', '#fcd34d', 0.18);

      requestAnimationFrame(drawSystem);
    }

    function renderChamber(ctx, pts, wavePos, primaryColor, accentColor, pulseWidth) {
      ctx.clearRect(0, 0, width, height);

      // Draw subtle wave wavefront beam
      if (wavePos > 0 && wavePos < 1) {
        const waveX = wavePos * width;
        const grad = ctx.createLinearGradient(waveX - 25, 0, waveX + 15, 0);
        grad.addColorStop(0, 'rgba(255, 255, 255, 0)');
        grad.addColorStop(0.6, primaryColor + '22');
        grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
        ctx.fillStyle = grad;
        ctx.fillRect(waveX - 25, 0, 40, height);
      }

      // Draw particles with compression displacement
      pts.forEach(p => {
        const baseX = p.gx * width;
        const baseY = p.gy * height;

        // Wave compression math
        const dist = (p.gx - wavePos);
        let shiftX = 0;
        let isHit = false;

        if (Math.abs(dist) < pulseWidth && wavePos > 0.01 && wavePos < 0.99) {
          isHit = true;
          // Compression shift forward then bounce back
          shiftX = Math.sin((dist / pulseWidth) * Math.PI) * 7;
        }

        const px = baseX + shiftX;
        const py = baseY;

        ctx.beginPath();
        ctx.arc(px, py, p.r, 0, Math.PI * 2);
        ctx.fillStyle = isHit ? primaryColor : (primaryColor + 'cc');
        ctx.fill();

        // Highlight ring on compression
        if (isHit) {
          ctx.lineWidth = 2;
          ctx.strokeStyle = accentColor;
          ctx.stroke();
        }
      });
    }

    initCanvases();
    buildParticles();
    requestAnimationFrame(drawSystem);
  </script>
</body>
</html>

Sound Needs a Medium to Travel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 30px;
      margin-bottom: 8px;
    }
    .toggle-btn {
      border: none;
      background: transparent;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 24px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* SVG Stage */
    .stage-wrap {
      width: 100%;
      max-width: 420px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* Animations */
    .hammer {
      transform-origin: 200px 185px;
      animation: strike 0.22s infinite alternate ease-in-out;
    }
    @keyframes strike {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(18deg); }
    }

    /* Sound waves */
    .sound-wave {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-linecap: round;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .is-air .wave-1 { animation: waveOut 1.2s infinite ease-out 0.0s; }
    .is-air .wave-2 { animation: waveOut 1.2s infinite ease-out 0.4s; }
    .is-air .wave-3 { animation: waveOut 1.2s infinite ease-out 0.8s; }

    @keyframes waveOut {
      0% { r: 35px; opacity: 0.8; }
      100% { r: 130px; opacity: 0; }
    }

    /* Particles */
    .particle {
      fill: #38bdf8;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .is-vacuum .particle {
      opacity: 0;
      transform: translateY(40px) scale(0.2);
    }

    /* Particle jitter in air */
    .is-air .particle {
      animation: vibrate 0.2s infinite alternate ease-in-out;
    }
    @keyframes vibrate {
      0% { transform: translate(-1.5px, 0); }
      100% { transform: translate(1.5px, 0); }
    }

    /* Status Banner */
    .status-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 20px;
      margin-top: 6px;
      transition: all 0.3s ease;
    }
    .badge-air {
      background: #e0f2fe;
      color: #0369a1;
    }
    .badge-vacuum {
      background: #f1f5f9;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btnAir" class="toggle-btn active" onclick="setMode(true)">💨 With Air</button>
    <button id="btnVac" class="toggle-btn" onclick="setMode(false)">🚫 In a Vacuum</button>
  </div>

  
  <div class="stage-wrap">
    <svg id="diagram" class="is-air" viewBox="50 40 300 280">
      <defs>
        
        <linearGradient id="glassGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#bae6fd" stop-opacity="0.35"/>
          <stop offset="40%" stop-color="#e0f2fe" stop-opacity="0.1"/>
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.25"/>
        </linearGradient>
      </defs>

      
      <g id="waves">
        <circle class="sound-wave wave-1" cx="200" cy="165" r="35" />
        <circle class="sound-wave wave-2" cx="200" cy="165" r="35" />
        <circle class="sound-wave wave-3" cx="200" cy="165" r="35" />
      </g>

      
      <rect x="110" y="270" width="180" height="14" rx="4" fill="#64748b" />
      <rect x="130" y="284" width="140" height="8" rx="2" fill="#475569" />
      <path d="M 200 284 L 200 305" stroke="#94a3b8" stroke-width="8" stroke-linecap="round"/>

      
      <g id="particles">
        <circle class="particle" cx="150" cy="120" r="3.5" />
        <circle class="particle" cx="250" cy="120" r="3.5" />
        <circle class="particle" cx="135" cy="160" r="3.5" />
        <circle class="particle" cx="265" cy="160" r="3.5" />
        <circle class="particle" cx="145" cy="210" r="3.5" />
        <circle class="particle" cx="255" cy="210" r="3.5" />
        <circle class="particle" cx="170" cy="95" r="3.5" />
        <circle class="particle" cx="230" cy="95" r="3.5" />
        <circle class="particle" cx="175" cy="245" r="3.5" />
        <circle class="particle" cx="225" cy="245" r="3.5" />
        <circle class="particle" cx="130" cy="240" r="3.5" />
        <circle class="particle" cx="270" cy="240" r="3.5" />
      </g>

      
      <line x1="185" y1="80" x2="185" y2="150" stroke="#94a3b8" stroke-width="2" />
      <line x1="215" y1="80" x2="215" y2="150" stroke="#94a3b8" stroke-width="2" />
      
      
      
      <path d="M 175 168 A 25 25 0 0 1 225 168 Z" fill="#eab308" stroke="#ca8a04" stroke-width="2" />
      <circle cx="200" cy="144" r="3" fill="#ca8a04" />
      
      <rect x="188" y="170" width="24" height="24" rx="3" fill="#94a3b8" />

      
      <g class="hammer">
        <line x1="200" y1="185" x2="168" y2="160" stroke="#475569" stroke-width="2.5" stroke-linecap="round" />
        <circle cx="168" cy="160" r="4.5" fill="#e11d48" />
      </g>

      
      
      <path d="M 120 270 L 120 140 A 80 80 0 0 1 280 140 L 280 270 Z" 
            fill="url(#glassGrad)" stroke="#38bdf8" stroke-width="3" stroke-linejoin="round" />
      
      <circle cx="200" cy="60" r="10" fill="#38bdf8" opacity="0.7"/>
      
      <path d="M 132 250 L 132 145 A 68 68 0 0 1 185 78" 
            stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.75" />
    </svg>
  </div>

  
  <div id="status" class="status-badge badge-air">
    <span>🔊 LOUD — Particles carry vibrations</span>
  </div>

  <script>
    const diagram = document.getElementById('diagram');
    const status = document.getElementById('status');
    const btnAir = document.getElementById('btnAir');
    const btnVac = document.getElementById('btnVac');

    let audioCtx = null;
    let chimeInterval = null;

    function setMode(hasAir) {
      if (hasAir) {
        diagram.classList.add('is-air');
        diagram.classList.remove('is-vacuum');
        btnAir.classList.add('active');
        btnVac.classList.remove('active');
        status.className = 'status-badge badge-air';
        status.innerHTML = '<span>🔊 LOUD — Particles carry vibrations</span>';
      } else {
        diagram.classList.remove('is-air');
        diagram.classList.add('is-vacuum');
        btnVac.classList.add('active');
        btnAir.classList.remove('active');
        status.className = 'status-badge badge-vacuum';
        status.innerHTML = '<span>🔇 SILENT — No particles, no sound</span>';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sound Wave Particle Domino</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100vh;
      background-color: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 12px;
      user-select: none;
      overflow-x: hidden;
    }

    /* Header */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .mode-pills {
      display: flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
      gap: 4px;
    }

    .pill-btn {
      border: none;
      background: transparent;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .pill-btn.active {
      background: #ffffff;
      color: #0284c7;
    }

    .sound-toggle {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .sound-toggle.active {
      background: #f0fdf4;
      border-color: #86efac;
      color: #16a34a;
    }

    /* Main Stage - Flat clean layout, no card wrapper */
    .stage {
      position: relative;
      flex: 1;
      min-height: 200px;
      margin: 12px 0;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 4px;
    }

    /* Column zones */
    .zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
    }

    .zone-source {
      width: 72px;
      flex-shrink: 0;
      text-align: center;
    }

    .zone-medium {
      flex: 1;
      min-width: 0;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .zone-receiver {
      width: 72px;
      flex-shrink: 0;
      text-align: center;
    }

    .graphics-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
    }

    /* Tuning fork graphics */
    .fork-box {
      width: 36px;
      height: 64px;
      position: relative;
      display: flex;
      justify-content: center;
    }

    .prongs {
      display: flex;
      gap: 10px;
      position: absolute;
      top: 0;
    }

    .prong {
      width: 5px;
      height: 38px;
      background: #64748b;
      border-radius: 3px 3px 0 0;
      transform-origin: bottom center;
    }

    .stem {
      position: absolute;
      bottom: 0;
      width: 5px;
      height: 26px;
      background: #475569;
      border-radius: 0 0 3px 3px;
    }

    .base-curve {
      position: absolute;
      top: 34px;
      width: 20px;
      height: 8px;
      background: #64748b;
      border-radius: 0 0 6px 6px;
    }

    /* Vibrating animations (>= 300ms cycle to prevent strobing) */
    .fork-vibrating .prong-l {
      animation: prongL 0.32s infinite alternate ease-in-out;
    }
    .fork-vibrating .prong-r {
      animation: prongR 0.32s infinite alternate ease-in-out;
    }

    @keyframes prongL {
      0% { transform: rotate(-4deg); }
      100% { transform: rotate(4deg); }
    }
    @keyframes prongR {
      0% { transform: rotate(4deg); }
      100% { transform: rotate(-4deg); }
    }

    .blur-lines {
      position: absolute;
      inset: -4px;
      border-right: 2px dashed #0284c7;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .fork-vibrating .blur-lines {
      opacity: 0.8;
      animation: pulseBlur 0.36s infinite alternate ease-in-out;
    }
    @keyframes pulseBlur {
      0% { opacity: 0.3; }
      100% { opacity: 0.9; }
    }

    /* Particles track */
    .particles-track {
      position: relative;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
    }

    .particle {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #0284c7;
      transition: background-color 0.3s ease, transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .particle.hit {
      background: #f97316;
    }

    .vacuum-msg {
      display: none;
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border: 1px dashed #cbd5e1;
      padding: 6px 10px;
      border-radius: 6px;
      text-align: center;
    }

    /* Receiver Ear */
    .ear-icon {
      font-size: 30px;
      line-height: 1;
      display: inline-block;
      transform-origin: center;
      transition: transform 0.3s;
    }

    .ear-vibrating {
      animation: earWiggle 0.36s infinite alternate ease-in-out;
    }

    @keyframes earWiggle {
      0% { transform: rotate(-5deg); }
      100% { transform: rotate(5deg); }
    }

    .wave-ripple {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 32px;
      border-right: 3px solid #f97316;
      border-radius: 50%;
      opacity: 0;
    }
    .ear-vibrating + .wave-ripple {
      opacity: 1;
      animation: ripple 0.5s infinite ease-out;
    }
    @keyframes ripple {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Section Labels */
    .label {
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      line-height: 1.25;
      padding-top: 6px;
    }
    .label-accent {
      color: #0284c7;
    }

    /* Controls Bar - flat minimalist layout */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-top: 8px;
    }

    .btn-strike {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #0284c7;
      color: white;
      border: none;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 6px;
      cursor: pointer;
      flex-shrink: 0;
      transition: background-color 0.3s ease;
    }
    .btn-strike:hover {
      background: #0369a1;
    }

    .status-text {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      line-height: 1.3;
      text-align: right;
    }
    .status-highlight {
      color: #f97316;
      font-weight: 700;
    }

    /* Responsive scaling for larger viewports */
    @media (min-width: 480px) {
      .particle {
        width: 16px;
        height: 16px;
      }
      .zone-source, .zone-receiver {
        width: 88px;
      }
      .label {
        font-size: 12px;
      }
      .status-text {
        font-size: 13px;
      }
      .pill-btn {
        padding: 6px 12px;
        font-size: 13px;
      }
      .ear-icon {
        font-size: 36px;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="mode-pills">
      <button class="pill-btn active" id="btnAir" onclick="setMode('air')">💨 Air (Medium)</button>
      <button class="pill-btn" id="btnVacuum" onclick="setMode('vacuum')">🌌 Vacuum (Space)</button>
    </div>
    <button class="sound-toggle" id="audioToggle" onclick="toggleAudio()">
      <span id="audioIcon">🔇</span> Audio
    </button>
  </div>

  <div class="stage">
    
    <div class="zone zone-source">
      <div class="graphics-container">
        <div class="fork-box" id="fork">
          <div class="prongs">
            <div class="prong prong-l"></div>
            <div class="prong prong-r"></div>
          </div>
          <div class="base-curve"></div>
          <div class="stem"></div>
          <div class="blur-lines"></div>
        </div>
      </div>
      <div class="label">Vibrating<br>Source</div>
    </div>

    
    <div class="zone zone-medium">
      <div class="graphics-container">
        <div class="particles-track" id="track"></div>
        <div class="vacuum-msg" id="vacuumLabel">No particles to pass energy</div>
      </div>
      <div class="label label-accent">Passing the Energy<br>(Matter)</div>
    </div>

    
    <div class="zone zone-receiver">
      <div class="graphics-container">
        <div class="ear-icon" id="ear">👂</div>
        <div class="wave-ripple"></div>
      </div>
      <div class="label">Ear receives<br>vibration</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-strike" id="strikeBtn" onclick="triggerPulse()">
      <span>▶</span> Hit Fork
    </button>
    <div class="status-text" id="statusDesc">
      Tap <span class="status-highlight">Hit Fork</span> to send vibration energy
    </div>
  </div>

  <script>
    const NUM_PARTICLES = 10;
    const track = document.getElementById('track');
    const fork = document.getElementById('fork');
    const ear = document.getElementById('ear');
    const statusDesc = document.getElementById('statusDesc');
    const vacuumLabel = document.getElementById('vacuumLabel');
    const btnAir = document.getElementById('btnAir');
    const btnVacuum = document.getElementById('btnVacuum');

    let mode = 'air';
    let isAnimating = false;
    let audioEnabled = false;
    let audioCtx = null;

    // Create particles evenly distributed across width %
    const particles = [];
    for (let i = 0; i < NUM_PARTICLES; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      const defaultLeft = ((i + 0.6) / NUM_PARTICLES) * 100;
      p.style.left = `${defaultLeft}%`;
      p.dataset.origLeft = defaultLeft;
      track.appendChild(p);
      particles.push(p);
    }

    function toggleAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      audioEnabled = !audioEnabled;
      const btn = document.getElementById('audioToggle');
      const icon = document.getElementById('audioIcon');
      btn.classList.toggle('active', audioEnabled);
      icon.textContent = audioEnabled ? '🔊' : '🔇';
    }

    function playTone(freq, dur = 0.3) {
      if (!audioEnabled || !audioCtx) return;
      try {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.frequency.value = freq;
        osc.type = 'sine';
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch (e) {}
    }

    function setMode(newMode) {
      mode = newMode;
      btnAir.classList.toggle('active', mode === 'air');
      btnVacuum.classList.toggle('active', mode === 'vacuum');

      if (mode === 'vacuum') {
        track.style.display = 'none';
        vacuumLabel.style.display = 'block';
        statusDesc.innerHTML = 'Vacuum: <span class="status-highlight">No particles</span> exist to pass sound!';
      } else {
        track.style.display = 'flex';
        vacuumLabel.style.display = 'none';
        statusDesc.innerHTML = 'Air: Particles pass <span class="status-highlight">energy</span> neighbor to neighbor.';
      }
    }

    function triggerPulse() {
      if (isAnimating) return;
      isAnimating = true;

      // Start fork vibration
      fork.classList.add('fork-vibrating');
      playTone(440, 0.4);

      if (mode === 'vacuum') {
        statusDesc.innerHTML = 'Fork vibrates, but <span class="status-highlight">energy cannot travel</span> in vacuum.';
        setTimeout(() => {
          fork.classList.remove('fork-vibrating');
          isAnimating = false;
        }, 1400);
        return;
      }

      statusDesc.innerHTML = 'Vibrations <span class="status-highlight">collide neighbor to neighbor</span>...';

      // Smooth wave movement progression
      const stepDelay = 140; // ms per particle bump
      const bumpDuration = 320; // ms transition duration

      particles.forEach((p, idx) => {
        setTimeout(() => {
          const orig = parseFloat(p.dataset.origLeft);
          p.style.left = `${orig + 3}%`;
          p.classList.add('hit');

          // Return back smoothly
          setTimeout(() => {
            p.style.left = `${orig}%`;
            p.classList.remove('hit');
          }, bumpDuration);

        }, idx * stepDelay);
      });

      // Pulse reaches ear
      const totalArrival = NUM_PARTICLES * stepDelay + 80;
      setTimeout(() => {
        ear.classList.add('ear-vibrating');
        playTone(587, 0.35);
        statusDesc.innerHTML = 'Ear detects the vibration as <span class="status-highlight">sound!</span>';

        setTimeout(() => {
          ear.classList.remove('ear-vibrating');
          fork.classList.remove('fork-vibrating');
          isAnimating = false;
        }, 900);
      }, totalArrival);
    }

    // Initial demonstration
    setTimeout(triggerPulse, 500);
  </script>
</body>
</html>

science.ks2.y2.t4.s2

Aligned learning resources

Related diagrams