<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Longitudinal Wave in a Spring</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    html, body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      overflow: hidden;
    }
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      gap: 8px;
    }
    .top-bar {
      width: 100%;
      max-width: 600px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #475569;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .wave-badge {
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 700;
    }
    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      flex: 1;
      min-height: 250px;
      max-height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .controls {
      width: 100%;
      max-width: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      padding-bottom: 2px;
    }
    button {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }
    button:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    button.active {
      background: #0284c7;
      border-color: #0369a1;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="top-bar">
    <div class="badge wave-badge">Wave Energy ➔</div>
    <div class="badge">
      <span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef4444;"></span>
      Coil Particle ↔
    </div>
  </div>

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

  <div class="controls">
    <button id="btnPlay" class="active">⏸ Pause</button>
    <button id="btnSpeed">⏱ Slow Motion</button>
  </div>

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

    let isPlaying = true;
    let isSlow = false;
    let time = 0;

    const NUM_COILS = 52;
    const MARKED_INDEX = Math.floor(NUM_COILS / 2);
    // Adjusted wavelength ratio to ensure wide physical separation between compressions & rarefactions
    const WAVELENGTH_RATIO = 0.72;
    const AMPLITUDE_RATIO = 0.042;

    function resize() {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      canvas.width = Math.floor(rect.width * dpr);
      canvas.height = Math.floor(rect.height * dpr);
    }
    window.addEventListener('resize', resize);
    resize();

    btnPlay.addEventListener('click', () => {
      isPlaying = !isPlaying;
      btnPlay.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      btnPlay.classList.toggle('active', isPlaying);
    });

    btnSpeed.addEventListener('click', () => {
      isSlow = !isSlow;
      btnSpeed.textContent = isSlow ? '⚡ Normal Speed' : '⏱ Slow Motion';
      btnSpeed.classList.toggle('active', isSlow);
    });

    function draw() {
      const dpr = window.devicePixelRatio || 1;
      const w = canvas.width / dpr;
      const h = canvas.height / dpr;

      if (w <= 0 || h <= 0) return;

      ctx.save();
      ctx.scale(dpr, dpr);
      ctx.clearRect(0, 0, w, h);

      // Adaptive horizontal margins based on container width
      const marginX = w < 400 ? 28 : 42;
      const usableW = w - marginX * 2;
      const k = (2 * Math.PI) / (usableW * WAVELENGTH_RATIO);
      const amp = Math.min(usableW * AMPLITUDE_RATIO, 18);

      // Adaptive vertical distribution to prevent any overlap
      const springY = Math.max(34, h * 0.22);
      const springRadius = Math.min(22, Math.max(15, h * 0.09));
      
      const labelY = springY + springRadius + 18;
      const graphTop = labelY + 28;
      const graphBottom = h - 26;
      const graphMidY = (graphTop + graphBottom) / 2;
      const graphAmp = Math.min(28, (graphBottom - graphTop) * 0.38);

      // Font size responsive scaling
      const fontSize = w < 400 ? 10 : 11;
      const boldFont = `bold ${fontSize}px system-ui, -apple-system, sans-serif`;
      const regularFont = `${fontSize}px system-ui, -apple-system, sans-serif`;

      // 1. Calculate coil positions
      const coils = [];
      for (let i = 0; i < NUM_COILS; i++) {
        const x0 = marginX + (i / (NUM_COILS - 1)) * usableW;
        // Longitudinal displacement
        const disp = -amp * Math.sin(k * x0 - time);
        const x = x0 + disp;
        coils.push({ x0, x, isMarked: i === MARKED_INDEX });
      }

      // 2. Equilibrium indicator line for marked coil
      const markedCoil = coils[MARKED_INDEX];
      ctx.setLineDash([3, 3]);
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1.2;
      ctx.beginPath();
      ctx.moveTo(markedCoil.x0, springY - springRadius - 14);
      ctx.lineTo(markedCoil.x0, graphBottom + 8);
      ctx.stroke();
      ctx.setLineDash([]);

      // Label: Equilibrium
      ctx.fillStyle = '#64748b';
      ctx.font = regularFont;
      ctx.textAlign = 'center';
      ctx.fillText('Equilibrium', markedCoil.x0, springY - springRadius - 6);

      // 3. Draw Slinky spring coils (3D helix loop effect)
      for (let i = 0; i < coils.length; i++) {
        const c = coils[i];
        const isM = c.isMarked;

        // Back-half loop
        ctx.beginPath();
        ctx.ellipse(c.x, springY, Math.max(1.2, amp * 0.38), springRadius, 0, Math.PI / 2, (3 * Math.PI) / 2);
        ctx.strokeStyle = isM ? '#fca5a5' : '#cbd5e1';
        ctx.lineWidth = isM ? 2.5 : 1.2;
        ctx.stroke();

        // Front-half loop
        ctx.beginPath();
        ctx.ellipse(c.x, springY, Math.max(1.2, amp * 0.38), springRadius, 0, (3 * Math.PI) / 2, Math.PI / 2);
        ctx.strokeStyle = isM ? '#ef4444' : '#334155';
        ctx.lineWidth = isM ? 3.0 : 1.8;
        ctx.stroke();

        // Red particle on marked coil
        if (isM) {
          ctx.beginPath();
          ctx.arc(c.x, springY + springRadius, 4.5, 0, Math.PI * 2);
          ctx.fillStyle = '#ef4444';
          ctx.fill();
          ctx.strokeStyle = '#ffffff';
          ctx.lineWidth = 1.5;
          ctx.stroke();

          // Oscillation range bar for red coil
          ctx.beginPath();
          ctx.moveTo(c.x0 - amp, springY + springRadius + 8);
          ctx.lineTo(c.x0 + amp, springY + springRadius + 8);
          ctx.strokeStyle = '#ef4444';
          ctx.lineWidth = 1.2;
          ctx.stroke();

          ctx.fillStyle = '#ef4444';
          ctx.beginPath();
          ctx.arc(c.x0 - amp, springY + springRadius + 8, 1.8, 0, Math.PI * 2);
          ctx.arc(c.x0 + amp, springY + springRadius + 8, 1.8, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      // 4. Feature labels on spring (Compression / Rarefaction)
      let compX = null;
      let compDist = Infinity;
      let rareX = null;
      let rareDist = Infinity;

      // Find the most centered compression and rarefaction
      const midPoint = marginX + usableW / 2;
      for (let px = marginX + 25; px <= marginX + usableW - 25; px += 2) {
        const val = Math.cos(k * px - time);
        if (val > 0.96) {
          const d = Math.abs(px - midPoint);
          if (d < compDist) {
            compDist = d;
            compX = px;
          }
        } else if (val < -0.96) {
          const d = Math.abs(px - midPoint);
          if (d < rareDist) {
            rareDist = d;
            rareX = px;
          }
        }
      }

      // Draw Compression Label if found
      if (compX !== null) {
        // Arrow pointing up
        ctx.beginPath();
        ctx.moveTo(compX, labelY - 5);
        ctx.lineTo(compX, springY + springRadius + 3);
        ctx.strokeStyle = '#0284c7';
        ctx.lineWidth = 1.5;
        ctx.stroke();

        ctx.fillStyle = '#0284c7';
        ctx.font = boldFont;
        ctx.textAlign = 'center';
        ctx.fillText('Compression', compX, labelY + 6);
      }

      // Draw Rarefaction Label if found and separated
      if (rareX !== null) {
        // If too close to compression on small screens, adjust or prioritize
        const separation = compX !== null ? Math.abs(rareX - compX) : 999;
        if (separation > (w < 400 ? 70 : 80)) {
          // Arrow pointing up
          ctx.beginPath();
          ctx.moveTo(rareX, labelY - 5);
          ctx.lineTo(rareX, springY + springRadius + 3);
          ctx.strokeStyle = '#64748b';
          ctx.lineWidth = 1.5;
          ctx.stroke();

          ctx.fillStyle = '#64748b';
          ctx.font = boldFont;
          ctx.textAlign = 'center';
          ctx.fillText('Rarefaction', rareX, labelY + 6);
        }
      }

      // 5. Density Graph Axes
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1.2;

      // X-Axis (Equilibrium line)
      ctx.beginPath();
      ctx.moveTo(marginX, graphMidY);
      ctx.lineTo(marginX + usableW, graphMidY);
      ctx.stroke();

      // Y-Axis
      ctx.beginPath();
      ctx.moveTo(marginX, graphBottom);
      ctx.lineTo(marginX, graphTop - 12);
      ctx.stroke();

      // Density Y-Axis Title - placed safely above graphTop to avoid any curve overlap
      ctx.fillStyle = '#475569';
      ctx.font = boldFont;
      ctx.textAlign = 'left';
      ctx.fillText('Density ↑', marginX, graphTop - 15);

      // Position (x) label
      ctx.font = regularFont;
      ctx.fillStyle = '#64748b';
      ctx.textAlign = 'right';
      ctx.fillText('Position (x)', marginX + usableW, graphMidY - 6);

      // 6. Draw Continuous Density Curve
      ctx.beginPath();
      for (let px = 0; px <= usableW; px += 2) {
        const xPos = marginX + px;
        const densityVal = Math.cos(k * xPos - time);
        const yPos = graphMidY - densityVal * graphAmp;

        if (px === 0) ctx.moveTo(xPos, yPos);
        else ctx.lineTo(xPos, yPos);
      }
      ctx.strokeStyle = '#0284c7';
      ctx.lineWidth = 2.2;
      ctx.stroke();

      // Subtle fill under density curve
      ctx.lineTo(marginX + usableW, graphMidY);
      ctx.lineTo(marginX, graphMidY);
      ctx.closePath();
      ctx.fillStyle = 'rgba(2, 132, 199, 0.08)';
      ctx.fill();

      // 7. Marked coil correlation point on density graph
      const markedDensity = Math.cos(k * markedCoil.x - time);
      const markedGraphY = graphMidY - markedDensity * graphAmp;
      ctx.beginPath();
      ctx.arc(markedCoil.x, markedGraphY, 4, 0, Math.PI * 2);
      ctx.fillStyle = '#ef4444';
      ctx.fill();
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1.2;
      ctx.stroke();

      // Graph baseline markers (High/Low) on left axis
      ctx.fillStyle = '#94a3b8';
      ctx.font = `${Math.max(9, fontSize - 2)}px system-ui, sans-serif`;
      ctx.textAlign = 'right';
      ctx.fillText('High', marginX - 4, graphMidY - graphAmp + 4);
      ctx.fillText('Low', marginX - 4, graphMidY + graphAmp + 4);

      ctx.restore();
    }

    let lastTimestamp = 0;
    function animate(timestamp) {
      if (!lastTimestamp) lastTimestamp = timestamp;
      const dt = Math.min((timestamp - lastTimestamp) / 1000, 0.1);
      lastTimestamp = timestamp;

      if (isPlaying) {
        const speed = isSlow ? 1.2 : 3.0;
        time += dt * speed;
      }
      draw();
      requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
  </script>
</body>
</html>

Comparing Transverse and Longitudinal Waves with Slinky Springs

<!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; }
    html, body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      overflow-x: hidden;
    }
    .main-layout {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      padding: 10px 14px;
      gap: 8px;
    }
    .canvas-container {
      position: relative;
      width: 100%;
      height: 380px;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 4px 0;
    }
    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
    }
    .speed-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>
  <div class="main-layout">
    <div class="canvas-container">
      <canvas id="waveCanvas"></canvas>
    </div>
    <div class="controls">
      <button id="togglePlay" class="btn" aria-label="Toggle Play/Pause">
        <span id="playIcon">⏸</span> <span id="playText">Pause</span>
      </button>
      <button id="toggleSlow" class="btn" aria-label="Toggle Speed">
        <span>⏱</span> <span id="slowText">Slow Motion</span>
      </button>
      <span class="speed-tag">Track the highlighted coil ●</span>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('waveCanvas');
    const ctx = canvas.getContext('2d');
    const toggleBtn = document.getElementById('togglePlay');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');
    const slowBtn = document.getElementById('toggleSlow');
    const slowText = document.getElementById('slowText');

    let isPlaying = true;
    let isSlow = false;
    let time = 0;
    let lastStamp = performance.now();

    function resize() {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    window.addEventListener('resize', resize);
    resize();

    toggleBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playIcon.textContent = isPlaying ? '⏸' : '▶';
      playText.textContent = isPlaying ? 'Pause' : 'Play';
    });

    slowBtn.addEventListener('click', () => {
      isSlow = !isSlow;
      slowBtn.classList.toggle('active', isSlow);
      slowText.textContent = isSlow ? 'Normal Speed' : 'Slow Motion';
    });

    function drawArrow(ctx, x1, y1, x2, y2, color, headLen = 7, doubleHead = false) {
      const angle = Math.atan2(y2 - y1, x2 - x1);
      ctx.save();
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = 2.2;
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();

      // End head
      ctx.beginPath();
      ctx.moveTo(x2, y2);
      ctx.lineTo(x2 - headLen * Math.cos(angle - Math.PI / 6), y2 - headLen * Math.sin(angle - Math.PI / 6));
      ctx.lineTo(x2 - headLen * Math.cos(angle + Math.PI / 6), y2 - headLen * Math.sin(angle + Math.PI / 6));
      ctx.closePath();
      ctx.fill();

      // Start head if double
      if (doubleHead) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 + headLen * Math.cos(angle - Math.PI / 6), y1 + headLen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(x1 + headLen * Math.cos(angle + Math.PI / 6), y1 + headLen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
      }
      ctx.restore();
    }

    function render(stamp) {
      const dt = (stamp - lastStamp) / 1000;
      lastStamp = stamp;
      if (isPlaying) {
        time += dt * (isSlow ? 1.0 : 2.5);
      }

      const w = canvas.getBoundingClientRect().width;
      const h = canvas.getBoundingClientRect().height;

      ctx.clearRect(0, 0, w, h);

      const slinkyLeft = 32;
      const slinkyRight = w - 32;
      const slinkyWidth = slinkyRight - slinkyLeft;
      const coils = 55;
      const highlightedCoilIndex = Math.floor(coils * 0.28);

      // --- SECTION 1: TRANSVERSE WAVE ---
      const y1 = 88;
      const amp1 = 28;
      const k1 = (Math.PI * 4) / slinkyWidth;

      // Section Title
      ctx.fillStyle = '#1e2945';
      ctx.font = 'bold 15px system-ui, sans-serif';
      ctx.fillText('TRANSVERSE WAVE', slinkyLeft, 24);

      // Propagation Arrow (Top)
      drawArrow(ctx, slinkyLeft, 44, slinkyLeft + 150, 44, '#16a34a', 7, false);
      ctx.fillStyle = '#16a34a';
      ctx.font = 'bold 12px system-ui, sans-serif';
      ctx.fillText('Wave Propagation (v)', slinkyLeft + 160, 48);

      // Crest & Trough markers (static visual cues aligned to current peaks)
      // Find peak and trough near center
      const crestPhase = (Math.PI / 2 + time) / k1;
      const troughPhase = (3 * Math.PI / 2 + time) / k1;
      const crestX = slinkyLeft + (((crestPhase % slinkyWidth) + slinkyWidth) % slinkyWidth);
      const troughX = slinkyLeft + (((troughPhase % slinkyWidth) + slinkyWidth) % slinkyWidth);

      // Draw dashed equilibrium line
      ctx.save();
      ctx.strokeStyle = '#e2e8f0';
      ctx.setLineDash([4, 4]);
      ctx.beginPath();
      ctx.moveTo(slinkyLeft, y1);
      ctx.lineTo(slinkyRight, y1);
      ctx.stroke();
      ctx.restore();

      // Draw Transverse Slinky Coils (back halves then front halves)
      let hlX1 = 0, hlY1 = 0;
      for (let i = 0; i < coils; i++) {
        const u = i / (coils - 1);
        const x = slinkyLeft + u * slinkyWidth;
        const waveDisp = Math.sin(k1 * (x - slinkyLeft) - time) * amp1;
        const cy = y1 + waveDisp;

        if (i === highlightedCoilIndex) {
          hlX1 = x;
          hlY1 = cy;
        }

        const isHl = (i === highlightedCoilIndex);
        ctx.strokeStyle = isHl ? '#0284c7' : '#94a3b8';
        ctx.lineWidth = isHl ? 3 : 1.8;

        ctx.beginPath();
        ctx.ellipse(x, cy, 3.5, 12, 0, 0, Math.PI * 2);
        ctx.stroke();
      }

      // Highlighted particle marker (Transverse)
      ctx.fillStyle = '#0284c7';
      ctx.beginPath();
      ctx.arc(hlX1, hlY1, 5.5, 0, Math.PI * 2);
      ctx.fill();

      // Oscillation arrow for Transverse (vertical)
      const arrowX1 = slinkyLeft + 35;
      const arrowYMid1 = y1 + 55;
      drawArrow(ctx, arrowX1, arrowYMid1 - 20, arrowX1, arrowYMid1 + 20, '#0284c7', 6, true);
      ctx.fillStyle = '#0284c7';
      ctx.font = '600 12px system-ui, sans-serif';
      ctx.fillText('Particle Oscillation (u ⊥ v)', arrowX1 + 10, arrowYMid1 + 4);

      // Crest / Trough labels
      if (crestX > slinkyLeft + 60 && crestX < slinkyRight - 60) {
        ctx.fillStyle = '#64748b';
        ctx.font = '11px system-ui, sans-serif';
        ctx.fillText('Crest', crestX - 14, y1 - amp1 - 8);
      }
      if (troughX > slinkyLeft + 60 && troughX < slinkyRight - 60) {
        ctx.fillStyle = '#64748b';
        ctx.font = '11px system-ui, sans-serif';
        ctx.fillText('Trough', troughX - 16, y1 + amp1 + 20);
      }

      // --- SECTION 2: LONGITUDINAL WAVE ---
      const y2 = 270;
      const amp2 = 18;
      const k2 = (Math.PI * 4) / slinkyWidth;

      // Section Title
      ctx.fillStyle = '#1e2945';
      ctx.font = 'bold 15px system-ui, sans-serif';
      ctx.fillText('LONGITUDINAL WAVE', slinkyLeft, 206);

      // Propagation Arrow (Bottom)
      drawArrow(ctx, slinkyLeft, 226, slinkyLeft + 150, 226, '#16a34a', 7, false);
      ctx.fillStyle = '#16a34a';
      ctx.font = 'bold 12px system-ui, sans-serif';
      ctx.fillText('Wave Propagation (v)', slinkyLeft + 160, 230);

      // Draw Longitudinal Slinky Coils
      let hlX2 = 0;
      for (let i = 0; i < coils; i++) {
        const u = i / (coils - 1);
        const x0 = slinkyLeft + u * slinkyWidth;
        const waveDisp = Math.sin(k2 * (x0 - slinkyLeft) - time) * amp2;
        const cx = x0 + waveDisp;

        if (i === highlightedCoilIndex) {
          hlX2 = cx;
        }

        const isHl = (i === highlightedCoilIndex);
        ctx.strokeStyle = isHl ? '#0284c7' : '#94a3b8';
        ctx.lineWidth = isHl ? 3 : 1.8;

        ctx.beginPath();
        ctx.ellipse(cx, y2, 2.5, 14, 0, 0, Math.PI * 2);
        ctx.stroke();
      }

      // Highlighted particle marker (Longitudinal)
      ctx.fillStyle = '#0284c7';
      ctx.beginPath();
      ctx.arc(hlX2, y2, 5.5, 0, Math.PI * 2);
      ctx.fill();

      // Oscillation arrow for Longitudinal (horizontal)
      const arrowX2 = slinkyLeft + 15;
      const arrowY2 = y2 + 50;
      drawArrow(ctx, arrowX2, arrowY2, arrowX2 + 40, arrowY2, '#0284c7', 6, true);
      ctx.fillStyle = '#0284c7';
      ctx.font = '600 12px system-ui, sans-serif';
      ctx.fillText('Particle Oscillation (u ∥ v)', arrowX2 + 48, arrowY2 + 4);

      // Dynamic Compression & Rarefaction labels
      // Compression happens where d(disp)/dx is most negative: cos(k*x - t) = -1 => k*x - t = π
      const compPhase = (Math.PI + time) / k2;
      const rarePhase = (0 + time) / k2;
      const compX = slinkyLeft + (((compPhase % slinkyWidth) + slinkyWidth) % slinkyWidth);
      const rareX = slinkyLeft + (((rarePhase % slinkyWidth) + slinkyWidth) % slinkyWidth);

      if (compX > slinkyLeft + 50 && compX < slinkyRight - 50) {
        ctx.fillStyle = '#64748b';
        ctx.font = '11px system-ui, sans-serif';
        ctx.fillText('Compression', compX - 32, y2 - 20);
        // Small bracket indicator
        ctx.strokeStyle = '#cbd5e1';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(compX - 18, y2 - 16);
        ctx.lineTo(compX + 18, y2 - 16);
        ctx.stroke();
      }

      if (rareX > slinkyLeft + 50 && rareX < slinkyRight - 50) {
        ctx.fillStyle = '#64748b';
        ctx.font = '11px system-ui, sans-serif';
        ctx.fillText('Rarefaction', rareX - 28, y2 + 28);
        ctx.strokeStyle = '#cbd5e1';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(rareX - 22, y2 + 18);
        ctx.lineTo(rareX + 22, y2 + 18);
        ctx.stroke();
      }

      requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
  </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>Transverse Wave Simulation</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      overflow: hidden;
    }
    #app {
      width: 100%;
      height: 100%;
      max-height: 560px;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
    }
    #canvas-container {
      position: relative;
      flex: 1;
      width: 100%;
      min-height: 0;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .controls {
      flex-shrink: 0;
      height: 46px;
      padding: 0 14px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .ctrl-group {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      line-height: 1;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn:active {
      background: #e2e8f0;
    }
    input[type="range"] {
      accent-color: #0284c7;
      cursor: pointer;
      width: 110px;
    }
    @media (max-width: 380px) {
      .controls { padding: 0 8px; height: 42px; }
      .btn { padding: 5px 10px; font-size: 12px; }
      .ctrl-group { font-size: 12px; gap: 5px; }
      input[type="range"] { width: 70px; }
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="canvas-container">
      <canvas id="simCanvas"></canvas>
    </div>
    <div class="controls">
      <button id="playBtn" class="btn">⏸ Pause</button>
      <div class="ctrl-group">
        <span>Speed</span>
        <input id="speedSlider" type="range" min="0.1" max="1.5" step="0.05" value="0.5" aria-label="Simulation speed">
      </div>
    </div>
  </div>

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

    let isPlaying = true;
    let speed = 0.5;
    let time = 0;
    let lastTimestamp = 0;

    function resize() {
      const dpr = window.devicePixelRatio || 1;
      const rect = canvas.getBoundingClientRect();
      if (rect.width === 0 || rect.height === 0) return;
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      ctx.resetTransform();
      ctx.scale(dpr, dpr);
    }
    window.addEventListener('resize', resize);
    resize();

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
    });

    speedSlider.addEventListener('input', (e) => {
      speed = parseFloat(e.target.value);
    });

    function drawArrow(ctx, fromX, fromY, toX, toY, color, width = 2, headLen = 7) {
      const dx = toX - fromX;
      const dy = toY - fromY;
      const angle = Math.atan2(dy, dx);
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = width;
      ctx.beginPath();
      ctx.moveTo(fromX, fromY);
      ctx.lineTo(toX, toY);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(toX, toY);
      ctx.lineTo(toX - headLen * Math.cos(angle - Math.PI / 6), toY - headLen * Math.sin(angle - Math.PI / 6));
      ctx.lineTo(toX - headLen * Math.cos(angle + Math.PI / 6), toY - headLen * Math.sin(angle + Math.PI / 6));
      ctx.closePath();
      ctx.fill();
    }

    function render(timestamp) {
      if (!lastTimestamp) lastTimestamp = timestamp;
      const dt = Math.min((timestamp - lastTimestamp) / 1000, 0.1);
      lastTimestamp = timestamp;

      if (isPlaying) {
        time += dt * speed * 3.5;
      }

      const rect = canvas.getBoundingClientRect();
      const w = rect.width;
      const h = rect.height;

      if (w === 0 || h === 0) {
        requestAnimationFrame(render);
        return;
      }

      ctx.clearRect(0, 0, w, h);

      const isMobile = w < 420;
      const isNarrowMobile = w < 360;

      // Layout sizing
      const topH = h * 0.56;
      const bottomH = h - topH;
      const springMidY = topH * 0.54;
      const amp = Math.min(topH * 0.25, 34);
      const wavelength = Math.min(w * 0.58, 250);
      const k = (2 * Math.PI) / wavelength;
      const midX = w / 2;

      // ==========================================
      // 1. TOP PANEL: Wave & Spring Simulation
      // ==========================================

      // Background subtle guide for center particle path
      ctx.save();
      ctx.setLineDash([4, 4]);
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.moveTo(midX, 22);
      ctx.lineTo(midX, topH - 8);
      ctx.stroke();

      // Horizontal equilibrium line
      ctx.strokeStyle = '#e2e8f0';
      ctx.beginPath();
      ctx.moveTo(12, springMidY);
      ctx.lineTo(w - 12, springMidY);
      ctx.stroke();
      ctx.restore();

      // Header Wave Propagation Vector Label
      if (isMobile) {
        // Place compactly at top-left to avoid colliding with wave crest and center red coil
        ctx.fillStyle = '#0284c7';
        ctx.font = 'bold 11px system-ui, sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('Wave travel v', 12, 18);
        drawArrow(ctx, 88, 14, 122, 14, '#0284c7', 2, 5);
      } else {
        // Top right placement on desktop
        drawArrow(ctx, w - 100, 20, w - 24, 20, '#0284c7', 2, 6);
        ctx.fillStyle = '#0284c7';
        ctx.font = 'bold 12px system-ui, sans-serif';
        ctx.textAlign = 'right';
        ctx.fillText('Wave travel v', w - 106, 24);
      }

      // Slinky Spring Helix
      const numCoils = Math.max(28, Math.floor(w / 8));
      const coilRadiusY = Math.min(13, amp * 0.45);
      const coilRadiusX = Math.min(3.5, w / numCoils * 0.4);

      let markerX = midX;
      let markerY = springMidY + amp * Math.sin(k * midX - time);

      for (let i = 0; i < numCoils; i++) {
        const u = i / (numCoils - 1);
        const x = 16 + u * (w - 32);
        const waveY = springMidY + amp * Math.sin(k * x - time);
        const isMarker = Math.abs(x - midX) < ((w - 32) / numCoils) * 0.6;

        ctx.save();
        ctx.beginPath();
        ctx.ellipse(x, waveY, coilRadiusX, coilRadiusY, 0, 0, Math.PI * 2);

        if (isMarker) {
          markerX = x;
          markerY = waveY;
          ctx.strokeStyle = '#ef4444';
          ctx.lineWidth = 3;
        } else {
          ctx.strokeStyle = '#64748b';
          ctx.lineWidth = 1.4;
        }
        ctx.stroke();
        ctx.restore();
      }

      // Red Marker Tag on middle coil
      ctx.beginPath();
      ctx.arc(markerX, markerY, 5.5, 0, Math.PI * 2);
      ctx.fillStyle = '#ef4444';
      ctx.fill();
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 2;
      ctx.stroke();

      // Vertical particle oscillation arrow on red marker
      const uDisp = (markerY - springMidY);
      if (Math.abs(uDisp) > 3) {
        drawArrow(ctx, markerX, springMidY, markerX, markerY, '#dc2626', 2, 5);
      }

      // Divider line
      ctx.strokeStyle = '#e2e8f0';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(0, topH);
      ctx.lineTo(w, topH);
      ctx.stroke();

      // ==========================================
      // 2. BOTTOM PANEL: Coordinate Grid & Dot Product
      // ==========================================
      const gridOriginX = isMobile ? (isNarrowMobile ? 48 : 58) : Math.min(w * 0.22, 110);
      const gridOriginY = topH + bottomH * 0.52;
      const vecLen = isMobile ? Math.min(bottomH * 0.32, 28) : Math.min(bottomH * 0.38, 38);

      // Coordinate axes
      ctx.save();
      ctx.strokeStyle = '#cbd5e1';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(gridOriginX - vecLen - 8, gridOriginY);
      ctx.lineTo(gridOriginX + vecLen + 24, gridOriginY);
      ctx.moveTo(gridOriginX, gridOriginY + vecLen + 10);
      ctx.lineTo(gridOriginX, gridOriginY - vecLen - 10);
      ctx.stroke();

      // Right-angle perpendicular symbol
      const sqSize = isMobile ? 6 : 8;
      const ySign = uDisp >= 0 ? 1 : -1;
      ctx.strokeStyle = '#059669';
      ctx.lineWidth = 1.5;
      ctx.strokeRect(gridOriginX, ySign > 0 ? gridOriginY : gridOriginY - sqSize, sqSize, sqSize);

      // Vector v (Horizontal Wave Motion)
      const vxEnd = gridOriginX + vecLen + 14;
      drawArrow(ctx, gridOriginX, gridOriginY, vxEnd, gridOriginY, '#0284c7', 2.5, 6);
      ctx.fillStyle = '#0284c7';
      ctx.font = 'bold 11px system-ui, sans-serif';
      ctx.textAlign = 'left';
      ctx.fillText('v', vxEnd + 4, gridOriginY + 3.5);

      // Vector u (Vertical Particle Displacement)
      const uyNorm = amp > 0 ? (markerY - springMidY) / amp : 0;
      const uyEnd = gridOriginY + uyNorm * vecLen;
      drawArrow(ctx, gridOriginX, gridOriginY, gridOriginX, uyEnd, '#ef4444', 2.5, 6);
      ctx.fillStyle = '#ef4444';
      ctx.font = 'bold 11px system-ui, sans-serif';
      ctx.textAlign = 'center';
      const uLabelY = uyNorm >= 0 ? (uyEnd + 12) : (uyEnd - 5);
      ctx.fillText('u', gridOriginX - 10, uLabelY);
      ctx.restore();

      // Vector Math Column
      const mathX = isMobile ? (isNarrowMobile ? 95 : 112) : Math.max(w * 0.38, gridOriginX + 90);
      const mathCenterY = topH + bottomH * 0.5;

      if (isMobile) {
        ctx.fillStyle = '#0f172a';
        ctx.font = 'bold 13px system-ui, sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('u · v = 0', mathX, mathCenterY - 18);

        ctx.fillStyle = '#059669';
        ctx.font = 'bold 12px system-ui, sans-serif';
        ctx.fillText('u ⊥ v', mathX, mathCenterY);
        ctx.font = '500 11px system-ui, sans-serif';
        ctx.fillText('(Transverse wave)', mathX + (isNarrowMobile ? 32 : 36), mathCenterY);

        ctx.fillStyle = '#64748b';
        ctx.font = '10.5px system-ui, sans-serif';
        ctx.fillText('(0)(vₓ) + (y)(0) = 0', mathX, mathCenterY + 18);
      } else {
        ctx.fillStyle = '#0f172a';
        ctx.font = 'bold 14px system-ui, sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText('u · v = 0', mathX, mathCenterY - 20);

        ctx.fillStyle = '#059669';
        ctx.font = 'bold 13px system-ui, sans-serif';
        ctx.fillText('u ⊥ v (Transverse)', mathX, mathCenterY + 2);

        ctx.fillStyle = '#64748b';
        ctx.font = '12px system-ui, sans-serif';
        ctx.fillText('(0)(vₓ) + (y)(0) = 0', mathX, mathCenterY + 24);
      }

      requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
  </script>
</body>
</html>

Czym jest fala — długość, częstotliwość i amplituda fali

Fale poprzeczne a podłużne — kierunek drgań cząstek względem kierunku fali

Fale na powierzchni wody — obserwacja czół falowych kolistych i prostoliniowych

Pojęcie powierzchni falowej i promienia fali

Zasada Huygensa — konstrukcja nowego czoła fali

Rozchodzenie się fal dźwiękowych w powietrzu — zagęszczenia i rozrzedzenia

Prędkość dźwięku w różnych ośrodkach i jej zależność od temperatury

Zależność prędkości fali od właściwości sprężystych i gęstości ośrodka

Odbicie fali na granicy ośrodków — koniec swobodny i utwierdzony

Fale stojące — węzły i strzałki fali w strunach oraz piszczałkach

Analiza obrazu powierzchni falowych w zadaniach maturalnych

science

Rozchodzenie się fal mechanicznych i powierzchnie falowe

Transport energii przez fale bez transportu masy

Proporcjonalność energii całkowitej do kwadratu amplitudy i kwadratu częstotliwości

Definicja natężenia fali i jej jednostka (W/m²)

Zależność natężenia fali od amplitudy drgań

Punktowe źródło fali i powstawanie fali kulistej

Prawo odwrotnych kwadratów dla natężenia fali kulistej

Zależność amplitudy fali kulistej od odległości od źródła

Fala cylindryczna i płaska — porównanie zaniku amplitudy z odległością

Tłumienie fal i rozchodzenie się energii w ośrodku materialnym

Poziom natężenia dźwięku — decybele i próg słyszalności

Zadania rachunkowe ze zmian amplitudy i natężenia fali z odległością

Energia, natężenie i tłumienie fal

How String Thickness Affects Wave Speed

Calculating Wave Speed, Frequency, and Wavelength Relationships

Why Wave Energy Is Proportional to Amplitude Squared

Inverse-Square Law for Spherical Wave Intensity

Classical Doppler Effect for Moving Sound Sources

Doppler Effect for Moving Observers and General Equations

Astronomical and Medical Applications of the Doppler Effect

Mechanical Waves, Energy Propagation, and the Doppler Effect

Jakościowy opis efektu Dopplera — zbliżanie i oddalanie się źródła dźwięku

Ściskanie i rozciąganie czół falowych przez ruchome źródło

Efekt Dopplera w przypadku ruchu obserwatora względem spoczywającego źródła

Efekt Dopplera w przypadku ruchu źródła względem spoczywającego obserwatora

Przybliżony wzór na względną zmianę częstotliwości Δf/f = v/c

Zastosowania efektu Dopplera w medycynie — ultrasonografia Dopplerowska

Efekt Dopplera w radarach i pomiarach prędkości pojazdów

Efekt Dopplera dla światła — przesunięcie ku czerwieni i błękitowi

Stożek Macha i bariera dźwięku — zjawisko przy prędkościach naddźwiękowych

Obliczenia rachunkowe z efektu Dopplera w zadaniach z fizyki

Efekt Dopplera i zjawiska falowe w ruchu

Zasada superpozycji fal — nakładanie się zaburzeń w ośrodku

Spójność fal — warunek stałej różnicy faz

Różnica dróg fal i różnica faz — geometryczne podstawy interferencji

Warunek maksimum interferencyjnego — wzmocnienie całkowite

Warunek minimum interferencyjnego — całkowite wygaszenie

Interferencja fal na powierzchni wody — linie węzłów i strzałek

Wpływ odległości między źródłami na przestrzenny rozkład interferencyjny

Wpływ długości fali na obraz interferencyjny

Doświadczenie: Obserwacja interferencji fal na powierzchni cieczy

Interferencja fal akustycznych — zjawisko dudnienia i strefy ciszy

Rozwiązywanie zadań z warunków interferencji fal

Zasada superpozycji i interferencja fal

Światło jako fala elektromagnetyczna — wektory pola E i B

Widmo fal elektromagnetycznych — od fal radiowych do promieniowania gamma

Zakres światła widzialnego i czułość ludzkiego oka

Widmo światła białego jako mieszanina fal o różnych częstotliwościach

Zjawisko dyspersji — zależność współczynnika załamania od częstotliwości fali

Rozszczepienie światła w pryzmacie — bieg promieni o różnych barwach

Prędkość światła w próżni i w ośrodkach materialnych

Niezmienność częstotliwości światła przy przejściu między ośrodkami

Barwa ciał nieprzezroczystych i przezroczystych — selektywna absorpcja

Analiza zadań z widma fal elektromagnetycznych i dyspersji

Natura światła i widmo fal elektromagnetycznych

Waves Transfer Energy Without Moving Matter

Wave Anatomy: Amplitude, Wavelength, Crests and Troughs

Defining Frequency and Period of a Wave

The Wave Equation: Calculating Wave Speed Using v = fλ

Calculating Wavelength from Speed and Frequency

Calculating Frequency from Speed and Wavelength

Calculating Wave Speed from Frequency and Wavelength

Displacement-Distance versus Displacement-Time Wave Graphs

Wave Properties, Graphs, and the Wave Equation

Required Practical: Measuring Wave Speed in a Ripple Tank

Required Practical: Measuring Wave Speed on a Stretched String

Working Scientifically: Reducing Uncertainty in Wave Measurements

Exam-Style Wave Properties and Equation Questions

Investigating Wave Speed: GCSE Required Practicals

Światło niespolaryzowane (naturalne) a światło spolaryzowane liniowo

Polaryzacja jako dowód poprzecznego charakteru fali świetlnej

Polaryzator i analizator — selektywna transmisja składowej wektora E

Prawo Malusa — ilościowa zależność natężenia światła od kąta skręcenia

Doświadczenie: Obserwacja wygaszania światła przez skrzyżowane polaryzatory

Polaryzacja światła przy odbiciu i załamaniu

Kąt Brewstera — całkowita polaryzacja światła odbitego

Dwójłomność optyczna — kryształ szpatu islandzkiego i promień zwyczajny oraz nadzwyczajny

Aktywność optyczna substancji i skręcanie płaszczyzny polaryzacji — polarymetria

Zastosowania polaryzacji — okulary przeciwsłoneczne polaryzacyjne i wyświetlacze LCD

Zadania rachunkowe z prawa Malusa i kąta Brewstera

Polaryzacja światła i prawo Malusa

Transverse Waves: Perpendicular Oscillations

Longitudinal Waves: Parallel Oscillations, Compressions and Rarefactions

Sound as a Longitudinal Pressure Wave in Matter

Why Sound Cannot Travel Through a Vacuum: The Bell Jar Experiment

Comparing the Speed of Sound in Solids, Liquids and Gases

Measuring the Speed of Sound in Air: Echo Method and Microphones

Seismic Waves: P-Waves and S-Waves in the Earth

Exam-Style Transverse and Longitudinal Wave Comparisons

Transverse vs Longitudinal Waves and Sound in Matter

Laboratoryjny pomiar współczynnika załamania światła metodą płytki płasko-równoległej

Doświadczalne wyznaczanie ogniskowej soczewki skupiającej metodą Bessela i równania soczewki

Laboratoryjny pomiar długości fali światła laserowego za pomocą siatki dyfrakcyjnej

Pomiar kąta granicznego i wyznaczanie współczynnika załamania cieczy i ciał stałych

Badanie zależności natężenia światła od kąta polaryzatora — weryfikacja prawa Malusa

Obserwacja i analiza obrazów dyfrakcyjnych na szczelinach o różnej szerokości

Doświadczalna obserwacja interferencji na podwójnej szczelinie i w cienkich błonach

OGS.12.PS4.2

Aligned learning resources

Related diagrams