Fadding ball | gpt

by sosegon

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Helical Ball with Tail Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: black;
            margin: 0;
        }
        canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // Set canvas size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Ball properties
        const ball = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: 10,
            tailLength: 5, // Multiplier for the tail length
            angle: 0,
            speed: 2,
            frequency: 0.1,
            amplitude: 30,
            trail: []
        };

        function drawBall(x, y, opacity, sizeFactor) {
            ctx.beginPath();
            ctx.arc(x, y, ball.radius * sizeFactor, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
            ctx.fill();
        }

        function update() {
            ball.angle += ball.speed * 0.02;
            
            // Helical movement with slight randomness
            let newX = canvas.width / 2 + Math.cos(ball.angle) * ball.amplitude + (Math.random() - 0.5) * 5;
            let newY = canvas.height / 2 + Math.sin(ball.angle * 2) * ball.amplitude + ball.angle * 2;

            // Store previous positions for tail effect
            ball.trail.push({ x: newX, y: newY });
            if (ball.trail.length > ball.tailLength * ball.radius) {
                ball.trail.shift(); // Keep the tail length fixed
            }

            ball.x = newX;
 ...