Recreating the Movements of the Planets

Recreating the movement of the planets with JS — Using Grok3 to write the JS code for the movement of the planets

Introduction

Recreating the movement of the planets using Grok AI & JavaScript.

In less than 1 minute I was able to get Grok3 AI to generate the code and HTML to recreate the movement of the planets. This did not require any complicated sentences or additional editing of the code by me. It worked straight out of the box. Using Grok3 or similar AI to help with code development can significantly increase the speed of development of almost any project.

Below is the text that I used to get Grok3 AI to generate working code..

create the html code and a javascript class using the latest in private functions that can display all of the planets and animate their movement around the sun. Add buttons to speed up or slow down the movement.

Why Programming with AI Matters

Programming with artificial intelligence is transforming how we approach complex problems and create innovative solutions. In the context of recreating planetary movements, AI assistance offers several key benefits:

Efficiency: AI can quickly generate accurate code structures, saving developers time.
Accuracy: AI helps implement correct mathematical formulas for orbital mechanics.
Education: The combination of AI and human insight creates teaching tools that make astronomy accessible.
Innovation: AI-powered simulations enable experimentation with scenarios beyond traditional programming limits.

By leveraging AI, we can create sophisticated visualizations that not only educate but also inspire curiosity about our universe, making complex scientific concepts tangible for everyone.

Understanding the Code

The demonstration below uses HTML5 Canvas and JavaScript to simulate our solar system. Here's how it works:

Structure: A SolarSystem class handles all functionality using modern JavaScript private methods (with # prefix).
Planets: Each planet is an object with properties like radius, distance, speed, and color.
Animation: Uses requestAnimationFrame for smooth orbital movement.
Controls: Buttons adjust the speed multiplier (0.1x to 3x) of planetary motion.
Labels: Planet names follow their positions in real-time.

Key code snippet showing the planet definition and animation:

#initializePlanets() {
    this.#planets = [
        { name: 'Mercury', radius: 5, distance: 50, baseSpeed: 0.04, ... },
        { name: 'Venus', radius: 8, distance: 80, baseSpeed: 0.03, ... },
        // ... other planets
    ];
}

#animate() {
    this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
    this.#drawSun();
    this.#planets.forEach(planet => this.#drawPlanet(planet));
    this.#animationFrameId = requestAnimationFrame(() => this.#animate());
}

Interactive Demo

Try the simulation below! Use the controls to speed up or slow down the planetary orbits.

Speed: 1x

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recreating the Movements of the Planets</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #000;
            color: #fff;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        h1 {
            text-align: center;
            color: #ffd700;
            margin-bottom: 30px;
        }
        article {
            max-width: 800px;
            margin: 0 auto 40px;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }
        h2 {
            color: #00b7eb;
        }
        pre {
            background: #1a1a1a;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
        #demoContainer {
            position: relative;
            width: 100%;
            height: 600px;
            margin-top: 40px;
        }
        #solarSystem {
            width: 100%;
            height: 100%;
        }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
        }
        button {
            margin: 0 5px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Recreating the Movements of the Planets</h1>
    <div id="demoContainer">
        <canvas id="solarSystem"></canvas>
        <div id="controls">
            <button id="slowDown">Slow Down</button>
            <button id="speedUp">Speed Up</button>
            <span id="speedDisplay">Speed: 1x</span>
        </div>
    </div>

constructor(canvasId) {
                this.#canvas = document.getElementById(canvasId);
                this.#ctx = this.#canvas.getContext('2d');
                this.#setupCanvas();
                this.#initializePlanets();
                this.#setupControls();
                this.#animate();
            }

#setupCanvas() {
                this.#canvas.width = document.getElementById('demoContainer').clientWidth;
                this.#canvas.height = 600;
            }

#initializePlanets() {
                this.#planets = [
                    { name: 'Mercury', radius: 5, distance: 50, baseSpeed: 0.04, speed: 0.04, color: '#8c8c8c', angle: 0 },
                    { name: 'Venus', radius: 8, distance: 80, baseSpeed: 0.03, speed: 0.03, color: '#ffd700', angle: 0 },
                    { name: 'Earth', radius: 10, distance: 110, baseSpeed: 0.02, speed: 0.02, color: '#00b7eb', angle: 0 },
                    { name: 'Mars', radius: 7, distance: 140, baseSpeed: 0.018, speed: 0.018, color: '#ff4500', angle: 0 },
                    { name: 'Jupiter', radius: 20, distance: 200, baseSpeed: 0.013, speed: 0.013, color: '#ffa500', angle: 0 },
                    { name: 'Saturn', radius: 17, distance: 260, baseSpeed: 0.009, speed: 0.009, color: '#deb887', angle: 0 },
                    { name: 'Uranus', radius: 14, distance: 310, baseSpeed: 0.006, speed: 0.006, color: '#87ceeb', angle: 0 },
                    { name: 'Neptune', radius: 13, distance: 350, baseSpeed: 0.005, speed: 0.005, color: '#4169e1', angle: 0 }
                ];
            }

#setupControls() {
                const slowDownBtn = document.getElementById('slowDown');
                const speedUpBtn = document.getElementById('speedUp');
                const speedDisplay = document.getElementById('speedDisplay');

slowDownBtn.addEventListener('click', () => {
                    this.#speedMultiplier = Math.max(0.1, this.#speedMultiplier - 0.1);
                    this.#updateSpeeds();
                    speedDisplay.textContent = `Speed: ${this.#speedMultiplier.toFixed(1)}x`;
                });

speedUpBtn.addEventListener('click', () => {
                    this.#speedMultiplier = Math.min(3, this.#speedMultiplier + 0.1);
                    this.#updateSpeeds();
                    speedDisplay.textContent = `Speed: ${this.#speedMultiplier.toFixed(1)}x`;
                });
            }

#updateSpeeds() {
                this.#planets.forEach(planet => {
                    planet.speed = planet.baseSpeed * this.#speedMultiplier;
                });
            }

#drawSun() {
                const centerX = this.#canvas.width / 2;
                const centerY = this.#canvas.height / 2;
                this.#ctx.beginPath();
                this.#ctx.arc(centerX, centerY, 30, 0, Math.PI * 2);
                this.#ctx.fillStyle = '#ffeb3b';
                this.#ctx.fill();
                this.#ctx.closePath();
                this.#ctx.fillStyle = 'white';
                this.#ctx.font = '12px Arial';
                this.#ctx.fillText('Sun', centerX - 10, centerY - 35);
            }

#drawPlanet(planet) {
                const centerX = this.#canvas.width / 2;
                const centerY = this.#canvas.height / 2;
                planet.angle += planet.speed;
                const x = centerX + Math.cos(planet.angle) * planet.distance;
                const y = centerY + Math.sin(planet.angle) * planet.distance;

this.#ctx.beginPath();
                this.#ctx.arc(centerX, centerY, planet.distance, 0, Math.PI * 2);
                this.#ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
                this.#ctx.stroke();
                this.#ctx.closePath();

this.#ctx.beginPath();
                this.#ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
                this.#ctx.fillStyle = planet.color;
                this.#ctx.fill();
                this.#ctx.closePath();

this.#ctx.fillStyle = 'white';
                this.#ctx.font = '10px Arial';
                this.#ctx.fillText(planet.name, x - planet.radius, y - planet.radius - 5);
            }

#animate() {
                this.#ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
                this.#drawSun();
                this.#planets.forEach(planet => this.#drawPlanet(planet));
                this.#animationFrameId = requestAnimationFrame(() => this.#animate());
            }
        }

new SolarSystem('solarSystem');
    </script>
</body>
</html>