<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Fractales Orgánicos Dinámicos</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            overflow: hidden; /* Prevent scrollbars */
        }
        #fractalCanvas {
            display: block; /* Removes extra space below canvas */
            width: 100vw;
            height: 100vh;
        }
        #controls {
            position: fixed;
            top: 20px;
            left: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            z-index: 10; /* Ensure controls are above the canvas */
        }
        .slider-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .slider-label {
            color: #f9fafb; /* Tailwind's gray-50 */
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            margin-bottom: 4px;
            display: block; /* Ensure label takes full width */
        }

        input[type="range"] {
            -webkit-appearance: none;
            width: 250px; /* Increased width for better usability */
            height: 6px;
            border-radius: 5px;
            background: #d1d5db; /* Tailwind's gray-300 */
            outline: none;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #6b7280; /* Tailwind's gray-500 */
            cursor: pointer;
        }

        input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #6b7280; /* Tailwind's gray-500 */
            cursor: pointer;
        }

        input[type="range"]:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.3); /* Tailwind's gray-500 with opacity */
        }

        input[type="range"]:focus::-moz-range-thumb {
            box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.3); /* Tailwind's gray-500 with opacity */
        }

        input[type="range"]:active::-webkit-slider-thumb {
            transform: scale(1.1);
        }

        input[type="range"]:active::-moz-range-thumb {
            transform: scale(1.1);
        }

        #stats {
            position: fixed;
            bottom: 20px;
            left: 20px;
            color: #f9fafb; /* Tailwind's gray-50 */
            font-size: 0.875rem; /* text-sm */
            background-color: rgba(0, 0, 0, 0.7);
            padding: 12px;
            border-radius: 8px;
            z-index: 10;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-100 antialiased">
    <canvas id="fractalCanvas"></canvas>
    <div id="controls" class="bg-gray-800 bg-opacity-50 p-6 rounded-lg shadow-md border border-gray-700">
        <div class="slider-group">
            <label for="branchLength" class="slider-label">Longitud de la Rama:</label>
            <input type="range" id="branchLength" min="50" max="300" value="150">
            <span id="branchLengthValue" class="text-gray-300 text-sm ml-2">150</span>
        </div>
        <div class="slider-group">
            <label for="angle" class="slider-label">Ángulo de Ramificación:</label>
            <input type="range" id="angle" min="10" max="90" value="30">
            <span id="angleValue" class="text-gray-300 text-sm ml-2">30°</span>
        </div>
        <div class="slider-group">
            <label for="decay" class="slider-label">Decaimiento de la Longitud:</label>
            <input type="range" id="decay" min="0.5" max="0.9" step="0.01" value="0.7">
            <span id="decayValue" class="text-gray-300 text-sm ml-2">0.70</span>
        </div>
        <div class="slider-group">
            <label for="complexity" class="slider-label">Complejidad:</label>
            <input type="range" id="complexity" min="2" max="12" value="7">
            <span id="complexityValue" class="text-gray-300 text-sm ml-2">7</span>
        </div>
        <div class="slider-group">
            <label for="colorHue" class="slider-label">Tono de Color:</label>
            <input type="range" id="colorHue" min="0" max="360" value="120">
            <span id="colorHueValue" class="text-gray-300 text-sm ml-2">120</span>
        </div>
        <div class="slider-group">
            <label for="saturation" class="slider-label">Saturación:</label>
            <input type="range" id="saturation" min="0" max="100" value="60">
            <span id="saturationValue" class="text-gray-300 text-sm ml-2">60%</span>
        </div>
        <div class="slider-group">
            <label for="lightness" class="slider-label">Luminosidad:</label>
            <input type="range" id="lightness" min="0" max="100" value="50">
            <span id="lightnessValue" class="text-gray-300 text-sm ml-2">50%</span>
        </div>
    </div>
    <div id="stats" class="text-gray-300 text-sm">
        FPS: <span id="fps">0</span> | Vértices: <span id="vertexCount">0</span>
    </div>

    <script>
        const canvas = document.getElementById('fractalCanvas');
        const ctx = canvas.getContext('2d');
        let branchLengthSlider = document.getElementById('branchLength');
        let angleSlider = document.getElementById('angle');
        let decaySlider = document.getElementById('decay');
        let complexitySlider = document.getElementById('complexity');
        let colorHueSlider = document.getElementById('colorHue');
        let saturationSlider = document.getElementById('saturation');
        let lightnessSlider = document.getElementById('lightness');

        let branchLengthValueDisplay = document.getElementById('branchLengthValue');
        let angleValueDisplay = document.getElementById('angleValue');
        let decayValueDisplay = document.getElementById('decayValue');
        let complexityValueDisplay = document.getElementById('complexityValue');
        let colorHueValueDisplay = document.getElementById('colorHueValue');
        let saturationValueDisplay = document.getElementById('saturationValue');
        let lightnessValueDisplay = document.getElementById('lightnessValue');

        let fpsDisplay = document.getElementById('fps');
        let vertexCountDisplay = document.getElementById('vertexCount');
        let lastTime = 0;
        let frameCount = 0;
        let vertexCount = 0;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let branchLength = parseInt(branchLengthSlider.value);
        let angle = parseInt(angleSlider.value);
        let decay = parseFloat(decaySlider.value);
        let complexity = parseInt(complexitySlider.value);
        let colorHue = parseInt(colorHueSlider.value);
        let saturation = parseInt(saturationSlider.value);
        let lightness = parseInt(lightnessSlider.value);

        branchLengthValueDisplay.textContent = branchLength;
        angleValueDisplay.textContent = angle + "°";
        decayValueDisplay.textContent = decay.toFixed(2);
        complexityValueDisplay.textContent = complexity;
        colorHueValueDisplay.textContent = colorHue;
        saturationValueDisplay.textContent = saturation + "%";
        lightnessValueDisplay.textContent = lightness + "%";

        branchLengthSlider.addEventListener('input', () => {
            branchLength = parseInt(branchLengthSlider.value);
            branchLengthValueDisplay.textContent = branchLength;
            drawFractal();
        });

        angleSlider.addEventListener('input', () => {
            angle = parseInt(angleSlider.value);
            angleValueDisplay.textContent = angle + "°";
            drawFractal();
        });

        decaySlider.addEventListener('input', () => {
            decay = parseFloat(decaySlider.value);
            decayValueDisplay.textContent = decay.toFixed(2);
            drawFractal();
        });

        complexitySlider.addEventListener('input', () => {
            complexity = parseInt(complexitySlider.value);
            complexityValueDisplay.textContent = complexity;
            drawFractal();
        });

        colorHueSlider.addEventListener('input', () => {
            colorHue = parseInt(colorHueSlider.value);
            colorHueValueDisplay.textContent = colorHue;
            drawFractal();
        });

        saturationSlider.addEventListener('input', () => {
            saturation = parseInt(saturationSlider.value);
            saturationValueDisplay.textContent = saturation + "%";
            drawFractal();
        });

        lightnessSlider.addEventListener('input', () => {
            lightness = parseInt(lightnessSlider.value);
            lightnessValueDisplay.textContent = lightness + "%";
            drawFractal();
        });

        function drawFractal() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            vertexCount = 0; // Reset vertex count for each frame
            ctx.lineCap = 'round'; // Nicer rounded ends for branches
            drawBranch(canvas.width / 2, canvas.height, -90, branchLength, complexity);
        }

        function drawBranch(x, y, currentAngle, length, depth) {
            if (depth === 0) return;

            const endX = x + length * Math.cos(currentAngle * Math.PI / 180);
            const endY = y + length * Math.sin(currentAngle * Math.PI / 180);

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(endX, endY);
            const branchColor = `hsl(${colorHue}, ${saturation}%, ${lightness}%)`;
            ctx.strokeStyle = branchColor;
            ctx.lineWidth = depth * 1.5; // Thicker branches for lower depths
            ctx.stroke();
            vertexCount += 2; // Count the start and end points as vertices

            const newLength = length * decay;
            const leftAngle = currentAngle - angle;
            const rightAngle = currentAngle + angle;

            drawBranch(endX, endY, leftAngle, newLength, depth - 1);
            drawBranch(endX, endY, rightAngle, newLength, depth - 1);
        }

        function updateFPS() {
            const now = performance.now();
            const deltaTime = now - lastTime;
            lastTime = now;
            frameCount++;
            if (deltaTime >= 200) { // Update FPS every 200ms
                const fps = Math.round(frameCount * 1000 / deltaTime);
                fpsDisplay.textContent = fps;
                frameCount = 0;
            }
            vertexCountDisplay.textContent = vertexCount;
            requestAnimationFrame(updateFPS);
        }

        drawFractal();
        updateFPS(); // Start the FPS counter
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drawFractal(); // Redraw fractal on resize to fit new dimensions
        });
    </script>
</body>
</html>