`data/artifacts/10c3c876aa67/gemma3-12b.html`

117 lines
<!DOCTYPE html>
<html>
<head>
  <title>Recursive Fractal Tree</title>
  <style>
    body { margin: 0; overflow: hidden; background-color: #ADD8E6; } /* Light blue background */
    canvas { display: block; }
  </style>
</head>
<body>

  <canvas id="treeCanvas"></canvas>

  <script>
    const canvas = document.getElementById('treeCanvas');
    const ctx = canvas.getContext('2d');

    let width, height;
    let branchDepth = 5;
    let windSpeedX = 0.5;
    let windSpeedY = 0.1;
    let leafParticles = [];

    function resize() {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    }

    resize();
    window.addEventListener('resize', resize);

    function drawTree(x, y, length, angle, depth) {
      if (depth === 0) return;

      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle * Math.PI / 180);

      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(length * Math.cos(angle * Math.PI / 180), length * Math.sin(angle * Math.PI / 180));
      ctx.lineWidth = depth;
      ctx.strokeStyle = 'brown'; // Tree Trunk and Branches
      ctx.stroke();

      drawTree(length * Math.cos(angle * Math.PI / 180), length * Math.sin(angle * Math.PI / 180), length * 0.7, angle + 25, depth - 1);
      drawTree(length * Math.cos(angle * Math.PI / 180), length * Math.sin(angle * Math.PI / 180), length * 0.7, angle - 25, depth - 1);

      ctx.restore();
    }

    function drawLeaf() {
        let x = width / 2 + Math.random() * width;
        let y = height + Math.random() * 50; // Start above the canvas
        leafParticles.push({x: x, y: y, size: Math.random() * 3 + 1, color: 'green', life: 100});
    }

    function updateLeaf(particle) {
      particle.y -= particle.life;
      if (particle.life <= 0) {
        return true; // Remove this leaf
      }
      return false; // Keep the leaf
    }

    function draw() {
      ctx.clearRect(0, 0, width, height);

      // Wind simulation (simple swaying)
      windSpeedX += Math.random() * 0.1 - 0.05;
      windSpeedY += Math.random() * 0.1 - 0.05;

      drawTree(width / 2, height, 100, -90, branchDepth); // Initial angle and depth

      // Leaf particles
      for (let i = leafParticles.length - 1; i >= 0; i--) {
        const particle = leafParticles[i];
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fillStyle = particle.color;
        ctx.fill();

        if (updateLeaf(particle)) {
          leafParticles.splice(i, 1);
        }
      }

      // Generate new leaves periodically
      if (Math.random() < 0.05) { // Adjust frequency as needed
          drawLeaf();
      }
    }


    function animate() {
      requestAnimationFrame(animate);
      draw();
    }

    // Slider control for branch depth
    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = 1;
    slider.max = 10;
    slider.value = branchDepth;
    slider.id = "depthSlider";
    document.body.appendChild(slider);

    slider.addEventListener('input', function() {
        branchDepth = parseInt(this.value);
    });


    animate(); // Start animation loop
  </script>
</body>
</html>