fadding ball | deepseek

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>Helix Ball Animation</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: black;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Ball properties
    const ball = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      diameter: 20,
      tailLength: 100, // Tail length is 5 times the diameter (20 * 5 = 100)
      tail: [],
    };

    // Function to move the ball in a helical pattern
    function moveBall() {
      const angle = Math.random() * 2 * Math.PI; // Random angle
      ball.x += Math.cos(angle) * 2; // Move in x-direction
      ball.y += Math.sin(angle) * 2 + Math.sin(Date.now() / 200) * 5; // Helical y-movement

      // Add current position to the tail
      ball.tail.push({ x: ball.x, y: ball.y });

      // Remove the oldest position if tail exceeds length
      if (ball.tail.length > ball.tailLength) {
        ball.tail.shift();
      }
    }

    // Function to draw the ball and its tail
    function drawBall() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw the tail
      for (let i = 0; i < ball.tail.length; i++) {
        const alpha = (i / ball.tail.length); // Fade effect
        ctx.beginPath();
        ctx.arc(ball.tail[i].x, ball.tail[i].y, ball.diameter / 2, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
        ctx.fill();
      }

      // Draw the ball
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.diameter / 2, 0, Math.PI * 2);
      ctx.fillStyle = 'white';
      ctx.fill();
    }

    // Animation loop
   ...