Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Why We See Only One Side of the Moon</title> | |
| <!-- Fonts for header and body --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script> | |
| <style> | |
| html, body, .font-sans { | |
| font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| #animation-container { | |
| position: relative; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| background-color: #000010; | |
| } | |
| #animation-canvas { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 1; | |
| } | |
| .header-astro { | |
| font-family: 'Space Grotesk', 'Inter', Arial, sans-serif; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| } | |
| .control-panel { | |
| position: absolute; | |
| bottom: 2rem; | |
| left: 2rem; | |
| z-index: 10; | |
| background: rgba(0, 0, 20, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 1rem; | |
| padding: 1rem; | |
| box-shadow: 0 0 20px rgba(186, 215, 255, 0.2); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .explanation-panel { | |
| position: absolute; | |
| top: 2rem; | |
| right: 2rem; | |
| z-index: 10; | |
| background: rgba(0, 0, 20, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| box-shadow: 0 0 20px rgba(186, 215, 255, 0.2); | |
| color: white; | |
| width: 220px; | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| transition: opacity 0.3s ease-in-out; | |
| opacity: 0; | |
| } | |
| .control-btn { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.92rem; | |
| font-weight: 600; | |
| color: white; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease; | |
| text-align: center; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| } | |
| .control-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .control-btn.active { | |
| background-color: #4f46e5; | |
| border-color: #4f46e5; | |
| } | |
| /* Disclaimer at bottom, single line, smaller, no glow */ | |
| .disclaimer-line { | |
| position: fixed; | |
| left: 50%; | |
| bottom: 1.1rem; | |
| transform: translateX(-50%); | |
| z-index: 40; | |
| font-size: 0.89rem; | |
| color: #b6bed7; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| text-align: center; | |
| padding: 0 0.5rem; | |
| border-radius: 0.4rem; | |
| pointer-events: none; | |
| white-space: nowrap; | |
| background: transparent; | |
| opacity: 0.88; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white overflow-hidden font-sans"> | |
| <div id="animation-container" class="relative"> | |
| <h1 class="header-astro absolute text-center top-8 left-1/2 -translate-x-1/2 text-3xl md:text-4xl font-bold text-white z-20 w-11/12" style="text-shadow: 0 0 15px rgba(186, 215, 255, 0.7);"> | |
| Why We See Only One Side of the Moon | |
| </h1> | |
| <!-- Canvas will be inserted here by p5.js --> | |
| </div> | |
| <div id="explanation-panel" class="explanation-panel"></div> | |
| <div class="control-panel"> | |
| <button id="btn-no-rotation" class="control-btn">No Rotation</button> | |
| <button id="btn-fast-rotation" class="control-btn">Fast Rotation</button> | |
| <button id="btn-locked-rotation" class="control-btn active">Tidally Locked</button> | |
| </div> | |
| <div class="disclaimer-line"> | |
| Disclaimer: Earth’s rotation is hidden to keep the focus on the Moon’s motion. | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const sketch = (p) => { | |
| let earth; | |
| let moon; | |
| let stars = []; | |
| let rotationMode = 'locked'; | |
| let starCount = 800; | |
| const btnNoRotation = document.getElementById('btn-no-rotation'); | |
| const btnFastRotation = document.getElementById('btn-fast-rotation'); | |
| const btnLockedRotation = document.getElementById('btn-locked-rotation'); | |
| const explanationPanel = document.getElementById('explanation-panel'); | |
| const explanations = { | |
| none: '<strong>No Rotation:</strong> The Moon does not spin on its own axis. The red line always points in the same direction, so we see all sides of the Moon as it orbits.', | |
| fast: '<strong>Fast Rotation:</strong> The Moon spins on its own axis very quickly, much faster than it orbits the Earth. We can easily see all of its sides.', | |
| locked: '<strong>Tidally Locked:</strong> The Moon rotates on its axis at the same speed it orbits the Earth. This is why the red line (and the same face) always points toward the Earth!' | |
| }; | |
| function updateActiveButton() { | |
| document.querySelectorAll('.control-btn').forEach(btn => btn.classList.remove('active')); | |
| explanationPanel.style.opacity = '1'; | |
| if (rotationMode === 'none') { | |
| btnNoRotation.classList.add('active'); | |
| explanationPanel.innerHTML = explanations.none; | |
| } else if (rotationMode === 'fast') { | |
| btnFastRotation.classList.add('active'); | |
| explanationPanel.innerHTML = explanations.fast; | |
| } else if (rotationMode === 'locked') { | |
| btnLockedRotation.classList.add('active'); | |
| explanationPanel.innerHTML = explanations.locked; | |
| } | |
| } | |
| btnNoRotation.addEventListener('click', () => { | |
| rotationMode = 'none'; | |
| updateActiveButton(); | |
| }); | |
| btnFastRotation.addEventListener('click', () => { | |
| rotationMode = 'fast'; | |
| updateActiveButton(); | |
| }); | |
| btnLockedRotation.addEventListener('click', () => { | |
| rotationMode = 'locked'; | |
| updateActiveButton(); | |
| }); | |
| function fillStars(n) { | |
| stars = []; | |
| for (let i = 0; i < n; i++) { | |
| stars.push(p.createVector(p.random(p.width), p.random(p.height))); | |
| } | |
| } | |
| p.setup = () => { | |
| let canvas = p.createCanvas(p.windowWidth, p.windowHeight); | |
| canvas.parent('animation-container'); | |
| canvas.id('animation-canvas'); | |
| p.colorMode(p.HSB, 360, 100, 100, 100); | |
| p.angleMode(p.DEGREES); | |
| earth = new Earth(p.width / 2, p.height / 2); | |
| moon = new Moon(earth.pos.x, earth.pos.y, p.min(p.width, p.height) * 0.4); | |
| starCount = Math.floor((p.width * p.height) / 1800); | |
| fillStars(starCount); | |
| updateActiveButton(); | |
| }; | |
| p.draw = () => { | |
| p.background(245, 90, 10); | |
| drawStars(); | |
| moon.update(); | |
| earth.update(); | |
| earth.display(moon.pos); | |
| moon.display(); | |
| }; | |
| function drawStars() { | |
| p.noStroke(); | |
| for (const star of stars) { | |
| star.x -= 0.02; | |
| if (star.x < 0) { | |
| star.x = p.width; | |
| } | |
| let alpha = p.random(50, 100); | |
| let size = p.random(1, 3); | |
| if (p.random() > 0.99) { | |
| alpha = 100; | |
| size = p.random(2.5, 4); | |
| } | |
| p.fill(0, 0, 100, alpha); | |
| p.ellipse(star.x, star.y, size, size); | |
| } | |
| } | |
| p.windowResized = () => { | |
| p.resizeCanvas(p.windowWidth, p.windowHeight); | |
| if (earth) earth.pos.set(p.width / 2, p.height / 2); | |
| if (moon) { | |
| moon.center.set(p.width / 2, p.height / 2); | |
| moon.radius = p.min(p.width, p.height) * 0.35; | |
| } | |
| starCount = Math.floor((p.width * p.height) / 1800); | |
| fillStars(starCount); | |
| }; | |
| class Earth { | |
| constructor(x, y) { | |
| this.pos = p.createVector(x, y); | |
| this.bodySize = p.min(p.width, p.height) * 0.25; | |
| this.eyes = [ | |
| { offset: p.createVector(-this.bodySize * 0.27, -this.bodySize * 0.13), size: this.bodySize * 0.25 }, | |
| { offset: p.createVector(this.bodySize * 0.27, -this.bodySize * 0.13), size: this.bodySize * 0.25 } | |
| ]; | |
| } | |
| update() { | |
| this.bodySize = p.min(p.width, p.height) * 0.25; | |
| this.eyes[0].offset.set(-this.bodySize * 0.27, -this.bodySize * 0.13); | |
| this.eyes[1].offset.set(this.bodySize * 0.27, -this.bodySize * 0.13); | |
| this.eyes[0].size = this.bodySize * 0.25; | |
| this.eyes[1].size = this.bodySize * 0.25; | |
| } | |
| display(target) { | |
| p.push(); | |
| p.translate(this.pos.x, this.pos.y); | |
| p.drawingContext.shadowBlur = 60; | |
| p.drawingContext.shadowColor = p.color(200, 80, 100, 50); | |
| p.fill(210, 80, 80); | |
| p.noStroke(); | |
| p.ellipse(0, 0, this.bodySize, this.bodySize); | |
| p.fill(120, 60, 65); | |
| p.noStroke(); | |
| p.beginShape(); | |
| p.curveVertex(this.bodySize * -0.15, this.bodySize * -0.4); | |
| p.curveVertex(this.bodySize * -0.1, this.bodySize * -0.4); | |
| p.curveVertex(this.bodySize * -0.2, this.bodySize * -0.2); | |
| p.curveVertex(this.bodySize * -0.15, 0.05); | |
| p.curveVertex(this.bodySize * -0.3, this.bodySize * 0.3); | |
| p.curveVertex(this.bodySize * -0.2, this.bodySize * 0.45); | |
| p.curveVertex(this.bodySize * 0.05, this.bodySize * 0.4); | |
| p.curveVertex(this.bodySize * 0.1, 0.1); | |
| p.curveVertex(this.bodySize * -0.1, this.bodySize * -0.4); | |
| p.curveVertex(this.bodySize * -0.1, this.bodySize * -0.4); | |
| p.endShape(p.CLOSE); | |
| p.beginShape(); | |
| p.curveVertex(this.bodySize * 0.4, this.bodySize * -0.3); | |
| p.curveVertex(this.bodySize * 0.45, this.bodySize * -0.2); | |
| p.curveVertex(this.bodySize * 0.35, 0); | |
| p.curveVertex(this.bodySize * 0.4, this.bodySize * 0.25); | |
| p.curveVertex(this.bodySize * 0.2, this.bodySize * 0.4); | |
| p.curveVertex(this.bodySize * 0.15, this.bodySize * 0.2); | |
| p.curveVertex(this.bodySize * 0.25, 0); | |
| p.endShape(p.CLOSE); | |
| p.fill(200, 5, 100, 90); | |
| p.noStroke(); | |
| p.arc(0, 0, this.bodySize, this.bodySize, 250, 290, p.CHORD); | |
| p.arc(0, 0, this.bodySize, this.bodySize, 70, 110, p.CHORD); | |
| p.drawingContext.shadowBlur = 0; | |
| this.eyes.forEach(eye => this.drawEye(eye.offset.x, eye.offset.y, eye.size, target)); | |
| p.noFill(); | |
| p.stroke(210, 20, 20, 80); | |
| p.strokeWeight(4); | |
| p.arc(0, this.bodySize * 0.15, this.bodySize * 0.4, this.bodySize * 0.27, 0, 180); | |
| p.pop(); | |
| } | |
| drawEye(x, y, size, target) { | |
| let eyePos = p.createVector(this.pos.x + x, this.pos.y + y); | |
| let angle = p.atan2(target.y - eyePos.y, target.x - eyePos.x); | |
| let dist = p5.Vector.dist(target, eyePos); | |
| let pupilOffset = p.min(dist, size / 2 - (size / 1.8 / 2)); | |
| p.push(); | |
| p.translate(x, y); | |
| p.stroke(200, 10, 20, 80); | |
| p.strokeWeight(2); | |
| p.fill(200, 5, 100); | |
| p.ellipse(0, 0, size, size); | |
| p.rotate(angle); | |
| p.noStroke(); | |
| p.fill(0); | |
| p.ellipse(pupilOffset, 0, size / 1.8, size / 1.8); | |
| p.pop(); | |
| } | |
| } | |
| class Moon { | |
| constructor(centerX, centerY, radius) { | |
| this.center = p.createVector(centerX, centerY); | |
| this.radius = radius; | |
| this.size = p.min(p.width, p.height) * 0.08; | |
| this.orbitalAngle = 0; | |
| this.selfRotationAngle = 0; | |
| this.speed = 0.5; | |
| this.pos = p.createVector(); | |
| } | |
| update() { | |
| this.size = p.min(p.width, p.height) * 0.08; | |
| this.orbitalAngle += this.speed; | |
| this.selfRotationAngle += 4; | |
| this.pos.x = this.center.x + this.radius * p.cos(this.orbitalAngle); | |
| this.pos.y = this.center.y + this.radius * p.sin(this.orbitalAngle); | |
| } | |
| display() { | |
| p.noFill(); | |
| p.stroke(100, 0, 100, 10); | |
| p.strokeWeight(1); | |
| p.ellipse(this.center.x, this.center.y, this.radius * 2, this.radius * 2); | |
| p.push(); | |
| p.translate(this.pos.x, this.pos.y); | |
| if (rotationMode === 'locked') { | |
| let angleToEarth = p.atan2(this.center.y - this.pos.y, this.center.x - this.pos.x); | |
| p.rotate(angleToEarth); | |
| } else if (rotationMode === 'fast') { | |
| p.rotate(this.selfRotationAngle); | |
| } | |
| p.fill(0, 0, 50); | |
| p.noStroke(); | |
| p.arc(0, 0, this.size, this.size, 90, 270); | |
| p.fill(0, 0, 85); | |
| p.arc(0, 0, this.size, this.size, -90, 90); | |
| p.stroke(0, 100, 100); | |
| p.strokeWeight(3); | |
| p.line(0, -this.size * 0.5, 0, this.size * 0.5); | |
| p.pop(); | |
| } | |
| } | |
| }; | |
| new p5(sketch); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |