<!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">
  <title>Sound Distance Experiment</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .checklist {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-bottom: 18px;
      width: 100%;
      max-width: 580px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .badge.var {
      background: #e0f2fe;
      border-color: #bae6fd;
      color: #0369a1;
    }

    .badge .check {
      color: #10b981;
      font-weight: bold;
    }

    .stage {
      width: 100%;
      max-width: 600px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .interactive-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
    }

    .listen-btn {
      background: #ffffff;
      border: 1.5px solid #22b7ff;
      border-radius: 8px;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 7px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, box-shadow 0.2s;
    }

    .listen-btn:hover {
      background: #f0f9ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.25);
    }

    .listen-btn:active {
      background: #e0f2fe;
    }

    .wave-pulse {
      animation: pulse 2.4s ease-in-out infinite;
      transform-origin: 50px 110px;
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 1; }
    }
  </style>
</head>
<body>

  
  <div class="checklist">
    <div class="badge"><span class="check">✓</span> Buzzer: Fixed</div>
    <div class="badge"><span class="check">✓</span> Room: Quiet</div>
    <div class="badge var">★ Variable: Distance</div>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 600 230" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="rulerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#fbbf24" />
          <stop offset="100%" stop-color="#f59e0b" />
        </linearGradient>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="3" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
      </defs>

      
      <rect x="30" y="150" width="530" height="24" rx="4" fill="url(#rulerGrad)" stroke="#d97706" stroke-width="1.5" />
      
      
      
      
      <path d="
        M61,150 v6 M72,150 v6 M83,150 v6 M94,150 v6 M105,150 v9 M116,150 v6 M127,150 v6 M138,150 v6 M149,150 v6
        M171,150 v6 M182,150 v6 M193,150 v6 M204,150 v6 M215,150 v9 M226,150 v6 M237,150 v6 M248,150 v6 M259,150 v6
        M281,150 v6 M292,150 v6 M303,150 v6 M314,150 v6 M325,150 v9 M336,150 v6 M347,150 v6 M358,150 v6 M369,150 v6
        M391,150 v6 M402,150 v6 M413,150 v6 M424,150 v6 M435,150 v9 M446,150 v6 M457,150 v6 M468,150 v6 M479,150 v6
        M501,150 v6 M512,150 v6 M523,150 v6 M534,150 v6 M545,150 v9
      " stroke="#78350f" stroke-width="1" />

      
      
      <line x1="50" y1="150" x2="50" y2="166" stroke="#1e2945" stroke-width="2" />
      <text x="50" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#1e2945">0 m</text>

      
      <line x1="160" y1="150" x2="160" y2="166" stroke="#1e2945" stroke-width="2" />
      <text x="160" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#1e2945">1 m</text>

      
      <line x1="270" y1="150" x2="270" y2="166" stroke="#1e2945" stroke-width="2" />
      <text x="270" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#1e2945">2 m</text>

      
      <line x1="380" y1="150" x2="380" y2="166" stroke="#78350f" stroke-width="1.5" />
      <text x="380" y="190" text-anchor="middle" font-size="13" font-weight="500" fill="#6b7280">3 m</text>

      
      <line x1="490" y1="150" x2="490" y2="166" stroke="#1e2945" stroke-width="2" />
      <text x="490" y="190" text-anchor="middle" font-size="14" font-weight="700" fill="#1e2945">4 m</text>

      
      <g class="wave-pulse">
        
        <path d="M 125 60 A 80 80 0 0 1 125 150" fill="none" stroke="#eab308" stroke-width="7" stroke-linecap="round" />
        <path d="M 140 50 A 100 100 0 0 1 140 155" fill="none" stroke="#facc15" stroke-width="6" stroke-linecap="round" filter="url(#glow)" />

        
        <path d="M 245 40 A 200 200 0 0 1 245 165" fill="none" stroke="#fde047" stroke-width="3.5" stroke-linecap="round" opacity="0.8" />

        
        <path d="M 465 25 A 420 420 0 0 1 465 175" fill="none" stroke="#fef08a" stroke-width="1.8" stroke-dasharray="4 3" stroke-linecap="round" opacity="0.6" />
      </g>

      
      <g transform="translate(50, 110)">
        <circle cx="0" cy="0" r="22" fill="#1e2945" />
        <text x="0" y="7" text-anchor="middle" font-size="20" fill="#ffffff">🔊</text>
        <rect x="-30" y="-46" width="60" height="20" rx="10" fill="#1e2945" />
        <text x="0" y="-32" text-anchor="middle" font-size="11" font-weight="700" fill="#ffffff">BUZZER</text>
        
        <line x1="0" y1="22" x2="0" y2="40" stroke="#1e2945" stroke-width="3" stroke-linecap="round" />
      </g>

      
      <g id="sensor1" transform="translate(160, 105)">
        <line x1="0" y1="18" x2="0" y2="45" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
        <rect x="-34" y="-24" width="68" height="42" rx="6" fill="#ffffff" stroke="#22b7ff" stroke-width="2.5" />
        <text x="0" y="-6" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">SENSOR</text>
        <text x="0" y="12" text-anchor="middle" font-size="15" font-weight="800" fill="#0284c7">70 dB</text>
      </g>

      
      <g id="sensor2" transform="translate(270, 105)">
        <line x1="0" y1="18" x2="0" y2="45" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
        <rect x="-34" y="-24" width="68" height="42" rx="6" fill="#ffffff" stroke="#94a3b8" stroke-width="2" />
        <text x="0" y="-6" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">SENSOR</text>
        <text x="0" y="12" text-anchor="middle" font-size="15" font-weight="800" fill="#334155">64 dB</text>
      </g>

      
      <g id="sensor3" transform="translate(490, 105)">
        <line x1="0" y1="18" x2="0" y2="45" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
        <rect x="-34" y="-24" width="68" height="42" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />
        <text x="0" y="-6" text-anchor="middle" font-size="10" font-weight="700" fill="#94a3b8">SENSOR</text>
        <text x="0" y="12" text-anchor="middle" font-size="15" font-weight="800" fill="#64748b">58 dB</text>
      </g>
    </svg>
  </div>

  
  <div class="interactive-row">
    <button class="listen-btn" onclick="playBeep(0.3, '1m')">🔊 Listen 1m (70 dB)</button>
    <button class="listen-btn" onclick="playBeep(0.12, '2m')">🔉 Listen 2m (64 dB)</button>
    <button class="listen-btn" onclick="playBeep(0.04, '4m')">🔈 Listen 4m (58 dB)</button>
  </div>

  <script>
    let audioCtx = null;

    function playBeep(volume, dist) {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.type = 'sine';
      osc.frequency.setValueAtTime(440, audioCtx.currentTime);

      gain.gain.setValueAtTime(volume, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.5);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start();
      osc.stop(audioCtx.currentTime + 0.5);
    }
  </script>
</body>
</html>

How Sound Faints as Distance from the Source Increases

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

    .header {
      width: 100%;
      max-width: 620px;
      text-align: center;
      margin-bottom: 6px;
    }

    .title {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.01em;
    }

    .wave-indicator {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      max-width: 620px;
      padding: 0 12px 4px 0;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      gap: 6px;
    }

    .wave-indicator-arrow {
      display: inline-flex;
      align-items: center;
      color: #22b7ff;
      font-weight: 800;
      font-size: 14px;
    }

    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 620px;
      aspect-ratio: 16 / 9;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      max-width: 620px;
      margin-top: 8px;
      gap: 10px;
    }

    .legend {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dot-sample {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #22b7ff;
      display: inline-block;
    }

    .dot-sample.highlight {
      background: #f59e0b;
      border: 1.5px solid #b45309;
    }

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn:active {
      background: #e2e8f0;
    }

    @media (max-width: 480px) {
      .title {
        font-size: 16px;
      }
      .footer {
        justify-content: center;
      }
      .legend {
        justify-content: center;
      }
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Vibration pushes air particles!</div>
  </div>

  <div class="wave-indicator">
    <span>Wave energy moves</span>
    <span class="wave-indicator-arrow">➔</span>
  </div>

  <div class="canvas-container">
    <canvas id="simCanvas"></canvas>
  </div>

  <div class="footer">
    <div class="legend">
      <div class="legend-item">
        <span class="dot-sample"></span>
        <span>Air particles</span>
      </div>
      <div class="legend-item">
        <span class="dot-sample highlight"></span>
        <span>One vibrating particle</span>
      </div>
    </div>
    <button id="toggleBtn" class="btn" aria-label="Toggle animation">⏸ Pause</button>
  </div>

  <script>
    const canvas = document.getElementById('simCanvas');
    const ctx = canvas.getContext('2d');
    const toggleBtn = document.getElementById('toggleBtn');

    let width = 0;
    let height = 0;
    let isRunning = true;
    let time = 0;

    // Simulation params
    const freq = 0.08;
    const waveSpeed = 2.6;
    const k = freq / waveSpeed;
    const maxAmp = 16;

    const particles = [];
    const numRows = 12;
    const numCols = 36;

    function initParticles() {
      particles.length = 0;
      for (let r = 0; r < numRows; r++) {
        for (let c = 0; c < numCols; c++) {
          // Spread across safe normalized range (0 to 1 in X, 0.08 to 0.92 in Y)
          const baseU = (c + 0.5) / numCols;
          const baseV = 0.08 + (r / (numRows - 1)) * 0.84;

          const isTracked = (r === Math.floor(numRows / 2) && c === Math.floor(numCols * 0.32));

          // Natural organic spacing without boundary stacking
          const jitterX = ((Math.sin(r * 127.1 + c * 311.7) * 43758.5453) % 1) * 0.018;
          const jitterY = ((Math.cos(r * 269.5 + c * 183.3) * 43758.5453) % 1) * 0.035;

          const u = Math.max(0.01, Math.min(0.99, baseU + jitterX));
          const v = Math.max(0.04, Math.min(0.96, baseV + jitterY));

          particles.push({ u, v, isTracked });
        }
      }
    }

    function resize() {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      width = rect.width;
      height = rect.height;
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      ctx.resetTransform();
      ctx.scale(dpr, dpr);
    }

    function drawTuningFork(x, centerY, prongDisp) {
      ctx.save();

      // Stem / Handle
      ctx.fillStyle = '#64748b';
      ctx.strokeStyle = '#475569';
      ctx.lineWidth = 1.5;

      const stemWidth = 7;
      const stemLength = 28;
      const uRadius = 14;
      const tineLength = 46;
      const tineThickness = 6;
      const gap = 16;

      // Draw Stem Handle
      ctx.beginPath();
      ctx.roundRect(x - stemLength - uRadius, centerY - stemWidth / 2, stemLength, stemWidth, 3);
      ctx.fill();
      ctx.stroke();

      // Handle grip end
      ctx.beginPath();
      ctx.arc(x - stemLength - uRadius, centerY, 5, 0, Math.PI * 2);
      ctx.fillStyle = '#475569';
      ctx.fill();

      // U-Base connecting stem to tines
      ctx.fillStyle = '#64748b';
      ctx.beginPath();
      ctx.arc(x - uRadius + 4, centerY, uRadius, -Math.PI / 2, Math.PI / 2, false);
      ctx.lineWidth = 7;
      ctx.strokeStyle = '#64748b';
      ctx.stroke();

      // Top tine with dynamic vibration flex
      const topTineY = centerY - gap / 2 - tineThickness / 2;
      ctx.beginPath();
      ctx.moveTo(x - 2, topTineY);
      ctx.quadraticCurveTo(
        x + tineLength * 0.5,
        topTineY + prongDisp * 0.3,
        x + tineLength,
        topTineY + prongDisp
      );
      ctx.lineWidth = tineThickness;
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#475569';
      ctx.stroke();

      // Bottom tine with dynamic vibration flex
      const btmTineY = centerY + gap / 2 + tineThickness / 2;
      ctx.beginPath();
      ctx.moveTo(x - 2, btmTineY);
      ctx.quadraticCurveTo(
        x + tineLength * 0.5,
        btmTineY - prongDisp * 0.3,
        x + tineLength,
        btmTineY - prongDisp
      );
      ctx.lineWidth = tineThickness;
      ctx.lineCap = 'round';
      ctx.strokeStyle = '#475569';
      ctx.stroke();

      // Subtle vibration ripples directly in front of prongs
      ctx.strokeStyle = 'rgba(34, 183, 255, 0.45)';
      ctx.lineWidth = 2;
      for (let i = 1; i <= 2; i++) {
        const arcX = x + tineLength + 4 + i * 7 + (prongDisp * 0.5);
        ctx.beginPath();
        ctx.arc(arcX, centerY, 16 + i * 8, -Math.PI / 3, Math.PI / 3);
        ctx.stroke();
      }

      // High-contrast label under tuning fork
      ctx.fillStyle = '#334155';
      ctx.font = '700 12px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('Source', x + 4, centerY + gap + tineThickness + 24);

      ctx.restore();
    }

    function draw() {
      ctx.clearRect(0, 0, width, height);

      const forkX = Math.max(34, width * 0.11);
      const centerY = height * 0.48;
      const startX = forkX + 64;
      const airWidth = Math.max(10, width - startX - 16);

      // Vibration displacement of tuning fork tines
      const prongDisp = Math.sin(time * freq) * 5.5;
      drawTuningFork(forkX, centerY, prongDisp);

      // Draw particles
      for (let i = 0; i < particles.length; i++) {
        const p = particles[i];
        const baseX = startX + p.u * airWidth;
        const py = p.v * height;

        // Longitudinal compression wave
        const distFromSource = p.u * airWidth;
        const phase = time * freq - distFromSource * k;
        
        // Attenuation over distance
        const attenuation = Math.max(0.4, 1 - (p.u * 0.6));
        const dispX = Math.sin(phase) * (maxAmp * attenuation);

        const px = baseX + dispX;

        if (p.isTracked) {
          // Track line showing back-and-forth oscillation
          ctx.save();
          ctx.strokeStyle = 'rgba(217, 119, 6, 0.4)';
          ctx.lineWidth = 2;
          ctx.setLineDash([3, 3]);
          ctx.beginPath();
          ctx.moveTo(baseX - maxAmp * attenuation, py);
          ctx.lineTo(baseX + maxAmp * attenuation, py);
          ctx.stroke();
          ctx.restore();

          // Highlighted tracked particle
          ctx.beginPath();
          ctx.arc(px, py, 6, 0, Math.PI * 2);
          ctx.fillStyle = '#f59e0b';
          ctx.fill();
          ctx.strokeStyle = '#b45309';
          ctx.lineWidth = 2;
          ctx.stroke();
        } else {
          // Standard air particle
          ctx.beginPath();
          ctx.arc(px, py, 3.2, 0, Math.PI * 2);
          ctx.fillStyle = '#22b7ff';
          ctx.fill();
        }
      }

      if (isRunning) {
        time += 1;
      }
      requestAnimationFrame(draw);
    }

    initParticles();
    window.addEventListener('resize', resize);
    resize();
    requestAnimationFrame(draw);

    toggleBtn.addEventListener('click', () => {
      isRunning = !isRunning;
      toggleBtn.textContent = isRunning ? '⏸ Pause' : '▶ Play';
    });
  </script>
</body>
</html>

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
    }
    .toggle-btn {
      flex: 1;
      padding: 8px 12px;
      border-radius: 20px;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .toggle-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    /* Visual container */
    .stage {
      position: relative;
      width: 100%;
      max-width: 560px;
      aspect-ratio: 16 / 9;
      background: radial-gradient(circle at 10% 50%, #f1f5f9 0%, #ffffff 80%);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Info Badge */
    .callout {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .callout.loud {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .callout.faint {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    /* Bottom Summary */
    .summary-box {
      width: 100%;
      max-width: 520px;
      background: #f8fafc;
      border-left: 3px solid #2563eb;
      border-radius: 4px;
      padding: 8px 12px;
      font-size: 12.5px;
      line-height: 1.4;
      color: #1e2945;
    }

    /* SVG Transitions */
    .wave-arc {
      fill: none;
      stroke-width: 2.5;
      transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
    }
    .cone {
      transition: opacity 0.3s ease, fill 0.3s ease;
    }
    .dot {
      transition: transform 0.3s ease, fill 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
      transform-origin: center;
    }
    .ear-marker {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btn1m" class="toggle-btn active" onclick="setDistance(1)">
      📍 Close (1 Metre)
    </button>
    <button id="btn4m" class="toggle-btn" onclick="setDistance(4)">
      📍 Far (4 Metres)
    </button>
  </div>

  
  <div class="stage">
    <div id="calloutBadge" class="callout loud">
      🔊 4/12 energy packets (Loud)
    </div>

    <svg viewBox="0 0 520 280">
      <defs>
        
        <radialGradient id="loudGlow" cx="0%" cy="50%" r="100%">
          <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.28" />
          <stop offset="100%" stop-color="#3b82f6" stop-opacity="0" />
        </radialGradient>
        <radialGradient id="faintGlow" cx="0%" cy="50%" r="100%">
          <stop offset="0%" stop-color="#94a3b8" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#94a3b8" stop-opacity="0" />
        </radialGradient>
        <filter id="glow">
          <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="#f59e0b" flood-opacity="0.6"/>
        </filter>
      </defs>

      
      <path d="M 40 140 L 480 30" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="3,3" />
      <path d="M 40 140 L 480 250" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="3,3" />
      <path d="M 40 140 L 490 140" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="3,3" />

      
      
      <path id="cone1m" class="cone" d="M 40 140 L 165 92 A 130 130 0 0 1 165 188 Z" fill="url(#loudGlow)" opacity="1" />
      
      
      <path id="cone4m" class="cone" d="M 40 140 L 440 115 A 400 400 0 0 1 440 165 Z" fill="url(#faintGlow)" opacity="0" />

      
      <path id="arc4m" class="wave-arc" d="M 440 30 A 400 400 0 0 1 440 250" stroke="#cbd5e1" opacity="0.6" stroke-dasharray="5,4" />

      
      <path id="arc1m" class="wave-arc" d="M 125 45 A 130 130 0 0 1 125 235" stroke="#2563eb" stroke-width="3" opacity="1" />

      
      <g id="dots1m"></g>

      
      <g id="dots4m" opacity="0.45"></g>

      
      <g transform="translate(20, 120)">
        <circle cx="20" cy="20" r="18" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
        <text x="20" y="25" font-size="18" text-anchor="middle">🔔</text>
        <text x="20" y="44" font-size="10" font-weight="700" fill="#475569" text-anchor="middle">Source</text>
      </g>

      
      <g id="earGroup" class="ear-marker" transform="translate(170, 120)">
        <rect x="0" y="0" width="38" height="40" rx="8" fill="#ffffff" stroke="#2563eb" stroke-width="2" />
        <text x="19" y="26" font-size="20" text-anchor="middle">👂</text>
        <text id="earDistLabel" x="19" y="52" font-size="11" font-weight="800" fill="#2563eb" text-anchor="middle">1 m</text>
      </g>
    </svg>
  </div>

  
  <div id="summaryText" class="summary-box">
    <strong>Same energy, larger area:</strong> Close up, your ear intercepts <strong>33%</strong> of sound packets. Farther away, they spread out and your ear only catches <strong>8%</strong>.
  </div>

  <script>
    const CX = 40, CY = 140;
    const R1 = 130, R4 = 400;
    const TOTAL_DOTS = 12;
    const ANGLE_SPREAD = 88; // -44 deg to +44 deg

    // Audio context tone synthesis
    let audioCtx = null;
    function playChime(isLoud) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(isLoud ? 587.33 : 523.25, audioCtx.currentTime); // D5 or C5

        const vol = isLoud ? 0.35 : 0.04;
        gain.gain.setValueAtTime(vol, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.5);

        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.5);
      } catch (e) {}
    }

    // Build dots on arcs
    function createDots() {
      const g1 = document.getElementById('dots1m');
      const g4 = document.getElementById('dots4m');

      for (let i = 0; i < TOTAL_DOTS; i++) {
        const angleDeg = -ANGLE_SPREAD / 2 + (i + 0.5) * (ANGLE_SPREAD / TOTAL_DOTS);
        const rad = (angleDeg * Math.PI) / 180;

        // 1m arc dots
        const x1 = CX + R1 * Math.cos(rad);
        const y1 = CY + R1 * Math.sin(rad);
        const isCaught1m = i >= 4 && i <= 7; // middle 4 dots

        const c1 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c1.setAttribute('cx', x1);
        c1.setAttribute('cy', y1);
        c1.setAttribute('r', isCaught1m ? '6' : '4.5');
        c1.setAttribute('fill', isCaught1m ? '#f59e0b' : '#fbbf24');
        c1.setAttribute('stroke', isCaught1m ? '#b45309' : '#d97706');
        c1.setAttribute('stroke-width', isCaught1m ? '1.5' : '1');
        c1.setAttribute('class', 'dot');
        c1.setAttribute('id', `dot1_${i}`);
        if (isCaught1m) c1.setAttribute('filter', 'url(#glow)');
        g1.appendChild(c1);

        // 4m arc dots
        const x4 = CX + R4 * Math.cos(rad);
        const y4 = CY + R4 * Math.sin(rad);
        const isCaught4m = i === 5 || i === 6; // only 1-2 caught

        const c4 = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c4.setAttribute('cx', x4);
        c4.setAttribute('cy', y4);
        c4.setAttribute('r', '4.5');
        c4.setAttribute('fill', '#fcd34d');
        c4.setAttribute('stroke', '#d97706');
        c4.setAttribute('stroke-width', '1');
        c4.setAttribute('class', 'dot');
        c4.setAttribute('id', `dot4_${i}`);
        g4.appendChild(c4);
      }
    }

    function setDistance(dist, playSound = true) {
      const is1m = dist === 1;

      // Update buttons
      document.getElementById('btn1m').classList.toggle('active', is1m);
      document.getElementById('btn4m').classList.toggle('active', !is1m);

      // Update Arcs & Cones
      document.getElementById('arc1m').setAttribute('stroke', is1m ? '#2563eb' : '#cbd5e1');
      document.getElementById('arc1m').setAttribute('stroke-width', is1m ? '3' : '2');
      document.getElementById('arc1m').setAttribute('opacity', is1m ? '1' : '0.4');

      document.getElementById('arc4m').setAttribute('stroke', !is1m ? '#2563eb' : '#cbd5e1');
      document.getElementById('arc4m').setAttribute('stroke-width', !is1m ? '3' : '2');
      document.getElementById('arc4m').setAttribute('opacity', !is1m ? '1' : '0.4');

      document.getElementById('cone1m').setAttribute('opacity', is1m ? '1' : '0');
      document.getElementById('cone4m').setAttribute('opacity', !is1m ? '1' : '0');

      document.getElementById('dots1m').setAttribute('opacity', is1m ? '1' : '0.35');
      document.getElementById('dots4m').setAttribute('opacity', !is1m ? '1' : '0.35');

      // Update Ear Position
      const ear = document.getElementById('earGroup');
      const earLabel = document.getElementById('earDistLabel');
      if (is1m) {
        ear.setAttribute('transform', 'translate(170, 120)');
        earLabel.textContent = '1 m';
      } else {
        ear.setAttribute('transform', 'translate(440, 120)');
        earLabel.textContent = '4 m';
      }

      // Update 4m dot highlights when active
      for (let i = 0; i < TOTAL_DOTS; i++) {
        const d4 = document.getElementById(`dot4_${i}`);
        if (d4) {
          const isCaught = i === 5; // ear catches 1 energy packet
          d4.setAttribute('r', (!is1m && isCaught) ? '6' : '4.5');
          d4.setAttribute('fill', (!is1m && isCaught) ? '#f59e0b' : '#fcd34d');
          d4.setAttribute('stroke', (!is1m && isCaught) ? '#b45309' : '#d97706');
          d4.setAttribute('stroke-width', (!is1m && isCaught) ? '1.5' : '1');
          if (!is1m && isCaught) {
            d4.setAttribute('filter', 'url(#glow)');
          } else {
            d4.removeAttribute('filter');
          }
        }
      }

      // Update Callout Badge
      const badge = document.getElementById('calloutBadge');
      if (is1m) {
        badge.className = 'callout loud';
        badge.innerHTML = '🔊 4/12 energy packets (Loud)';
      } else {
        badge.className = 'callout faint';
        badge.innerHTML = '🔉 1/12 energy packet (Faint)';
      }

      if (playSound) {
        playChime(is1m);
      }
    }

    createDots();
  </script>
</body>
</html>

science.ks2.y2.t4.s5

Aligned learning resources

Related diagrams