`data/artifacts/10c3c876aa67/hermes3-8b.html`

100 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recursive Fractal Tree</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            background: #aaa;
        }
    </style>
</head>
<body>
    <script>
        const canvas = document.createElement('canvas');
        canvas.width = window.innerWidth * 0.8;
        canvas.height = window.innerHeight;
        document.body.appendChild(canvas);

        const ctx = canvas.getContext('2d');

        function drawTree(depth, x, y, len) {
            if (depth === 0) {
                return;
            }

            const angle = Math.random() * Math.PI / 4 - Math.PI / 8;

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + len * Math.cos(angle), y - len * Math.sin(angle));
            ctx.stroke();

            setTimeout(() => {
                drawTree(depth - 1, x + len * Math.cos(angle), y - len * Math.sin(angle), len * 0.7);
                drawTree(depth - 1, x + len * Math.cos(angle) * 1.3, y - len * Math.sin(angle) * 1.3, len * 0.7);
            }, 1000);

            drawLeaves(Math.random() * 200 + 50, x, y, ctx);
        }

        function drawLeaves(count, x, y, ctx) {
            for (let i = 0; i < count; i++) {
                const size = Math.random() * 5 + 1;
                ctx.beginPath();
                ctx.arc(x, y, size, 0, 2 * Math.PI);
                ctx.fillStyle = 'green';
                ctx.fill();

                setTimeout(() => {
                    drawLeaves(count - 1, x, y - (Math.random() * 4 + 3), ctx);
                }, 1000);
            }
        }

        function generateWind() {
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 5 + 1;

            for (let i = 0; i < canvas.height; i++) {
                const windSpeed = speed - (i / canvas.height) * 3;
                ctx.globalAlpha = (canvas.height - i) / canvas.height;
                ctx.translate(0, i);
                ctx.rotate(angle);
                ctx.drawImage(canvas, -canvas.width, -windSpeed, canvas.width, canvas.height);
                ctx.setTransform(1, 0, 0, 1, 0, 0);
            }
        }

        function resizeCanvas() {
            canvas.width = window.innerWidth * 0.8;
            canvas.height = window.innerHeight;

            const ratio = canvas.height / canvas.width;
            canvas.style.width = `${canvas.width}px`;
            canvas.style.height = `${Math.max(canvas.width, canvas.width * ratio)}px`;

            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        window.addEventListener('resize', resizeCanvas);

        drawTree(parseInt(document.getElementById('depth').value), canvas.width / 2, canvas.height, 150);
        
        setInterval(() => {
            generateWind();
            drawLeaves(Math.random() * 200 + 50, canvas.width / 2, canvas.height, ctx);
        }, 10000);

    </script>
    <input type="range" min="0" max="5" id="depth">
</body>
</html>