{"id":103850,"date":"2025-03-30T18:12:39","date_gmt":"2025-03-30T13:42:39","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/have-a-view-to-solar-system-with-the-html-css-and-javascript-coding-illusion-3af0\/"},"modified":"2025-03-30T18:12:39","modified_gmt":"2025-03-30T13:42:39","slug":"have-a-view-to-solar-system-with-the-html-css-and-javascript-coding-illusion-3af0","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/have-a-view-to-solar-system-with-the-html-css-and-javascript-coding-illusion-3af0\/","title":{"rendered":"\u0628\u0627 \u062a\u0648\u0647\u0645 HTML CSS \u0648 JavaScript \u06a9\u062f\u06af\u0630\u0627\u0631\u06cc \u060c \u0628\u0647 \u0645\u0646\u0638\u0648\u0645\u0647 \u0634\u0645\u0633\u06cc \u0645\u0646\u0638\u0631\u0647 \u0627\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f."},"content":{"rendered":"<div>\n<pre class=\"highlight plaintext\"><code>\n\n\n    <meta charset=\"UTF-8\"\/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n    <title>3D Solar System<\/title>\n    \n\n\n    <canvas id=\"canvas\"\/>\n    <p>@prince_codes1<\/p>\n    \n    <!-- <div class=\"interact-hint\">Tap to interact<\/div> -->\n\n    <script><![CDATA[\n        const canvas = document.getElementById('canvas');\n        const ctx = canvas.getContext('2d');\n        const planetNameElement = document.getElementById('planetName');\n\n        canvas.width = window.innerWidth;\n        canvas.height = window.innerHeight;\n\n        \/\/ Solar system configuration\n        const planets = [\n            { name: \"Sun\", radius: 35, color: \"#FDB813\", distance: 0, speed: 0, moons: [], glowColor: \"rgba(253, 184, 19, 0.25)\", glowSize: 30, orbitColor: \"transparent\" },\n            { name: \"Mercury\", radius: 5, color: \"#A57744\", distance: 60, speed: 0.01, moons: [], glowColor: \"rgba(165, 119, 68, 0.15)\", glowSize: 2, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Venus\", radius: 8, color: \"#E8B658\", distance: 85, speed: 0.007, moons: [], glowColor: \"rgba(232, 182, 88, 0.15)\", glowSize: 3, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Earth\", radius: 9, color: \"#267EAA\", distance: 115, speed: 0.005, moons: [{ radius: 2, distance: 15, speed: 0.025, color: \"#AAAAAA\" }], glowColor: \"rgba(38, 126, 170, 0.15)\", glowSize: 3, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Mars\", radius: 7, color: \"#C1440E\", distance: 145, speed: 0.004, moons: [{ radius: 1, distance: 12, speed: 0.02, color: \"#BBBBBB\" }], glowColor: \"rgba(193, 68, 14, 0.15)\", glowSize: 3, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Jupiter\", radius: 20, color: \"#C88B3A\", distance: 190, speed: 0.002, moons: [{ radius: 2, distance: 25, speed: 0.01, color: \"#DDDDDD\" }, { radius: 3, distance: 35, speed: 0.008, color: \"#CCCCCC\" }], glowColor: \"rgba(200, 139, 58, 0.15)\", glowSize: 8, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Saturn\", radius: 18, color: \"#E4BB7A\", distance: 250, speed: 0.0015, rings: { innerRadius: 22, outerRadius: 30, color: \"rgba(228, 187, 122, 0.7)\" }, moons: [{ radius: 3, distance: 35, speed: 0.007, color: \"#DDDDDD\" }], glowColor: \"rgba(228, 187, 122, 0.15)\", glowSize: 7, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Uranus\", radius: 14, color: \"#93B8BE\", distance: 300, speed: 0.001, moons: [{ radius: 2, distance: 20, speed: 0.006, color: \"#DDDDDD\" }], glowColor: \"rgba(147, 184, 190, 0.15)\", glowSize: 5, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n            { name: \"Neptune\", radius: 14, color: \"#3E66A3\", distance: 340, speed: 0.0008, moons: [{ radius: 2, distance: 22, speed: 0.005, color: \"#DDDDDD\" }], glowColor: \"rgba(62, 102, 163, 0.15)\", glowSize: 5, orbitColor: \"rgba(255, 255, 255, 0.1)\" },\n        ];\n\n        \/\/ Visual settings\n        let zoom = 1;\n        let targetZoom = 1;\n        let centerX = canvas.width \/ 2;\n        let centerY = canvas.height \/ 2;\n        let angle = 0;\n        let viewTilt = Math.PI \/ 8;\n        let activePlanet = null;\n        let stars = [];\n\n        \/\/ Create stars\n        function createStars() {\n            for (let i = 0; i < 400; i++) {\n                stars.push({\n                    x: Math.random() * canvas.width,\n                    y: Math.random() * canvas.height,\n                    size: Math.random() * 1.5,\n                    opacity: Math.random() * 0.8 + 0.2\n                });\n            }\n        }\n        createStars();\n\n        \/\/ Calculate positions with tilt\n        function calculatePosition(distance, angle) {\n            return {\n                x: Math.cos(angle) * distance,\n                y: Math.sin(angle) * distance * Math.sin(viewTilt)\n            };\n        }\n\n        \/\/ Draw a planet with optional 3D effect and glow\n        function drawPlanet(x, y, radius, color, glowColor, glowSize, drawDetails = false) {\n            \/\/ Glow effect\n            const glow = ctx.createRadialGradient(x, y, radius, x, y, radius + glowSize);\n            glow.addColorStop(0, glowColor);\n            glow.addColorStop(1, 'rgba(0, 0, 0, 0)');\n            ctx.fillStyle = glow;\n            ctx.beginPath();\n            ctx.arc(x, y, radius + glowSize, 0, Math.PI * 2);\n            ctx.fill();\n\n            \/\/ Planet base\n            ctx.fillStyle = color;\n            ctx.beginPath();\n            ctx.arc(x, y, radius, 0, Math.PI * 2);\n            ctx.fill();\n\n            \/\/ 3D lighting effect\n            if (drawDetails) {\n                const gradient = ctx.createLinearGradient(x - radius, y - radius, x + radius * 0.5, y + radius * 0.5);\n                gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');\n                gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)');\n                gradient.addColorStop(1, 'rgba(0, 0, 0, 0.5)');\n                ctx.fillStyle = gradient;\n                ctx.beginPath();\n                ctx.arc(x, y, radius, 0, Math.PI * 2);\n                ctx.fill();\n            }\n        }\n\n        \/\/ Draw Saturn's rings\n        function drawRings(x, y, innerRadius, outerRadius, color) {\n            ctx.fillStyle = color;\n            ctx.beginPath();\n            ctx.ellipse(x, y, outerRadius, outerRadius * Math.sin(viewTilt), 0, 0, Math.PI * 2);\n            ctx.fill();\n\n            ctx.fillStyle = \"#0a0a1a\";\n            ctx.beginPath();\n            ctx.ellipse(x, y, innerRadius, innerRadius * Math.sin(viewTilt), 0, 0, Math.PI * 2);\n            ctx.fill();\n        }\n\n        \/\/ Draw orbit\n        function drawOrbit(distance, color) {\n            ctx.strokeStyle = color;\n            ctx.lineWidth = 1;\n            ctx.beginPath();\n            ctx.ellipse(centerX, centerY, distance * zoom, distance * zoom * Math.sin(viewTilt), 0, 0, Math.PI * 2);\n            ctx.stroke();\n        }\n\n        \/\/ Detect which planet was clicked\n        function getPlanetAtPosition(x, y) {\n            for (let i = planets.length - 1; i >= 0; i--) {\n                const planet = planets[i];\n                const pos = calculatePosition(planet.distance, angle + i * planet.speed);\n                const planetX = centerX + pos.x * zoom;\n                const planetY = centerY + pos.y * zoom;\n\n                const dx = x - planetX;\n                const dy = y - planetY;\n                const distance = Math.sqrt(dx * dx + dy * dy);\n\n                if (distance < planet.radius * zoom * 1.5) {\n                    return planet;\n                }\n            }\n            return null;\n        }\n\n        \/\/ Handle clicks\/taps\n        canvas.addEventListener('click', (event) => {\n            const rect = canvas.getBoundingClientRect();\n            const x = event.clientX - rect.left;\n            const y = event.clientY - rect.top;\n\n            const clickedPlanet = getPlanetAtPosition(x, y);\n\n            if (clickedPlanet) {\n                activePlanet = clickedPlanet;\n                targetZoom = clickedPlanet.name === \"Sun\" ? 1 : 2.5;\n\n                \/\/ Show planet name\n                planetNameElement.textContent = clickedPlanet.name;\n                planetNameElement.style.opacity = 1;\n\n                \/\/ Hide after 2 seconds\n                setTimeout(() => {\n                    planetNameElement.style.opacity = 0;\n                }, 2000);\n            } else {\n                \/\/ Reset view\n                activePlanet = null;\n                targetZoom = 1;\n            }\n        });\n\n        \/\/ Animation loop\n        function animate() {\n            \/\/ Clear canvas\n            ctx.fillStyle=\"#0a0a1a\";\n            ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n            \/\/ Draw stars\n            stars.forEach(star => {\n                ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;\n                ctx.beginPath();\n                ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);\n                ctx.fill();\n            });\n\n            \/\/ Animate zoom\n            zoom += (targetZoom - zoom) * 0.05;\n\n            \/\/ Draw orbits\n            planets.forEach(planet => {\n                if (planet.distance > 0) {\n                    drawOrbit(planet.distance, planet.orbitColor);\n                }\n            });\n\n            \/\/ Draw planets\n            planets.forEach((planet, i) => {\n                const pos = calculatePosition(planet.distance, angle + i * planet.speed);\n                const planetX = centerX + pos.x * zoom;\n                const planetY = centerY + pos.y * zoom;\n\n                \/\/ Draw planet\n                const isActive = activePlanet === planet;\n                drawPlanet(\n                    planetX, \n                    planetY, \n                    planet.radius * zoom, \n                    planet.color, \n                    planet.glowColor, \n                    planet.glowSize * zoom,\n                    isActive\n                );\n\n                \/\/ Draw rings for Saturn\n                if (planet.rings) {\n                    drawRings(\n                        planetX, \n                        planetY, \n                        planet.rings.innerRadius * zoom, \n                        planet.rings.outerRadius * zoom, \n                        planet.rings.color\n                    );\n                }\n\n                \/\/ Draw moons\n                planet.moons.forEach(moon => {\n                    const moonAngle = angle * moon.speed * 5;\n                    const moonPos = {\n                        x: planetX + Math.cos(moonAngle) * moon.distance * zoom,\n                        y: planetY + Math.sin(moonAngle) * moon.distance * zoom * Math.sin(viewTilt)\n                    };\n\n                    drawPlanet(\n                        moonPos.x, \n                        moonPos.y, \n                        moon.radius * zoom, \n                        moon.color,\n                        'rgba(255, 255, 255, 0.1)',\n                        moon.radius * zoom\n                    );\n                });\n            });\n\n            \/\/ Update angle for next frame\n            angle += 0.002;\n\n            requestAnimationFrame(animate);\n        }\n\n        \/\/ Start animation\n        animate();\n\n        \/\/ Handle window resize\n        window.addEventListener('resize', () => {\n            canvas.width = window.innerWidth;\n            canvas.height = window.innerHeight;\n            centerX = canvas.width \/ 2;\n            centerY = canvas.height \/ 2;\n\n            \/\/ Recalculate star positions\n            stars = [];\n            createStars();\n        });\n\n        \/\/ Auto-cycle through planets (great for automatic reel recording)\n        let planetIndex = 0;\n        setInterval(() => {\n            if (!activePlanet) {\n                activePlanet = planets[planetIndex];\n                targetZoom = activePlanet.name === \"Sun\" ? 1 : 2.5;\n\n                planetNameElement.textContent = activePlanet.name;\n                planetNameElement.style.opacity = 1;\n\n                setTimeout(() => {\n                    planetNameElement.style.opacity = 0;\n                }, 2000);\n\n                planetIndex = (planetIndex + 1) % planets.length;\n            }\n        }, 3000);\n    ]]><\/script>\n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>3D Solar System @prince_codes1 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n","protected":false},"author":2,"featured_media":103851,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-103850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/103850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=103850"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/103850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/103851"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=103850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=103850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=103850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}