directory : /web/canvas/chat-gpt/ : fractal-tree.html

Directory path . web , canvas , chat-gpt .
HTML Document File : fractal-tree.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fractal Tree</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="fractalCanvas"></canvas>
  <script>
    const canvas = document.getElementById('fractalCanvas');
    const ctx = canvas.getContext('2d');

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

    // Function to draw the fractal tree
    function drawTree(x, y, length, angle, branchWidth, color1, color2) {
      ctx.beginPath();
      ctx.save();
      ctx.strokeStyle = color1;
      ctx.fillStyle = color2;
      ctx.lineWidth = branchWidth;

      // Draw the branch
      ctx.translate(x, y);
      ctx.rotate(angle * Math.PI / 180);
      ctx.moveTo(0, 0);
      ctx.lineTo(0, -length);
      ctx.stroke();

      // Recursive call for branches
      if (length < 10) {
        ctx.restore();
        return;
      }

      drawTree(0, -length, length * 0.7, angle + 15, branchWidth * 0.7, color1, color2);
      drawTree(0, -length, length * 0.7, angle - 15, branchWidth * 0.7, color1, color2);

      ctx.restore();
    }

    // Initial tree parameters
    function drawFractal() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawTree(canvas.width / 2, canvas.height - 100, 120, 0, 10, 'brown', 'green');
    }

    drawFractal();

    // Adjust canvas size on window resize
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      drawFractal();
    });
  </script>
</body>
</html>