trysem
/

rahuketu

Model card Files Files and versions

xet

Community

trysem commited on 13 days ago

Commit

6e7ef5a

verified ·

1 Parent(s): 2cbec31

Create rahuketu

Browse files

Files changed (1) hide show

rahuketu +427 -0

rahuketu ADDED Viewed

	@@ -0,0 +1,427 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rahu & Ketu: The Lunar Nodes</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <style>
+        body { margin: 0; overflow: hidden; background-color: #030308; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; }
+        #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
+        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
+        .pointer-events-auto { pointer-events: auto; }
+        /* Glassmorphism panel */
+        .glass-panel {
+            background: rgba(15, 20, 35, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+        }
+        /* Custom Scrollbar for text panel */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
+        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
+        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
+        input[type=range] {
+            -webkit-appearance: none; background: transparent;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
+            background: #4ade80; cursor: pointer; margin-top: -6px;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%; height: 4px; cursor: pointer; background: rgba(255,255,255,0.2); border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 3D Canvas -->
+    <div id="canvas-container"></div>
+    <!-- UI Overlay -->
+    <div id="ui-layer" class="flex flex-col md:flex-row justify-between p-4 md:p-6 h-screen relative">
+        <!-- Left Info Panel -->
+        <div class="glass-panel w-full md:w-96 rounded-2xl p-6 flex flex-col pointer-events-auto h-auto max-h-[45vh] md:max-h-full overflow-y-auto mb-4 md:mb-0">
+            <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-yellow-200 mb-2">Rahu & Ketu</h1>
+            <h2 class="text-sm text-gray-300 uppercase tracking-widest mb-6 border-b border-gray-600 pb-2">The Lunar Nodes</h2>
+            <div class="space-y-4 text-sm leading-relaxed text-gray-200">
+                <p>
+                    <strong class="text-white text-base">What are they?</strong><br>
+                    In astronomy, Rahu and Ketu are not physical planets. They are mathematical intersection points known as the <strong>Lunar Nodes</strong>.
+                </p>
+                <p>
+                    The Earth orbits the Sun on a flat plane called the <em>Ecliptic</em>. However, the Moon's orbit around the Earth is tilted by about 5 degrees relative to this plane.
+                </p>
+                <p>
+                    Because of this tilt, the Moon's orbit crosses the Earth's Ecliptic plane at exactly two points.
+                </p>
+                <div class="bg-orange-500/10 border border-orange-500/30 p-3 rounded-lg mt-2">
+                    <h3 class="text-orange-400 font-bold mb-1">Rahu (North Node) ☊</h3>
+                    <p class="text-xs">The <em>Ascending Node</em>. This is the exact point where the Moon crosses the ecliptic going from South to North.</p>
+                </div>
+                <div class="bg-gray-500/10 border border-gray-500/30 p-3 rounded-lg mt-2">
+                    <h3 class="text-gray-300 font-bold mb-1">Ketu (South Node) ☋</h3>
+                    <p class="text-xs">The <em>Descending Node</em>. This is the exact point where the Moon crosses the ecliptic going from North to South.</p>
+                </div>
+                <p class="mt-4 border-t border-gray-600 pt-4">
+                    <strong class="text-yellow-300">Eclipses:</strong> A Solar or Lunar eclipse can <em>only</em> happen when the New Moon or Full Moon aligns closely with either Rahu or Ketu. In ancient mythology, these nodes were personified as shadow demons that "swallowed" the Sun and Moon.
+                </p>
+            </div>
+        </div>
+        <!-- Right / Bottom Controls -->
+        <div class="flex flex-col justify-end pointer-events-auto w-full md:w-auto">
+            <div class="glass-panel rounded-2xl p-5 w-full md:w-80 space-y-5">
+                <div class="flex items-center justify-between mb-2">
+                    <h3 class="font-semibold text-white">Controls</h3>
+                    <button id="btn-pause" class="bg-white/10 hover:bg-white/20 text-white px-3 py-1 rounded text-sm transition">Pause</button>
+                </div>
+                <!-- Time Speed -->
+                <div>
+                    <label class="flex justify-between text-xs text-gray-400 mb-2">
+                        <span>Time Speed</span>
+                        <span id="speed-val">1x</span>
+                    </label>
+                    <input type="range" id="time-speed" min="0" max="5" step="0.1" value="1" class="w-full">
+                </div>
+                <!-- Camera Focus -->
+                <div>
+                    <label class="block text-xs text-gray-400 mb-2">Camera Focus</label>
+                    <div class="flex bg-black/40 rounded-lg p-1">
+                        <button id="focus-sun" class="flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white">Sun</button>
+                        <button id="focus-earth" class="flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50">Earth</button>
+                    </div>
+                </div>
+                <!-- Visibility Toggles -->
+                <div class="pt-2 border-t border-gray-700/50 space-y-2">
+                    <label class="flex items-center space-x-2 text-sm cursor-pointer">
+                        <input type="checkbox" id="toggle-ecliptic" checked class="rounded bg-gray-800 border-gray-600 text-blue-500 focus:ring-blue-500">
+                        <span class="text-gray-300">Show Earth's Plane (Ecliptic)</span>
+                    </label>
+                    <label class="flex items-center space-x-2 text-sm cursor-pointer">
+                        <input type="checkbox" id="toggle-lunar" checked class="rounded bg-gray-800 border-gray-600 text-blue-500 focus:ring-blue-500">
+                        <span class="text-gray-300">Show Moon's Tilted Plane</span>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // --- THREE.JS SETUP ---
+        const canvasContainer = document.getElementById('canvas-container');
+        const scene = new THREE.Scene();
+        // Camera setup
+        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
+        camera.position.set(0, 80, 150);
+        // Renderer setup
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        canvasContainer.appendChild(renderer.domElement);
+        // OrbitControls
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        controls.maxDistance = 600;
+        controls.minDistance = 20;
+        // --- ENVIRONMENT ---
+        // Starfield
+        const starsGeometry = new THREE.BufferGeometry();
+        const starsCount = 3000;
+        const posArray = new Float32Array(starsCount * 3);
+        for(let i = 0; i < starsCount * 3; i++) {
+            posArray[i] = (Math.random() - 0.5) * 1500;
+        }
+        starsGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+        const starsMaterial = new THREE.PointsMaterial({ size: 1.5, color: 0xffffff, transparent: true, opacity: 0.8 });
+        const starMesh = new THREE.Points(starsGeometry, starsMaterial);
+        scene.add(starMesh);
+        // Ambient Light
+        scene.add(new THREE.AmbientLight(0x333344));
+        // --- CELESTIAL BODIES ---
+        // 1. SUN
+        const sunGeo = new THREE.SphereGeometry(15, 32, 32);
+        const sunMat = new THREE.MeshBasicMaterial({ color: 0xffaa00 });
+        const sun = new THREE.Mesh(sunGeo, sunMat);
+        scene.add(sun);
+        // Sun Light
+        const sunLight = new THREE.PointLight(0xffffff, 2.5, 1000);
+        scene.add(sunLight);
+        // Sun Glow (Sprite)
+        const glowCanvas = document.createElement('canvas');
+        glowCanvas.width = 128; glowCanvas.height = 128;
+        const ctx = glowCanvas.getContext('2d');
+        const gradient = ctx.createRadialGradient(64,64,0, 64,64,64);
+        gradient.addColorStop(0, 'rgba(255, 170, 0, 0.6)');
+        gradient.addColorStop(1, 'rgba(255, 170, 0, 0)');
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0,0, 128,128);
+        const glowTexture = new THREE.CanvasTexture(glowCanvas);
+        const glowMaterial = new THREE.SpriteMaterial({ map: glowTexture, blending: THREE.AdditiveBlending, transparent: true });
+        const sunGlow = new THREE.Sprite(glowMaterial);
+        sunGlow.scale.set(60, 60, 1);
+        sun.add(sunGlow);
+        // 2. EARTH SYSTEM
+        const earthOrbitRadius = 120;
+        const earthSystem = new THREE.Group();
+        scene.add(earthSystem);
+        // Earth Orbit Line
+        const earthOrbitGeo = new THREE.RingGeometry(earthOrbitRadius - 0.2, earthOrbitRadius + 0.2, 128);
+        const earthOrbitMat = new THREE.MeshBasicMaterial({ color: 0x445566, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
+        const earthOrbitLine = new THREE.Mesh(earthOrbitGeo, earthOrbitMat);
+        earthOrbitLine.rotation.x = Math.PI / 2;
+        scene.add(earthOrbitLine);
+        // Earth Mesh
+        const earthGeo = new THREE.SphereGeometry(4, 32, 32);
+        const earthMat = new THREE.MeshStandardMaterial({ color: 0x2288ff, roughness: 0.6 });
+        const earth = new THREE.Mesh(earthGeo, earthMat);
+        earthSystem.add(earth);
+        // Ecliptic Plane (Local to Earth)
+        const eclipticGeo = new THREE.PlaneGeometry(60, 60);
+        const eclipticMat = new THREE.MeshBasicMaterial({ color: 0x22ff44, transparent: true, opacity: 0.1, side: THREE.DoubleSide });
+        const eclipticPlane = new THREE.Mesh(eclipticGeo, eclipticMat);
+        eclipticPlane.rotation.x = Math.PI / 2;
+        earthSystem.add(eclipticPlane);
+        // Ecliptic Grid Helper to make it clearer
+        const eclipticGrid = new THREE.GridHelper(60, 10, 0x22ff44, 0x22ff44);
+        eclipticGrid.material.opacity = 0.2;
+        eclipticGrid.material.transparent = true;
+        earthSystem.add(eclipticGrid);
+        // 3. MOON SYSTEM
+        const moonOrbitRadius = 22;
+        const moonSystem = new THREE.Group();
+        // TILT THE LUNAR ORBIT (Exaggerated to 15 degrees for visual clarity, real is ~5 degrees)
+        const lunarTilt = 15 * (Math.PI / 180);
+        moonSystem.rotation.x = lunarTilt;
+        earthSystem.add(moonSystem);
+        // Moon Plane
+        const lunarPlaneGeo = new THREE.PlaneGeometry(50, 50);
+        const lunarPlaneMat = new THREE.MeshBasicMaterial({ color: 0x44aaff, transparent: true, opacity: 0.15, side: THREE.DoubleSide });
+        const lunarPlane = new THREE.Mesh(lunarPlaneGeo, lunarPlaneMat);
+        lunarPlane.rotation.x = Math.PI / 2;
+        moonSystem.add(lunarPlane);
+        // Moon Orbit Line
+        const moonOrbitLineGeo = new THREE.RingGeometry(moonOrbitRadius - 0.2, moonOrbitRadius + 0.2, 64);
+        const moonOrbitLineMat = new THREE.MeshBasicMaterial({ color: 0xaaaaff, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
+        const moonOrbitLine = new THREE.Mesh(moonOrbitLineGeo, moonOrbitLineMat);
+        moonOrbitLine.rotation.x = Math.PI / 2;
+        moonSystem.add(moonOrbitLine);
+        // Moon Mesh
+        const moonGeo = new THREE.SphereGeometry(1.2, 16, 16);
+        const moonMat = new THREE.MeshStandardMaterial({ color: 0xdddddd, roughness: 0.8 });
+        const moon = new THREE.Mesh(moonGeo, moonMat);
+        moonSystem.add(moon);
+        // --- RAHU & KETU NODES ---
+        // Create Sprite Text Labels
+        function createTextLabel(text, color) {
+            const canvas = document.createElement('canvas');
+            canvas.width = 512; canvas.height = 128;
+            const ctx = canvas.getContext('2d');
+            ctx.fillStyle = color;
+            ctx.font = 'bold 36px sans-serif';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            // Background capsule
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
+            ctx.beginPath();
+            ctx.roundRect(64, 20, 384, 88, 44);
+            ctx.fill();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 3;
+            ctx.stroke();
+            // Text
+            ctx.fillStyle = color;
+            ctx.fillText(text, 256, 64);
+            const texture = new THREE.CanvasTexture(canvas);
+            const material = new THREE.SpriteMaterial({ map: texture, depthTest: false });
+            const sprite = new THREE.Sprite(material);
+            sprite.scale.set(16, 4, 1);
+            return sprite;
+        }
+        function createNodeMarker(color) {
+            const geo = new THREE.SphereGeometry(1.5, 16, 16);
+            const mat = new THREE.MeshBasicMaterial({ color: color });
+            return new THREE.Mesh(geo, mat);
+        }
+        // The intersection of the tilted Moon system with the Ecliptic (Earth's XZ plane) happens along the local X-axis.
+        // Because we rotated the moonSystem around X, the X-axis remains unchanged and perfectly lies on the Ecliptic.
+        // Rahu (Ascending Node) - Going South to North. Due to rotation rules, this occurs at -X.
+        const rahuLabel = createTextLabel("Rahu ☊", "#ff8800");
+        rahuLabel.position.set(-moonOrbitRadius, 5, 0);
+        const rahuMarker = createNodeMarker(0xff8800);
+        rahuMarker.position.set(-moonOrbitRadius, 0, 0);
+        moonSystem.add(rahuLabel);
+        moonSystem.add(rahuMarker);
+        // Ketu (Descending Node) - Going North to South. This occurs at +X.
+        const ketuLabel = createTextLabel("Ketu ☋", "#a0a0a0");
+        ketuLabel.position.set(moonOrbitRadius, 5, 0);
+        const ketuMarker = createNodeMarker(0xa0a0a0);
+        ketuMarker.position.set(moonOrbitRadius, 0, 0);
+        moonSystem.add(ketuLabel);
+        moonSystem.add(ketuMarker);
+        // Line of Nodes
+        const lineOfNodesGeo = new THREE.BufferGeometry().setFromPoints([
+            new THREE.Vector3(-moonOrbitRadius - 5, 0, 0),
+            new THREE.Vector3(moonOrbitRadius + 5, 0, 0)
+        ]);
+        const lineOfNodesMat = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.7 });
+        const lineOfNodes = new THREE.Line(lineOfNodesGeo, lineOfNodesMat);
+        moonSystem.add(lineOfNodes);
+        // --- ANIMATION LOGIC ---
+        let time = 0;
+        let isPaused = false;
+        let speedMultiplier = 1;
+        let cameraFocus = 'earth'; // 'earth' or 'sun'
+        // Set initial camera to Earth
+        camera.position.set(earthOrbitRadius, 40, 60);
+        function animate() {
+            requestAnimationFrame(animate);
+            if (!isPaused) {
+                time += 0.005 * speedMultiplier;
+                // Earth revolution around Sun
+                earthSystem.position.x = Math.cos(time) * earthOrbitRadius;
+                earthSystem.position.z = Math.sin(time) * earthOrbitRadius;
+                // Earth rotation
+                earth.rotation.y += 0.05 * speedMultiplier;
+                // Moon revolution around Earth (faster than earth)
+                // Inside moonSystem, rotation around Y moves it along the tilted orbit!
+                const moonSpeed = time * 13.3; // Moon revolves ~13.3 times a year
+                moon.position.x = Math.cos(moonSpeed) * moonOrbitRadius;
+                moon.position.z = Math.sin(moonSpeed) * moonOrbitRadius;
+                moon.rotation.y += 0.02 * speedMultiplier;
+                // Make text sprites always face camera
+                rahuLabel.material.rotation = 0;
+                ketuLabel.material.rotation = 0;
+            }
+            // Camera Tracking
+            if (cameraFocus === 'earth') {
+                controls.target.copy(earthSystem.position);
+            } else {
+                controls.target.set(0, 0, 0);
+            }
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        // --- UI INTERACTIONS ---
+        // Pause Button
+        const btnPause = document.getElementById('btn-pause');
+        btnPause.addEventListener('click', () => {
+            isPaused = !isPaused;
+            btnPause.innerText = isPaused ? "Play" : "Pause";
+            btnPause.className = isPaused
+                ? "bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm transition"
+                : "bg-white/10 hover:bg-white/20 text-white px-3 py-1 rounded text-sm transition";
+        });
+        // Speed Slider
+        const speedSlider = document.getElementById('time-speed');
+        const speedVal = document.getElementById('speed-val');
+        speedSlider.addEventListener('input', (e) => {
+            speedMultiplier = parseFloat(e.target.value);
+            speedVal.innerText = speedMultiplier.toFixed(1) + "x";
+        });
+        // Camera Focus Toggles
+        const btnFocusSun = document.getElementById('focus-sun');
+        const btnFocusEarth = document.getElementById('focus-earth');
+        btnFocusSun.addEventListener('click', () => {
+            cameraFocus = 'sun';
+            btnFocusSun.className = "flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50";
+            btnFocusEarth.className = "flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white border border-transparent";
+            // Move camera to see whole system
+            const targetPos = new THREE.Vector3(0, 200, 300);
+            camera.position.lerp(targetPos, 1);
+        });
+        btnFocusEarth.addEventListener('click', () => {
+            cameraFocus = 'earth';
+            btnFocusEarth.className = "flex-1 py-1.5 text-sm rounded-md transition bg-blue-500/30 text-blue-200 border border-blue-500/50";
+            btnFocusSun.className = "flex-1 py-1.5 text-sm rounded-md transition text-gray-400 hover:text-white border border-transparent";
+            // Move camera closer to earth
+            camera.position.set(earthSystem.position.x, earthSystem.position.y + 40, earthSystem.position.z + 60);
+        });
+        // Visibility Toggles
+        document.getElementById('toggle-ecliptic').addEventListener('change', (e) => {
+            eclipticPlane.visible = e.target.checked;
+            eclipticGrid.visible = e.target.checked;
+        });
+        document.getElementById('toggle-lunar').addEventListener('change', (e) => {
+            lunarPlane.visible = e.target.checked;
+        });
+        // Handle Window Resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // Start animation loop
+        animate();
+    </script>
+</body>
+</html>