<h1>Simulace kyvadla</h1>
<canvas id="kyvadlo" width="400" height="400"></canvas>
<div class="input-section">
    <label for="delkaLana">Délka lana (cm):</label>
    <input type="number" id="delkaLana" value="150" min="50" max="400">
    <button onclick="nastavitDelku()">Nastavit</button>
</div>

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

    let delkaLana = 150;
    const startX = canvas.width / 2;
    const startY = 50;
    let angle = 0;
    let angleSpeed = 0.05;

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

        const uhel = Math.sin(angle) * Math.PI / 6;
        const konecX = startX + Math.sin(uhel) * delkaLana;
        const konecY = startY + Math.cos(uhel) * delkaLana;

        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(konecX, konecY);
        ctx.strokeStyle = "#8B4513";
        ctx.lineWidth = 4;
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(konecX, konecY, 15, 0, Math.PI * 2, false);
        ctx.fillStyle = "#555";
        ctx.fill();
        ctx.stroke();
    }

    function animovatKyvadlo() {
        angle += angleSpeed;
        nakreslitKyvadlo();
        requestAnimationFrame(animovatKyvadlo);
    }

    function nastavitDelku() {
        const input = document.getElementById("delkaLana");
        delkaLana = Math.min(400, parseInt(input.value));
    }

    animovatKyvadlo();
</script>