Spaces:

ParulPandey
/

Rotational_Symmetry

Running

File size: 19,110 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Interactive app to teach kids about rotation symmetry in shapes" />
  <meta name="keywords" content="rotation symmetry, kids education, shapes, interactive learning" />
  <title>Rotation Symmetry Explorer</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827; /* gray-900 */
      --muted: #6b7280; /* gray-500 */
      --grid: #e5e7eb; /* gray-200 */
      --accent: #2563eb; /* blue-600 */
      --good: #16a34a; /* green-600 */
      --danger: #ef4444; /* red-500 */
      --card: #f9fafb; /* gray-50 */
      --shadow: 0 6px 20px rgba(0,0,0,0.08);
      --radius: 16px;
    }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg); }
    header { padding: 24px 16px; text-align: center; }
    header h1 { margin: 0 0 4px; font-size: 2rem; }
    header p { margin: 0; color: #374151; }

    main { padding: 16px; max-width: 1200px; margin: 0 auto; }

    .intro { background: var(--card); padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
    .intro h2 { margin-top: 0; font-size: 1.25rem; }

    .explorer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
    @media (max-width: 900px) { .explorer { grid-template-columns: 1fr; } }

    .shape-container { background: var(--card); padding: 12px; border-radius: var(--radius); box-shadow: var(--shadow); }
    .shape-stage { position: relative; border-radius: 12px; overflow: hidden; background: #fff; height: 420px; border: 1px solid #e5e7eb; }
    canvas { width: 100%; height: 100%; display: block; cursor: default; }
    canvas.drawing { cursor: crosshair; }

    .controls { background: #fff; padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 12px; }
    .controls label { font-size: 0.9rem; color: #374151; display: block; margin-bottom: 4px; }
    .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .row input[type="range"] { flex: 1; }
    .btn { appearance: none; border: 1px solid #e5e7eb; background: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; cursor: pointer; }
    .btn:active { transform: translateY(1px); }
    .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn.ghost { background: #f3f4f6; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; }

    select, input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
    select { width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; }

    .info { background: var(--card); padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow); }
    .info h3 { margin: 0 0 6px; }

    .examples { margin-top: 24px; }
    .shapes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
    @media (max-width: 900px) { .shapes-grid { grid-template-columns: repeat(3, 1fr); } }
    .shape-item { background: #fff; padding: 10px; text-align: center; border: 1px solid #e5e7eb; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow); }
    .shape-item p { margin: 8px 0 0; font-size: 0.9rem; }
    .example-shape { width: 56px; height: 56px; margin: 0 auto; background: #f3f4f6; border: 2px solid #d1d5db; }
    .example-shape.square { }
    .example-shape.triangle { clip-path: polygon(50% 10%, 90% 90%, 10% 90%); }
    .example-shape.circle { border-radius: 50%; }
    .example-shape.rectangle { }
    .example-shape.star { clip-path: polygon(50% 8%, 61% 35%, 90% 38%, 66% 58%, 72% 86%, 50% 70%, 28% 86%, 34% 58%, 10% 38%, 39% 35%); }
    .example-shape.hexagon { clip-path: polygon(25% 5%, 75% 5%, 95% 50%, 75% 95%, 25% 95%, 5% 50%); }

    footer { text-align: center; color: #6b7280; padding: 24px 16px; }
  </style>
</head>
<body>
  <header>
    <h1>Rotation Symmetry Explorer</h1>
    <p>Learn about shapes that look the same when rotated!</p>
  </header>

  <main>
    <section class="intro">
      <h2>What is Rotation Symmetry?</h2>
      <p>A shape has rotation symmetry when it looks exactly the same after being rotated around its center. The number of times it matches as it rotates through 360° is called its <strong>order</strong>.</p>
    </section>

    <section class="explorer">
      <div class="shape-container">
        <div class="shape-stage">
          <canvas id="stage"></canvas>
        </div>
      </div>

      <div class="controls">
        <div>
          <label for="rotation-slider">Rotate Shape:</label>
          <div class="row">
            <input type="range" id="rotation-slider" min="0" max="360" value="0" />
            <span id="rotation-value" style="width:48px; text-align:right; font-weight:700;">0°</span>
          </div>
        </div>

        <div>
          <label for="shape-select">Choose Shape:</label>
          <select id="shape-select">
            <option value="square">Square (Order: 4)</option>
            <option value="triangle">Triangle (Order: 3)</option>
            <option value="circle">Circle (Order: ∞)</option>
            <option value="rectangle">Rectangle (Order: 2)</option>
            <option value="star">Star (Order: 5)</option>
            <option value="hexagon">Hexagon (Order: 6)</option>
            <option value="drawing">My drawing</option>
          </select>
        </div>

        <div class="row">
          <button id="animate-btn" class="btn primary">Animate Rotation</button>
          <button id="reset-btn" class="btn">Reset</button>
        </div>

        <div class="row" style="justify-content: space-between;">
          <label class="toggle"><input type="checkbox" id="tracing-toggle" checked /> Tracing paper</label>
          <label class="toggle"><input type="checkbox" id="draw-toggle" /> Draw mode</label>
        </div>

        <div class="row" id="pen-row" style="display:none;">
          <label for="pen-size">Pen size</label>
          <input type="range" id="pen-size" min="1" max="16" value="4" />
          <span id="pen-size-value" style="width:36px; text-align:right;">4px</span>
          <button id="clear-drawing" class="btn ghost">Clear drawing</button>
        </div>

        <div class="info">
          <h3>Symmetry Order: <span id="order-value">4</span></h3>
          <p id="shape-info">A square looks the same 4 times during a full rotation of 360°.</p>
          <p style="font-size:12px; color:#6b7280; margin-top:8px;">Tip: Watch the small dark dot on the shape. It is a <strong>reference point</strong> that shows how the shape turns.</p>
        </div>
      </div>
    </section>

    <section class="examples">
      <h2>Common Shapes with Rotation Symmetry</h2>
      <div class="shapes-grid">
        <div class="shape-item" data-shape="square">
          <div class="example-shape square"></div>
          <p>Square</p>
        </div>
        <div class="shape-item" data-shape="triangle">
          <div class="example-shape triangle"></div>
          <p>Triangle</p>
        </div>
        <div class="shape-item" data-shape="circle">
          <div class="example-shape circle"></div>
          <p>Circle</p>
        </div>
        <div class="shape-item" data-shape="rectangle">
          <div class="example-shape rectangle"></div>
          <p>Rectangle</p>
        </div>
        <div class="shape-item" data-shape="star">
          <div class="example-shape star"></div>
          <p>Star</p>
        </div>
        <div class="shape-item" data-shape="hexagon">
          <div class="example-shape hexagon"></div>
          <p>Hexagon</p>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <p>Created for kids to learn about rotation symmetry | Made with HTML, CSS, and JavaScript</p>
  </footer>

  <script>
    // --- State ---
    const canvas = document.getElementById('stage');
    const slider = document.getElementById('rotation-slider');
    const rotationValue = document.getElementById('rotation-value');
    const shapeSelect = document.getElementById('shape-select');
    const orderValue = document.getElementById('order-value');
    const shapeInfo = document.getElementById('shape-info');
    const animateBtn = document.getElementById('animate-btn');
    const resetBtn = document.getElementById('reset-btn');
    const tracingToggle = document.getElementById('tracing-toggle');
    const drawToggle = document.getElementById('draw-toggle');
    const penRow = document.getElementById('pen-row');
    const penSizeInput = document.getElementById('pen-size');
    const penSizeValue = document.getElementById('pen-size-value');
    const clearDrawingBtn = document.getElementById('clear-drawing');

    const ctx = canvas.getContext('2d');

    let angle = 0; // degrees
    let shape = 'square';
    let tracing = true;
    let drawMode = false;
    let penDown = false;
    let penSize = 4;
    let strokes = []; // Array of arrays of points in center coords
    let animating = false;
    let rafId = null;
    let lastTs = 0;

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

    function getCenter() {
      return { cx: canvas.clientWidth / 2, cy: canvas.clientHeight / 2 };
    }

    function deg2rad(d) { return (d * Math.PI) / 180; }

    function makeShapePath() {
      const size = Math.min(canvas.clientWidth, canvas.clientHeight) * 0.32;
      switch (shape) {
        case 'square':
          return { type: 'poly', pts: [
            {x: -size, y: -size}, {x: size, y: -size}, {x: size, y: size}, {x: -size, y: size}
          ]};
        case 'triangle':
          return { type: 'poly', pts: [
            {x: 0, y: -size}, {x: size, y: size}, {x: -size, y: size}
          ]};
        case 'circle':
          return { type: 'circle', r: size };
        case 'rectangle': {
          const w = size * 1.8, h = size; // wider than tall
          return { type: 'poly', pts: [
            {x: -w, y: -h}, {x: w, y: -h}, {x: w, y: h}, {x: -w, y: h}
          ]};
        }
        case 'star': {
          const pts = []; const spikes = 5; const outer = size; const inner = size * 0.45;
          for (let i = 0; i < spikes * 2; i++) {
            const r = (i % 2 === 0) ? outer : inner;
            const a = (i * Math.PI) / spikes - Math.PI / 2;
            pts.push({ x: r * Math.cos(a), y: r * Math.sin(a) });
          }
          return { type: 'poly', pts };
        }
        case 'hexagon': {
          const pts = []; const r = size;
          for (let i = 0; i < 6; i++) {
            const a = (i * Math.PI) / 3 - Math.PI / 2;
            pts.push({ x: r * Math.cos(a), y: r * Math.sin(a) });
          }
          return { type: 'poly', pts };
        }
        case 'drawing':
          return { type: 'strokes', strokes };
      }
    }

    function drawGrid(w, h) {
      ctx.save();
      ctx.clearRect(0, 0, w, h);
      ctx.lineWidth = 1; ctx.strokeStyle = '#e5e7eb';
      for (let x = 0; x < w; x += 40) { ctx.beginPath(); ctx.moveTo(x + 0.5, 0); ctx.lineTo(x + 0.5, h); ctx.stroke(); }
      for (let y = 0; y < h; y += 40) { ctx.beginPath(); ctx.moveTo(0, y + 0.5); ctx.lineTo(w, y + 0.5); ctx.stroke(); }
      ctx.restore();
    }

    function drawReference(cx, cy) {
      ctx.save();
      // center point
      ctx.fillStyle = '#ef4444';
      ctx.beginPath(); ctx.arc(cx, cy, 6, 0, Math.PI * 2); ctx.fill();
      // 0° reference line
      ctx.strokeStyle = '#2563eb'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + 160, cy); ctx.stroke();
      // current angle line
      ctx.save(); ctx.translate(cx, cy); ctx.rotate(deg2rad(angle));
      ctx.strokeStyle = '#16a34a'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(160, 0); ctx.stroke(); ctx.restore();
      // angle arc
      const radius = 36; ctx.strokeStyle = '#6b7280'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, deg2rad(angle), angle >= 0); ctx.stroke();
      // label
      ctx.fillStyle = '#111827'; ctx.font = 'bold 14px ui-sans-serif, system-ui'; ctx.fillText(Math.round(angle) + '°', cx + radius + 10, cy - 8);
      ctx.restore();
    }

    function drawPoly(pts) {
      if (!pts.length) return; ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x, pts[i].y); ctx.closePath();
    }

    function drawStrokesSet(s, lw) {
      ctx.lineJoin = 'round'; ctx.lineCap = 'round';
      for (const stroke of s) {
        if (stroke.length < 2) continue; ctx.beginPath(); ctx.moveTo(stroke[0].x, stroke[0].y); for (let i = 1; i < stroke.length; i++) ctx.lineTo(stroke[i].x, stroke[i].y); ctx.lineWidth = lw; ctx.stroke();
      }
    }

    function drawShapeWithOptions(cx, cy, color, alpha, atAngleDeg, showMarker) {
      const path = makeShapePath();
      ctx.save(); ctx.translate(cx, cy); ctx.rotate(deg2rad(atAngleDeg)); ctx.globalAlpha = alpha; ctx.strokeStyle = color; ctx.fillStyle = 'rgba(0,0,0,0)';
      if (path.type === 'poly') {
        drawPoly(path.pts); ctx.lineWidth = 4; ctx.stroke();
        if (showMarker && path.pts.length) { const p = path.pts[0]; ctx.fillStyle = '#111827'; ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.fill(); }
      } else if (path.type === 'circle') {
        ctx.beginPath(); ctx.arc(0, 0, path.r, 0, Math.PI * 2); ctx.lineWidth = 4; ctx.stroke(); if (showMarker) { ctx.fillStyle = '#111827'; ctx.beginPath(); ctx.arc(path.r, 0, 6, 0, Math.PI * 2); ctx.fill(); }
      } else if (path.type === 'strokes') {
        ctx.lineWidth = penSize; drawStrokesSet(path.strokes, penSize);
        if (showMarker && path.strokes.length && path.strokes[0].length) { const p = path.strokes[0][0]; ctx.fillStyle = '#111827'; ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.fill(); }
      }
      ctx.restore();
    }

    function draw() {
      const w = canvas.clientWidth, h = canvas.clientHeight; const { cx, cy } = getCenter();
      drawGrid(w, h); drawReference(cx, cy);
      if (tracing) drawShapeWithOptions(cx, cy, '#6b7280', 0.35, 0, true); // faint original at 0°
      drawShapeWithOptions(cx, cy, '#111827', 1, angle, true); // active rotated shape
    }

    // --- Drawing (pen) ---
    function toLocal(clientX, clientY) {
      const rect = canvas.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const { cx, cy } = getCenter(); return { x: x - cx, y: y - cy };
    }

    canvas.addEventListener('pointerdown', (e) => {
      if (!drawMode) return; const p = toLocal(e.clientX, e.clientY); penDown = true; strokes.push([p]); if (shape !== 'drawing') { shape = 'drawing'; shapeSelect.value = 'drawing'; updateInfo(); }
      draw();
    });
    canvas.addEventListener('pointermove', (e) => {
      if (!drawMode || !penDown) return; const p = toLocal(e.clientX, e.clientY); const last = strokes[strokes.length - 1]; last.push(p); draw();
    });
    function endStroke() { penDown = false; }
    canvas.addEventListener('pointerup', endStroke);
    canvas.addEventListener('pointerleave', endStroke);

    // --- UI events ---
    slider.addEventListener('input', () => { angle = Number(slider.value); rotationValue.textContent = Math.round(angle) + '°'; draw(); });

    shapeSelect.addEventListener('change', () => { shape = shapeSelect.value; updateInfo(); draw(); });

    animateBtn.addEventListener('click', () => { animating = !animating; animateBtn.textContent = animating ? 'Stop' : 'Animate Rotation'; if (animating) { lastTs = performance.now(); rafId = requestAnimationFrame(loop); } else if (rafId) { cancelAnimationFrame(rafId); } });

    resetBtn.addEventListener('click', () => { angle = 0; slider.value = '0'; rotationValue.textContent = '0°'; tracing = true; tracingToggle.checked = true; drawMode = false; drawToggle.checked = false; canvas.classList.remove('drawing'); strokes = []; shape = 'square'; shapeSelect.value = 'square'; penSize = 4; penSizeInput.value = '4'; penSizeValue.textContent = '4px'; updateInfo(); draw(); });

    tracingToggle.addEventListener('change', () => { tracing = tracingToggle.checked; draw(); });

    drawToggle.addEventListener('change', () => { drawMode = drawToggle.checked; penRow.style.display = drawMode ? 'flex' : 'none'; canvas.classList.toggle('drawing', drawMode); if (drawMode) { shape = 'drawing'; shapeSelect.value = 'drawing'; updateInfo(); } draw(); });

    penSizeInput.addEventListener('input', () => { penSize = Number(penSizeInput.value); penSizeValue.textContent = penSize + 'px'; draw(); });

    clearDrawingBtn.addEventListener('click', () => { strokes = []; draw(); });

    document.querySelectorAll('.shape-item').forEach(card => {
      card.addEventListener('click', () => { const val = card.getAttribute('data-shape'); shape = val; shapeSelect.value = val; if (val !== 'drawing') { drawMode = false; drawToggle.checked = false; penRow.style.display = 'none'; canvas.classList.remove('drawing'); } updateInfo(); draw(); });
    });

    // --- Animate loop ---
    function loop(ts) {
      const dt = Math.min(32, ts - lastTs); lastTs = ts; // ms
      angle = (angle + (dt * 0.12)) % 360; // ~43° per second
      slider.value = String(angle); rotationValue.textContent = Math.round(angle) + '°';
      draw();
      if (animating) rafId = requestAnimationFrame(loop);
    }

    // --- Info / order ---
    function getOrder(s) {
      switch (s) {
        case 'square': return 4;
        case 'triangle': return 3;
        case 'circle': return '∞';
        case 'rectangle': return 2;
        case 'star': return 5; // regular 5-point star
        case 'hexagon': return 6;
        case 'drawing': return '?';
      }
    }

    function updateInfo() {
      const ord = getOrder(shape); orderValue.textContent = ord;
      const textMap = {
        square: 'A square looks the same 4 times during a full rotation of 360°.',
        triangle: 'An equilateral triangle matches itself 3 times in 360°.',
        circle: 'A circle looks the same at any angle, so its order is infinite.',
        rectangle: 'A rectangle matches itself 2 times in 360° (every 180°).',
        star: 'A 5-point star matches itself 5 times in 360°.',
        hexagon: 'A regular hexagon matches itself 6 times in 360°.',
        drawing: 'Draw your own shape. The order depends on your design.'
      };
      shapeInfo.textContent = textMap[shape];
    }

    // --- Init ---
    window.addEventListener('resize', () => { setupCanvas(); draw(); });
    setupCanvas(); updateInfo(); draw();
  </script>
</body>
</html>