Spaces:
Running
Running
| <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> | |