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

    .diagram {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Formulas Row */
    .formulas-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      gap: 8px;
    }

    .formula-card {
      flex: 1;
      background: #ffffff;
      border: 2px solid #00b4d8;
      border-radius: 14px;
      padding: 14px 8px;
      box-shadow: 0 4px 12px rgba(0, 180, 216, 0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 100px;
      position: relative;
    }

    .card-label {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .math-expr {
      font-size: 26px;
      font-weight: 700;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: "Cambria Math", "Times New Roman", serif;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.9em;
      line-height: 1;
    }

    .num {
      border-bottom: 2.5px solid #0f172a;
      padding: 0 4px 2px;
    }

    .den {
      padding: 2px 4px 0;
    }

    .var-f { color: #0284c7; }
    .var-t { color: #0d9488; }

    /* Center connector */
    .connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0 4px;
      z-index: 2;
    }

    .connector-badge {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid #bae6fd;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
      margin-bottom: 2px;
    }

    .arrow-icon {
      font-size: 22px;
      line-height: 1;
      color: #0284c7;
    }

    /* Worked Example Section */
    .example-card {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .example-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Preset selector pills */
    .pill-group {
      display: flex;
      gap: 6px;
    }

    .pill {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

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

    /* Live Output Box */
    .calc-display {
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
      color: #1e2945;
      gap: 8px;
      font-family: "Cambria Math", "Times New Roman", serif;
      flex-wrap: wrap;
    }

    .calc-val {
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="formulas-row">
      
      <div class="formula-card">
        <span class="card-label">Frequency</span>
        <div class="math-expr">
          <span class="var-f">f</span> = 
          <div class="fraction">
            <span class="num">1</span>
            <span class="den var-t">T</span>
          </div>
        </div>
      </div>

      
      <div class="connector">
        <span class="arrow-icon">⇄</span>
        <span class="connector-badge">Reciprocal</span>
      </div>

      
      <div class="formula-card">
        <span class="card-label">Period</span>
        <div class="math-expr">
          <span class="var-t">T</span> = 
          <div class="fraction">
            <span class="num">1</span>
            <span class="den var-f">f</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="example-card">
      <div class="example-header">
        <span>Worked Example</span>
        <div class="pill-group" id="presets">
          <button class="pill active" data-t="0.5">T = 0.5 s</button>
          <button class="pill" data-t="0.2">T = 0.2 s</button>
          <button class="pill" data-t="2">T = 2.0 s</button>
        </div>
      </div>

      
      <div class="calc-display" id="calcDisplay">
        <span>If <b class="var-t">T = 0.5 s</b>, then</span>
        <span class="var-f">f</span>
        <span>=</span>
        <div class="fraction">
          <span class="num">1</span>
          <span class="den var-t" id="denVal">0.5</span>
        </div>
        <span>=</span>
        <span class="calc-val var-f" id="resultVal">2 Hz</span>
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const presets = [
      { t: 0.5, f: 2 },
      { t: 0.2, f: 5 },
      { t: 2, f: 0.5 }
    ];

    const pills = document.querySelectorAll('.pill');
    const denVal = document.getElementById('denVal');
    const resultVal = document.getElementById('resultVal');
    const calcDisplay = document.getElementById('calcDisplay');

    function setPreset(tVal) {
      const fVal = (1 / tVal);
      pills.forEach(p => {
        p.classList.toggle('active', parseFloat(p.dataset.t) === tVal);
      });
      calcDisplay.innerHTML = `
        <span>If <b class="var-t">T = ${tVal} s</b>, then</span>
        <span class="var-f">f</span>
        <span>=</span>
        <div class="fraction">
          <span class="num">1</span>
          <span class="den var-t">${tVal}</span>
        </div>
        <span>=</span>
        <span class="calc-val var-f">${fVal} Hz</span>
      `;
    }

    pills.forEach(p => {
      p.addEventListener('click', () => {
        setPreset(parseFloat(p.dataset.t));
      });
    });
  </script>
</body>
</html>

Period and Frequency in Circular Motion

<!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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .stepper-wrap {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .tab-btn {
      flex: 1;
      padding: 6px 8px;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      background: #f8fafc;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    .play-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #0284c7;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s ease;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    .steps-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .step-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
      cursor: pointer;
      opacity: 0.65;
    }

    .step-card.active {
      opacity: 1;
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 3px 12px rgba(2, 132, 199, 0.12);
    }

    .step-card.active.step-2,
    .step-card.active.step-3 {
      border-color: #0d9488;
      box-shadow: 0 3px 12px rgba(13, 148, 136, 0.12);
    }

    .badge {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      background: #94a3b8;
      transition: background 0.25s ease;
    }

    .step-card.active .badge-blue {
      background: #0284c7;
    }

    .step-card.active .badge-teal {
      background: #0d9488;
    }

    .content-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .step-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .step-card.active .step-title.color-blue {
      color: #0284c7;
    }

    .step-card.active .step-title.color-teal {
      color: #0d9488;
    }

    .formula-row {
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      line-height: 1.4;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 3px;
      font-size: 14px;
      line-height: 1.1;
    }

    .fraction .num {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 1px;
    }

    .fraction .den {
      padding-top: 1px;
    }

    .result-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 14px;
    }

    .pill-blue {
      background: #e0f2fe;
      color: #0369a1;
    }

    .pill-teal {
      background: #ccfbf1;
      color: #0f766e;
    }

    .sub-note {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="stepper-wrap">
    <div class="nav-bar">
      <button class="tab-btn active" id="tab0" onclick="goToStep(0)">
        <span>1</span> Given
      </button>
      <button class="tab-btn" id="tab1" onclick="goToStep(1)">
        <span>2</span> Frequency
      </button>
      <button class="tab-btn" id="tab2" onclick="goToStep(2)">
        <span>3</span> Period
      </button>
      <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
    </div>

    <div class="steps-container">
      
      <div class="step-card step-1 active" id="card0" onclick="goToStep(0)">
        <div class="badge badge-blue">1</div>
        <div class="content-box">
          <div class="step-title color-blue">Given Values</div>
          <div class="formula-row">
            <span>N = 120 rotations</span>
            <span style="color:#94a3b8; margin: 0 2px;">•</span>
            <span>t = 3 seconds</span>
          </div>
          <div class="sub-note">Drone rotor turn count and time</div>
        </div>
      </div>

      
      <div class="step-card step-2" id="card1" onclick="goToStep(1)">
        <div class="badge badge-teal">2</div>
        <div class="content-box">
          <div class="step-title color-teal">Calculate Frequency (f)</div>
          <div class="formula-row">
            <span>f = </span>
            <span class="fraction"><span class="num">N</span><span class="den">t</span></span>
            <span>=</span>
            <span class="fraction"><span class="num">120</span><span class="den">3</span></span>
            <span>=</span>
            <span class="result-pill pill-teal">40 Hz</span>
          </div>
          <div class="sub-note">40 full turns every second</div>
        </div>
      </div>

      
      <div class="step-card step-3" id="card2" onclick="goToStep(2)">
        <div class="badge badge-teal">3</div>
        <div class="content-box">
          <div class="step-title color-teal">Calculate Period (T)</div>
          <div class="formula-row">
            <span>T = </span>
            <span class="fraction"><span class="num">1</span><span class="den">f</span></span>
            <span>=</span>
            <span class="fraction"><span class="num">1</span><span class="den">40</span></span>
            <span>=</span>
            <span class="result-pill pill-teal">0.025 s</span>
          </div>
          <div class="sub-note">25 milliseconds per turn</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 3;
    const intervalMs = 3800;

    function updateUI() {
      for (let i = 0; i < totalSteps; i++) {
        const tab = document.getElementById(`tab${i}`);
        const card = document.getElementById(`card${i}`);
        if (i === currentStep) {
          tab.classList.add('active');
          card.classList.add('active');
        } else {
          tab.classList.remove('active');
          card.classList.remove('active');
        }
      }
    }

    function goToStep(index) {
      currentStep = index;
      updateUI();
      if (isPlaying) {
        restartTimer();
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      updateUI();
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, intervalMs);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function restartTimer() {
      stopTimer();
      startTimer();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const playBtn = document.getElementById('playBtn');
      if (isPlaying) {
        playBtn.textContent = '⏸';
        startTimer();
      } else {
        playBtn.textContent = '▶';
        stopTimer();
      }
    }

    startTimer();
  </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">
  <title>RPM to Frequency and Period Conversion</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Preset selector bar */
    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 12px;
      width: 100%;
    }
    .preset-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }

    /* Flowchart Container */
    .flowchart {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 620px;
      margin: auto 0;
    }

    /* Step Cards */
    .step-card {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border-radius: 14px;
      padding: 12px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      border: 2px solid #e2e8f0;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .card-rpm { border-color: #fbbf24; }
    .card-freq { border-color: #38bdf8; }
    .card-period { border-color: #34d399; }

    .card-header {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .card-rpm .card-header { color: #d97706; }
    .card-freq .card-header { color: #0284c7; }
    .card-period .card-header { color: #059669; }

    /* Tachometer / Icon area */
    .icon-wrap {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .val-display {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.1;
    }
    .unit-display {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }

    /* Connectors / Arrows */
    .connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 76px;
      text-align: center;
    }

    .op-badge {
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
      color: #1d4ed8;
      border-radius: 8px;
      padding: 4px 6px;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      margin-bottom: 3px;
      white-space: nowrap;
    }

    .op-badge.warning {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #b91c1c;
    }

    .subtext {
      font-size: 9.5px;
      font-weight: 700;
      line-height: 1.1;
      color: #dc2626;
    }

    .arrow-svg {
      width: 44px;
      height: 20px;
    }

    /* Responsive Mobile Flow */
    @media (max-width: 480px) {
      .flowchart {
        flex-direction: column;
        gap: 6px;
      }
      .step-card {
        width: 100%;
        max-width: 240px;
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 16px;
      }
      .icon-wrap {
        width: 36px;
        height: 36px;
        margin-bottom: 0;
      }
      .connector {
        width: 100%;
        height: auto;
        flex-direction: row;
        gap: 8px;
        padding: 2px 0;
      }
      .arrow-svg {
        transform: rotate(90deg);
        width: 24px;
        height: 16px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="preset-btn" onclick="setRPM(60, this)">60 RPM</button>
    <button class="preset-btn active" onclick="setRPM(120, this)">120 RPM</button>
    <button class="preset-btn" onclick="setRPM(300, this)">300 RPM</button>
    <button class="preset-btn" onclick="setRPM(600, this)">600 RPM</button>
  </div>

  
  <div class="flowchart">
    
    
    <div class="step-card card-rpm">
      <div class="card-header">1. Speed</div>
      <div class="icon-wrap">
        <svg viewBox="0 0 50 50" width="44" height="44">
          <circle cx="25" cy="25" r="21" fill="#fffbeb" stroke="#f59e0b" stroke-width="3"/>
          <path d="M 12 33 A 16 16 0 1 1 38 33" fill="none" stroke="#fde68a" stroke-width="3.5" stroke-linecap="round"/>
          <circle cx="25" cy="25" r="3.5" fill="#d97706"/>
          <line id="tachoNeedle" x1="25" y1="25" x2="16" y2="16" stroke="#b45309" stroke-width="2.5" stroke-linecap="round" style="transform-origin: 25px 25px; transition: transform 0.4s ease;"/>
        </svg>
      </div>
      <div>
        <div class="val-display" id="rpmVal">120</div>
        <div class="unit-display">rev / min</div>
      </div>
    </div>

    
    <div class="connector">
      <div class="op-badge warning">÷ 60</div>
      <div class="subtext">Don't forget!</div>
      <svg class="arrow-svg" viewBox="0 0 44 16">
        <defs>
          <marker id="arrowhead1" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#ef4444" />
          </marker>
        </defs>
        <line x1="2" y1="8" x2="38" y2="8" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrowhead1)" />
      </svg>
    </div>

    
    <div class="step-card card-freq">
      <div class="card-header">2. Frequency <i>f</i></div>
      <div class="icon-wrap">
        <svg viewBox="0 0 50 50" width="42" height="42">
          <circle cx="25" cy="25" r="20" fill="#f0f9ff" stroke="#38bdf8" stroke-width="2.5"/>
          <path d="M 13 25 Q 19 12 25 25 T 37 25" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </div>
      <div>
        <div class="val-display" id="freqVal">2</div>
        <div class="unit-display">Hz (rev / s)</div>
      </div>
    </div>

    
    <div class="connector">
      <div class="op-badge">flip 1/x</div>
      <div class="subtext" style="color:#0284c7;">T = 1 / f</div>
      <svg class="arrow-svg" viewBox="0 0 44 16">
        <defs>
          <marker id="arrowhead2" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#0284c7" />
          </marker>
          <marker id="arrowhead2-back" markerWidth="6" markerHeight="6" refX="2" refY="3" orient="auto">
            <polygon points="6 0, 0 3, 6 6" fill="#0284c7" />
          </marker>
        </defs>
        <line x1="6" y1="8" x2="38" y2="8" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrowhead2)" marker-start="url(#arrowhead2-back)" />
      </svg>
    </div>

    
    <div class="step-card card-period">
      <div class="card-header">3. Period <i>T</i></div>
      <div class="icon-wrap">
        <svg viewBox="0 0 50 50" width="42" height="42">
          <circle cx="25" cy="25" r="20" fill="#ecfdf5" stroke="#34d399" stroke-width="2.5"/>
          
          <rect x="23" y="2" width="4" height="4" fill="#059669" rx="1"/>
          
          <circle cx="25" cy="26" r="14" fill="none" stroke="#a7f3d0" stroke-width="2"/>
          <line x1="25" y1="26" x2="25" y2="17" stroke="#059669" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="25" y1="26" x2="31" y2="26" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
          <circle cx="25" cy="26" r="2" fill="#059669"/>
        </svg>
      </div>
      <div>
        <div class="val-display" id="periodVal">0.5</div>
        <div class="unit-display">s / rev</div>
      </div>
    </div>

  </div>

  <script>
    function setRPM(rpm, btn) {
      // Update buttons
      document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      const freq = rpm / 60;
      const period = 1 / freq;

      // Update values
      document.getElementById('rpmVal').textContent = rpm;
      document.getElementById('freqVal').textContent = Number.isInteger(freq) ? freq : freq.toFixed(2);
      document.getElementById('periodVal').textContent = Number.isInteger(period) ? period : period.toFixed(period < 0.1 ? 3 : 2);

      // Rotate tachometer needle (-120deg to 120deg)
      const minRPM = 0, maxRPM = 700;
      const angle = -120 + (rpm / maxRPM) * 240;
      document.getElementById('tachoNeedle').style.transform = `rotate(${angle}deg)`;
    }

    // Initialise at 120 RPM
    setRPM(120, document.querySelectorAll('.preset-btn')[1]);
  </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">
  <title>Period in Circular Motion</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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      gap: 16px;
      flex-wrap: wrap;
    }

    .wheel-container {
      position: relative;
      width: 240px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .info-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 200px;
    }

    .stopwatch-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.06);
      width: 100%;
      max-width: 220px;
    }

    .stopwatch-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: #64748b;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .timer-display {
      font-size: 38px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #1e2945;
      line-height: 1.1;
    }

    .timer-display span {
      font-size: 20px;
      color: #22b7ff;
      margin-left: 2px;
    }

    .period-card {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 14px;
      padding: 10px 16px;
      text-align: center;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.15);
      width: 100%;
      max-width: 220px;
    }

    .period-text {
      font-size: 15px;
      font-weight: 800;
      color: #1e2945;
    }

    .period-sub {
      font-size: 12px;
      color: #64748b;
      font-weight: 600;
      margin-top: 2px;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

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

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

    .btn-primary {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #0ea5e9;
      border-color: #0ea5e9;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="wheel-container">
      <svg viewBox="0 0 240 250">
        
        <line x1="20" y1="240" x2="220" y2="240" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />
        <polyline points="70,240 120,115 170,240" fill="none" stroke="#94a3b8" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" />
        <polyline points="95,240 120,115 145,240" fill="none" stroke="#cbd5e1" stroke-width="3" stroke-linejoin="round" />

        
        <g id="wheelGroup">
          
          <circle cx="120" cy="115" r="90" fill="none" stroke="#cbd5e1" stroke-width="3" />
          <circle cx="120" cy="115" r="50" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4,4" />

          
          <line x1="120" y1="25" x2="120" y2="205" stroke="#cbd5e1" stroke-width="2" />
          <line x1="30" y1="115" x2="210" y2="115" stroke="#cbd5e1" stroke-width="2" />
          <line x1="56.4" y1="51.4" x2="183.6" y2="178.6" stroke="#cbd5e1" stroke-width="2" />
          <line x1="56.4" y1="178.6" x2="183.6" y2="51.4" stroke="#cbd5e1" stroke-width="2" />

          
          <circle cx="210" cy="115" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
          <circle cx="183.6" cy="178.6" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
          <circle cx="120" cy="205" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
          <circle cx="56.4" cy="178.6" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
          <circle cx="30" cy="115" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
          <circle cx="56.4" cy="51.4" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
          <circle cx="183.6" cy="51.4" r="9" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />

          
          <g id="trackedCar">
            <circle cx="120" cy="25" r="15" fill="#22b7ff" fill-opacity="0.25" />
            <circle cx="120" cy="25" r="11" fill="#22b7ff" stroke="#ffffff" stroke-width="2" />
            <circle cx="120" cy="25" r="4" fill="#ffffff" />
          </g>
        </g>

        
        <circle cx="120" cy="115" r="9" fill="#1e2945" />
        <circle cx="120" cy="115" r="3.5" fill="#ffffff" />

        
        <path d="M 120,4 L 120,14" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" />
        <polygon points="120,4 128,8 120,12" fill="#22b7ff" />
      </svg>
    </div>

    
    <div class="info-panel">
      <div class="stopwatch-card">
        <div class="stopwatch-title">Stopwatch</div>
        <div class="timer-display" id="timerText">0.0<span>s</span></div>
      </div>

      <div class="period-card">
        <div class="period-text">Period (T) = 30 s</div>
        <div class="period-sub">Time for 1 full turn (360°)</div>
      </div>

      <div class="controls">
        <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
        <button class="btn" id="resetBtn">↺ Reset</button>
      </div>
    </div>
  </div>

  <script>
    const wheelGroup = document.getElementById('wheelGroup');
    const timerText = document.getElementById('timerText');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');

    const TOTAL_SIMULATED_TIME = 30.0; // Seconds represented
    const CYCLE_DURATION_MS = 6000;    // Real animation speed (6 seconds per turn)
    const PAUSE_AT_END_MS = 1000;       // Calm pause at 360° before looping

    let isPlaying = true;
    let startTime = null;
    let elapsedRealTime = 0;
    let animationFrameId = null;

    function formatTime(sec) {
      return sec.toFixed(1);
    }

    function render(timeMs) {
      const cycleTotal = CYCLE_DURATION_MS + PAUSE_AT_END_MS;
      const currentCycleTime = timeMs % cycleTotal;

      let fraction = 0;
      if (currentCycleTime < CYCLE_DURATION_MS) {
        fraction = currentCycleTime / CYCLE_DURATION_MS;
      } else {
        fraction = 1.0;
      }

      const angle = fraction * 360;
      const currentSeconds = fraction * TOTAL_SIMULATED_TIME;

      // Rotate wheel clockwise about center (120, 115)
      wheelGroup.setAttribute('transform', `rotate(${angle}, 120, 115)`);
      timerText.innerHTML = `${formatTime(currentSeconds)}<span>s</span>`;
    }

    function step(timestamp) {
      if (!startTime) startTime = timestamp - elapsedRealTime;
      elapsedRealTime = timestamp - startTime;

      render(elapsedRealTime);

      if (isPlaying) {
        animationFrameId = requestAnimationFrame(step);
      }
    }

    function startAnimation() {
      if (!isPlaying) {
        isPlaying = true;
        playBtn.textContent = '⏸ Pause';
        startTime = performance.now() - elapsedRealTime;
        animationFrameId = requestAnimationFrame(step);
      }
    }

    function pauseAnimation() {
      if (isPlaying) {
        isPlaying = false;
        playBtn.textContent = '▶ Play';
        cancelAnimationFrame(animationFrameId);
      }
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAnimation();
      } else {
        startAnimation();
      }
    });

    resetBtn.addEventListener('click', () => {
      cancelAnimationFrame(animationFrameId);
      elapsedRealTime = 0;
      startTime = null;
      render(0);
      if (isPlaying) {
        startTime = performance.now();
        animationFrameId = requestAnimationFrame(step);
      }
    });

    // Start auto-play on load
    animationFrameId = requestAnimationFrame(step);
  </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">
  <title>Period and Frequency Comparison</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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 600px;
      margin-bottom: 10px;
    }

    .btn-toggle {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 4px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-toggle:active {
      background: #e2e8f0;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .panel-low { border-top: 4px solid #0284c7; }
    .panel-high { border-top: 4px solid #ea580c; }

    .panel-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .math-badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 10px;
    }
    .badge-blue { background: #e0f2fe; color: #0369a1; }
    .badge-orange { background: #ffedd5; color: #c2410c; }

    .gear-stage {
      width: 100px;
      height: 100px;
      position: relative;
      margin: 4px 0 12px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gear-svg {
      width: 100%;
      height: 100%;
      transform-origin: center center;
    }

    .spin-slow {
      animation: spin 2s linear infinite;
    }

    .spin-fast {
      animation: spin 0.25s linear infinite;
    }

    .paused .spin-slow,
    .paused .spin-fast {
      animation-play-state: paused;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Timeline component */
    .timeline-container {
      width: 100%;
      padding: 0 4px;
    }

    .timeline-header {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 4px;
    }

    .timeline-track {
      height: 22px;
      background: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      position: relative;
    }

    .track-seg {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #ffffff;
      border-right: 1.5px solid #ffffff;
    }
    .track-seg:last-child { border-right: none; }

    .seg-blue { background: #0284c7; width: 50%; }
    .seg-empty { background: #cbd5e1; width: 50%; color: #64748b; font-weight: 600; }
    .seg-orange { background: #ea580c; width: 25%; }

    @media (max-width: 400px) {
      .comparison-grid { gap: 8px; }
      .panel { padding: 10px 6px; }
      .gear-stage { width: 80px; height: 80px; }
      .panel-title { font-size: 14px; }
      .math-badge { font-size: 12px; }
      .track-seg { font-size: 10px; }
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span style="font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px;">1-Second Comparison</span>
    <button class="btn-toggle" id="playPauseBtn" onclick="toggleMotion()">
      <span id="btnIcon">⏸</span> <span id="btnText">Pause</span>
    </button>
  </div>

  <div class="comparison-grid" id="grid">
    
    <div class="panel panel-low">
      <div class="panel-title">Low Frequency</div>
      <div class="math-badge badge-blue">T = 2 s &nbsp;|&nbsp; f = 0.5 Hz</div>

      <div class="gear-stage">
        <svg class="gear-svg spin-slow" viewBox="0 0 100 100">
          
          <circle cx="50" cy="50" r="42" fill="#0284c7" />
          
          <g fill="#0284c7">
            <rect x="44" y="2" width="12" height="10" rx="3" />
            <rect x="44" y="88" width="12" height="10" rx="3" />
            <rect x="2" y="44" width="10" height="12" rx="3" />
            <rect x="88" y="44" width="10" height="12" rx="3" />
            <rect x="14" y="14" width="12" height="10" rx="3" transform="rotate(45 20 19)" />
            <rect x="74" y="74" width="12" height="10" rx="3" transform="rotate(45 80 79)" />
            <rect x="74" y="14" width="12" height="10" rx="3" transform="rotate(-45 80 19)" />
            <rect x="14" y="74" width="12" height="10" rx="3" transform="rotate(-45 20 79)" />
          </g>
          
          <circle cx="50" cy="50" r="30" fill="#0369a1" />
          <circle cx="50" cy="50" r="22" fill="#f8fafc" />
          
          <circle cx="50" cy="50" r="10" fill="#0284c7" />
          <circle cx="50" cy="50" r="4" fill="#ffffff" />
          
          <circle cx="50" cy="18" r="5" fill="#38bdf8" stroke="#ffffff" stroke-width="2" />
        </svg>
      </div>

      <div class="timeline-container">
        <div class="timeline-header">
          <span>In 1 second:</span>
          <span style="color:#0284c7; font-weight:700;">0.5 turn</span>
        </div>
        <div class="timeline-track">
          <div class="track-seg seg-blue">½ Turn</div>
          <div class="track-seg seg-empty">...</div>
        </div>
      </div>
    </div>

    
    <div class="panel panel-high">
      <div class="panel-title">High Frequency</div>
      <div class="math-badge badge-orange">T = 0.25 s &nbsp;|&nbsp; f = 4 Hz</div>

      <div class="gear-stage">
        <svg class="gear-svg spin-fast" viewBox="0 0 100 100">
          
          <circle cx="50" cy="50" r="42" fill="#ea580c" />
          
          <g fill="#ea580c">
            <rect x="44" y="2" width="12" height="10" rx="3" />
            <rect x="44" y="88" width="12" height="10" rx="3" />
            <rect x="2" y="44" width="10" height="12" rx="3" />
            <rect x="88" y="44" width="10" height="12" rx="3" />
            <rect x="14" y="14" width="12" height="10" rx="3" transform="rotate(45 20 19)" />
            <rect x="74" y="74" width="12" height="10" rx="3" transform="rotate(45 80 79)" />
            <rect x="74" y="14" width="12" height="10" rx="3" transform="rotate(-45 80 19)" />
            <rect x="14" y="74" width="12" height="10" rx="3" transform="rotate(-45 20 79)" />
          </g>
          
          <circle cx="50" cy="50" r="30" fill="#c2410c" />
          <circle cx="50" cy="50" r="22" fill="#f8fafc" />
          
          <circle cx="50" cy="50" r="10" fill="#ea580c" />
          <circle cx="50" cy="50" r="4" fill="#ffffff" />
          
          <circle cx="50" cy="18" r="5" fill="#fb923c" stroke="#ffffff" stroke-width="2" />
        </svg>
      </div>

      <div class="timeline-container">
        <div class="timeline-header">
          <span>In 1 second:</span>
          <span style="color:#ea580c; font-weight:700;">4 turns</span>
        </div>
        <div class="timeline-track">
          <div class="track-seg seg-orange">1</div>
          <div class="track-seg seg-orange">2</div>
          <div class="track-seg seg-orange">3</div>
          <div class="track-seg seg-orange">4</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let isRunning = true;
    function toggleMotion() {
      isRunning = !isRunning;
      const grid = document.getElementById('grid');
      const icon = document.getElementById('btnIcon');
      const text = document.getElementById('btnText');
      if (isRunning) {
        grid.classList.remove('paused');
        icon.textContent = '⏸';
        text.textContent = 'Pause';
      } else {
        grid.classList.add('paused');
        icon.textContent = '▶';
        text.textContent = 'Play';
      }
    }
  </script>
</body>
</html>

Wektor przemieszczenia — definicja, własności i składowe

Prędkość średnia wektorowa a średnia prędkość skalarna

Prędkość chwilowa jako granica ilorazu przemieszczenia i czasu

Jednostki prędkości i ich zaawansowane przeliczanie w układzie SI

Wektor przyspieszenia średniego i chwilowego

Jednostka przyspieszenia w układzie SI i analiza wymiarowa

Rozkład wektora przyspieszenia na składową styczną i normalną

Klasyfikacja ruchów ze względu na przyspieszenie styczne i dośrodkowe

science

Podstawy wektorowego opisu ruchu: przemieszczenie, prędkość i przyspieszenie

Kinematyka ruchu jednostajnego po okręgu: prędkość kątowa, liniowa i okres

Przyspieszenie dośrodkowe jako miara zmiany kierunku prędkości: a_d = v²/r

Siła dośrodkowa jako wypadkowa sił prostopadła do toru ruchu: F_d = m·v²/r

Tarcie statyczne jako siła dośrodkowa podczas pokonywania zakrętu przez pojazd

Ruch pojazdu na pochyłym (wyprofilowanym) zakręcie

Wahadło stożkowe — siła naciągu nici a ruch po okręgu poziomym

Ruch po okręgu pionowym — zmienny nacisk w pętli i prędkość krytyczna

Doświadczenie: Badanie zależności siły dośrodkowej od masy, prędkości i promienia

Dynamika ruchu po okręgu i siła dośrodkowa

Układ inercjalny a nieinercjalny — definicje i kryteria fizyczne

Siła bezwładności w ruchu prostoliniowym — wzór F_b = −m · a_ukł

Bezwładność pasażerów w ruszającym i hamującym pojeździe

Ciała w przyspieszającej windzie — przeciążenie, niedociążenie i stan nieważkości

Odśrodkowa siła bezwładności w układzie obracającym się: F_od = m·ω²·r

Porównanie opisu ruchu po okręgu w układzie inercjalnym i nieinercjalnym

Doświadczenie: Demonstracja działania siły bezwładności w ruszającym i hamującym pojeździe

Zadania obliczeniowe z dynamiki ciał w układach przyspieszających

Układy inercjalne i nieinercjalne oraz siły bezwładności

Praca mechaniczna jako iloczyn skalarny siły i przemieszczenia: W = F · s · cos(α)

Praca sił prostopadłych do toru — dlaczego siła dośrodkowa nie wykonuje pracy

Graficzna interpretacja pracy — pole pod wykresem siły F(s)

Praca siły sprężystości podczas naciągania sprężyny: W = ½ · k · x²

Pojęcie mocy jako szybkości wykonywania pracy

Związek mocy z siłą i prędkością w ruchu jednostajnym: P = F·v

Zależność mocy od prędkości w ruchu pojazdów pod obciążeniem

Pojęcie sprawności mechanicznej jako stosunku pracy użytecznej do włożonej

Sprawność pojazdów samochodowych — bilans mocy silnika i oporów ruchu

Zestaw zadań maturalnych z pracy mechanicznej i mocy

Praca mechaniczna i moc w układach fizycznych

Angular Velocity and Linear Speed in Circular Motion

Uniform Circular Motion and Centripetal Acceleration

Hydrostatic Pressure and Depth Dependence

Communicating Vessels and Pascal's Principle

Archimedes' Principle and Buoyant Force

Conditions for Floating and Sinking

Rotational Motion and Fluid Mechanics

Okres T i częstotliwość f w ruchach cyklicznych oraz ich jednostki: sekunda i herc

Prędkość liniowa w ruchu po okręgu v = 2πr/T oraz v = 2πrf

Prędkość kątowa ω: definicja, jednostka rad/s i związek v = ω·r

Przyspieszenie dośrodkowe — wyprowadzenie wzoru a_dos = v² / r oraz ω² · r

Wektory prędkości i przyspieszenia dośrodkowego w wyznaczonych punktach okręgu

Zadania obliczeniowe ze związków między wielkościami liniowymi i kątowymi

Ruch jednostajny po okręgu w grawitacji — satelity i I prędkość kosmiczna

Ruch jednostajny po okręgu — kinematyka, okres, częstotliwość i przyspieszenie dośrodkowe

Układ dwóch ciał: jedno na równi, drugie zwisające pionowo (maszyna Atwooda na równi)

Kierunek ruchu i siła naciągu nici w układzie z równią pochyłą

Dwa ciała na równi dwustronnej — klin o kątach α i β

Ruch układu klocków leżących jeden na drugim na równi pochyłej

Zadania maturalne ze złożonych układów sił na równi pochyłej

Ruch po łuku okręgu i profilowane zakręty jako pochodna równi pochyłej

Podsumowanie i algorytm rozwiązywania zadań z tarciem na równi

Układy ciał powiązanych i zaawansowane zagadnienia z równią pochyłą

Doświadczenie: Weryfikacja II zasady dynamiki na torze powietrznym (a w funkcji F i m)

Doświadczenie: Wyznaczanie współczynnika tarcia statycznego i kinetycznego klocka o podłoże

Doświadczenie: Badanie zależności siły dośrodkowej od promienia i prędkości w ruchu po okręgu

Doświadczenie: Obserwacja działania sił bezwładności w układach przyspieszających i wirujących

Doświadczenie: Weryfikacja zasady zachowania energii mechanicznej na torze

Analiza niepewności pomiarowych i sporządzanie wykresów w doświadczeniach z dynamiki

Badania doświadczalne w mechanice klasycznej

Siła odśrodkowa bezwładności w obracającym się układzie odniesienia: F_od = m ω² r

Wirujące naczynie z cieczą — paraboloida obrotowa powierzchni cieczy

Wirówki laboratoryjne i separacja substancji w polu sił odśrodkowych

Jakościowe wprowadzenie do siły Coriolisa na obracającej się Ziemi

Zadania rachunkowe ze stanów przeciążenia i sił bezwładności

Podsumowanie i autoewaluacja: dynamika w układach nieinercjalnych

Obracające się układy odniesienia: siła odśrodkowa i siła Coriolisa

Kinematyka ruchu jednostajnego po okręgu — kąt, prędkość kątowa, okres i częstotliwość

Dynamiczna rola siły dośrodkowej jako wypadkowej sił rzeczywistych

Wzór na siłę dośrodkową F_dos = m v² / r i jej zależności proporcjonalności

Doświadczenie: Badanie zależności siły dośrodkowej od masy ciała przy stałym r i ω

Doświadczenie: Badanie zależności siły dośrodkowej od promienia toru r

Doświadczenie: Badanie zależności siły dośrodkowej od prędkości liniowej v i kątowej ω

Ruch po okręgu i siła dośrodkowa — teoria i doświadczenie

Prędkość w dowolnym punkcie toru i prędkość końcowa w rzucie ukośnym

Promień krzywizny toru w wierzchołku i w punkcie początkowym rzutu ukośnego

Rzut ukośny z dowolnej wysokości początkowej h₀

Wpływ oporów powietrza na trajektorię rzutów — krzywa balistyczna

Modelowanie komputerowe i numeryczna analiza rzutów

Porównanie wszystkich typów rzutów — tabela zbiorcza i studium przypadków

Zaawansowane zadania olimpijskie i maturalne z rzutów

Zaawansowana mechanika rzutów — krzywizna toru, opory ruchu i modelowanie numeryczne

Miara łukowa kąta — radian jako jednostka przemieszczenia kątowego

Prędkość kątowa omega: definicja, wzór omega = delta alfa / delta t i jednostka rad/s

Prędkość liniowa w ruchu po okręgu i jej styczność do toru

Związek między prędkością liniową a prędkością kątową: v = omega·r

Przyspieszenie dośrodkowe a_d jako miara zmiany kierunku wektora prędkości

Wyprowadzenie wzorów na przyspieszenie dośrodkowe: a_d = v²/r oraz a_d = omega²·r

Zależności między promieniem, prędkością liniową, kątową i przyspieszeniem dośrodkowym

Podstawy kinematyki ruchu po okręgu i przyspieszenie dośrodkowe

Ruch pojazdu na poziomym zakręcie — tarcie statyczne jako siła dośrodkowa

Ruch pojazdu na zakręcie profilowanym pod kątem α bez udziału tarcia

Wahadło stożkowe — analiza sił i wyprowadzenie okresu drgań T = 2π √(l cos θ / g)

Ruch w pionowym okręgu — diabelska pętla i wypadkowa sił w najwyższym i najniższym punkcie

Ruch ciężarówki przez wypukły i wklęsły most — nacisk na podłoże

Ruch satelitów wokół Ziemi — siła grawitacji jako siła dośrodkowa i pierwsza prędkość kosmiczna

Niepewności pomiarowe w doświadczeniu z ruchem po okręgu — wyznaczanie ω i F

Zadania maturalne z dynamiki ruchu po okręgu

Podsumowanie: ruch po okręgu i siła dośrodkowa w przyrodzie i technice

Zastosowania dynamiki ruchu po okręgu w zadaniach i zjawiskach

Kinematyka przekładni pasowych, zębatych i kół łańcuchowych — rower

Ruch obrotowy Ziemi i prędkość liniowa punktów na różnych szerokościach geograficznych

Toczenie się koła bez poślizgu — składanie ruchu postępowego i obrotowego

Laboratorium: Wyznaczanie okresu i prędkości kątowej w ruchu po okręgu

Zestaw zadań maturalnych z kinematyki ruchu po okręgu

Zastosowania kinematyki ruchu po okręgu i układy złożone

Siła dośrodkowa jako wypadkowa sił wymuszająca zakrzywienie toru: F_d = m·v²/r

Identyfikacja źródeł siły dośrodkowej w układach fizycznych

Samochód na płaskim zakręcie i maksymalna bezpieczna prędkość — rola tarcia

Zakręt wyprofilowany — rola składowej siły nacisku

Wahadło stożkowe — analiza sił i wyprowadzenie okresu ruchu

Ruch po okręgu w pionie — naciąg nici w najwyższym i najniższym punkcie

Prędkość krytyczna w ruchu po okręgu w pionie — pętla śmierci

Dynamika ruchu po okręgu — siła dośrodkowa i podstawowe układy

Przyspieszenie styczne a_s w ruchu niejednostajnym po okręgu

Całkowite przyspieszenie w ruchu niejednostajnym po okręgu: a = sqrt(a_s² + a_d²)

Ruch ciężkiego punktu po sferze — kąt oderwania się od powierzchni

Przeciążenie i stan nieważkości na wypukłym oraz wklęsłym moście

Laboratorium: Badanie zależności siły dośrodkowej od masy, promienia i prędkości

Zaawansowane zadania z dynamiki ruchu po okręgu

Zestaw zadań maturalnych z dynamiki ruchu krzywoliniowego

Ruch niejednostajny po okręgu i zaawansowana dynamika ruchu krzywoliniowego

Pływanie ciał z wydrążeniami i komorami balastowymi — okręt podwodny

Nurkujący Kartezjusz — doświadczenie i wyjaśnienie fizyczne

Statyka i stateczność pływania — metacentrum i moment prostujący statku

Pływalność organizmów wodnych — pęcherz pławny u ryb i tkanka tłuszczowa u ssaków

Izostazja w geologii — pływanie bloków skorupy ziemskiej w płaszczu Ziemi

Zbiorniki i zapory wodne — obliczanie całkowitej siły parcia na ścianę zapory

Śluza wodna i pochylnia — zasada działania z punktu widzenia hydrostatyki

Inżynieryjne i przyrodnicze zastosowania hydrostatyki

Definicja środka masy dla układu punktów materialnych na prostej

Wektor położenia środka masy układu punktów w dwóch i trzech wymiarach

Środek masy bryły jednorodnej — rola symetrii geometrycznej (osie i płaszczyzny symetrii)

Środek masy układu złożonych figur płaskich — metoda podziału na części proste

Metoda mas ujemnych — wyznaczanie środka masy bryły z otworem lub wycięciem

Środek masy a środek ciężkości — różnica pojęć w jednorodnym i niejednorodnym polu grawitacyjnym

Doświadczalne wyznaczanie środka ciężkości bryły płaskiej — metoda dwukrotnego zawieszenia

Wyznaczanie środka masy i środka ciężkości brył oraz układów punktów

Prędkość i pęd środka masy układu: v_sm = p_całk / M

Ruch środka masy układu izolowanego i twierdzenie o ruchu środka masy

Druga zasada dynamiki dla ruchu środka masy: F_zewn = M · a_sm

Układ odniesienia związany ze środkiem masy (układ SM) i całkowity pęd zerowy

Przesuwanie się ludzi w łódce — obliczanie przesunięcia łódki z niezmienności środka masy

Stateczność równowagi ciał — podstawa podparcia i położenie środka ciężkości

Zadania maturalne z wyznaczania środka masy i jego ruchu

Podsumowanie: środek masy jako kluczowy punkt redukcji układu mechanicznego

Dynamika i ruch środka masy układu ciał

Pojęcie bryły sztywnej — niezmienność wzajemnych odległości punktów ciała

Ruch postępowy a ruch obrotowy bryły sztywnej — kryteria rozróżniania

Opis położenia kątowego — kąt obrotu w radianach i jego przeliczanie na stopnie

Prędkość kątowa bryły — definicja ω = Δα / Δt i jednostka rad/s

Jednakowa prędkość kątowa wszystkich punktów bryły sztywnej

Związek prędkości liniowej z prędkością kątową: v = ω · r

Przyspieszenie kątowe — definicja ε = Δω / Δt i jednostka rad/s²

Rozkład przyspieszenia liniowego punktu bryły — przyspieszenie styczne i dośrodkowe (normalne)

Podstawy kinematyki bryły sztywnej — wielkości kątowe i liniowe

Odśrodkowa siła bezwładności w układzie obracającym się: F_od = m·omega²·r

Siła Coriolisa — pojęcie, kierunek i wpływ na zjawiska na Ziemi

Zasada równoważności układów inercjalnych (zasada względności Galileusza)

Sztuczna grawitacja w stacjach kosmicznych — projektowanie wirującego pierścienia

Zestaw zadań maturalnych z układów nieinercjalnych i sił bezwładności

Wirujące układy odniesienia i względność ruchu w dynamice

Ruch obrotowy jednostajny — równania ruchu α(t) = α₀ + ω · t

Ruch obrotowy jednostajnie zmienny — wzory na ω(t) i α(t)

Wykresy kinematyczne w ruchu obrotowym: α(t), ω(t) i ε(t)

Analogia między wielkościami ruchu postępowego i obrotowego

Przekładnie zębate i pasowe — zależność prędkości kątowych i promieni kół

Zadania rachunkowe z kinematyki ruchu obrotowego bryły

Podsumowanie: kinematyka bryły sztywnej w zadaniach fizycznych

Równania ruchu, wykresy i zastosowania w kinematyce ruchu obrotowego

Definicja momentu siły względem osi i punktu: M = r · F · sin(α)

Ramię siły — definicja jako najkrótszej odległości linii działania siły od osi obrotu

Jednostka momentu siły — niutonometr (N · m) i jej odróżnienie od dżula

Reguła znaku momentu siły — obrót zgodny i przeciwny do ruchu wskazówek zegara

Pierwszy warunek równowagi bryły sztywnej — zerowanie się sumy wektorowej sił zewnętrznych

Drugi warunek równowagi bryły sztywnej — zerowanie się sumy momentów sił względem dowolnej osi

Wybór dogodnej osi obrotu w zadaniach ze statyki — eliminacja sił nieznanych

Para sił i jej moment — niezależność momentu pary sił od wyboru punktu odniesienia

Moment siły i warunki równowagi bryły sztywnej

Równowaga dźwigni jedno- i dwustronnej z uwzględnieniem ciężaru własnego belki

Belka podparta na dwóch końcach — wyznaczanie sił reakcji podpór

Drabina oparta o ścianę — warunki równowagi i minimalny współczynnik tarcia o podłoże

OGS.8.PS.9

Aligned learning resources

Related diagrams