$ JS_Moving_Gradient.py

<html>
<head>
    <title>Moving Gradient</title>
</head>
<body>
    <canvas id="stage" width="800" height="600" style="background-color: #faFF59;"></canvas>

    <script>
        const COLORS = [
        "(45, 74, 227)", // blue
        "(250, 255, 89)", // yellow
        "(255, 104, 248)", // purple
        "(44, 209, 252)", // skyblue
        "(54, 233, 84)", // green
        ];

        const stage = document.getElementById("stage");
        const ctx = stage.getContext("2d");
        const stageWidth = stage.width;
        const stageHeight = stage.height;

        let totalParticles = 200;
        let particles = [];
        let maxRadius = 80;
        let minRadius = 10;
        let curColor = 0;

        function createParticles() {
            // Use the global keyword to access the global variable particles
            const item = {
                x: Math.floor(Math.random() * stageWidth) + 1,
                y: Math.floor(Math.random() * stageHeight) + 1,
                radius: minRadius + Math.random() * (maxRadius - minRadius),
                color: COLORS[curColor],
                vx: Math.random() * Math.random() * Math.random() > 0.5 ? -4 : 4,
                vy: Math.random() * Math.random() * Math.random() > 0.5 ? -4 : 4,
                sinValue: Math.random()
            };
            curColor = (curColor + 1) % COLORS.length;
            particles.push(item);
        }

        for (let i = 0; i < totalParticles; i++) {
            createParticles();
        }

        function drawParticles() {
          // Loop through each particle and draw it on the canvas
          for (let i = 0; i < particles.length; i++) {
            const particle = particles[i];

            // Set the fill style to the particle color
            ctx.fillStyle = particle.color;

            // Draw a circle at the particle's position
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI, false);
            ctx.fill();
          }
        }

        function animate() {
            // Clear the canvas
            ctx.clearRect(0, 0, stageWidth, stageHeight);

            // Loop through each particle and update its position
            for (let i = 0; i < particles.length; i++) {
                const particle = particles[i];

                // Update the sin value and radius of the particle
                particle.sinValue += 0.01;
                particle.radius += Math.sin(particle.sinValue);

                // Update the position of the particle
                particle.x += particle.vx;
                particle.y += particle.vy;

                // Check if the particle has reached the edge of the screen
                if (particle.x < 0 || particle.x > stageWidth) {
                    // Reverse the horizontal velocity of the particle
                    particle.vx = -particle.vx;

                    // Update the position of the particle to keep it within the screen
                    particle.x = Math.max(0, Math.min(particle.x, stageWidth));
                }
                if (particle.y < 0 || particle.y > stageHeight) {
                    // Reverse the vertical velocity of the particle
                    particle.vy = -particle.vy;

                    // Update the position of the particle to keep it within the screen
                    particle.y = Math.max(0, Math.min(particle.y, stageHeight));
                }
            }

            // Draw the particles on the canvas
            drawParticles();

            // Call the animate function again on the next frame
            requestAnimationFrame(animate);
        }

        // Start the animation loop
        animate();