Biblioteka do rysowania ruchomych figur geometrycznych

Aby stworzyć interaktywne i ruchome figury geometryczne w przeglądarce, możesz użyć biblioteki jQuery oraz skryptów JavaScript. Poniżej znajdziesz kroki, jak to zrobić, oraz przykładowy kod.

Krok 1: Instalacja jQuery

Pobranie jQuery: Możesz pobrać jQuery z oficjalnej strony jQuery lub użyć CDN. Użycie CDN jest prostsze i szybsze, więc polecam tę opcję.Dodaj poniższy kod do sekcji <head> swojego pliku HTML, aby załadować jQuery z CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Krok 2: Tworzenie prostego skryptu do rysowania figur

Tworzenie HTML i CSS: Utwórz plik HTML, w którym będziesz rysować figury. Możesz również dodać style CSS, aby figury były bardziej widoczne.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruchome Figury Geometryczne</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #canvas {
            border: 1px solid #000;
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }
        .shape {
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>Ruchome Figury Geometryczne</h1>
    <div id="canvas"></div>
    <script>
        // Funkcja do dodawania figury
        function addShape(shape, left, top) {
            const $shape = $(`<div class="shape" style="width: 50px; height: 50px; background-color: ${shape.color};"></div>`);
            $shape.css({ left: left + 'px', top: top + 'px' });
            $('#canvas').append($shape);
            
            // Ruch figury
            moveShape($shape);
        }

        // Funkcja do poruszania figurą
        function moveShape($shape) {
            let left = Math.random() * ($('#canvas').width() - 50);
            let top = Math.random() * ($('#canvas').height() - 50);
            
            $shape.animate({
                left: left + 'px',
                top: top + 'px'
            }, 2000, function() {
                moveShape($shape); // Rekursywne wywołanie
            });
        }

        // Dodaj kilka figur
        addShape({ color: 'red' }, 50, 50);
        addShape({ color: 'blue' }, 100, 100);
        addShape({ color: 'green' }, 150, 150);
    </script>
</body>
</html>

Krok 3: Uruchomienie na serwerze

Instalacja na serwerze: Aby uruchomić ten kod na serwerze, musisz:
- Zainstalować serwer lokalny (np. XAMPP, WAMP, MAMP) lub użyć serwera zdalnego (np. cPanel, FTP).
- Skopiować stworzony plik HTML do katalogu publicznego na serwerze (np. htdocs dla XAMPP).
- Otworzyć przeglądarkę i wpisać adres URL do swojego pliku (np. http://localhost/nazwa_pliku.html).

Dodatkowe informacje

Możesz zmieniać kolory, rozmiary oraz ruch figur, edytując odpowiednie wartości w kodzie.
Zainstaluj dodatkowe biblioteki, jeśli chcesz dodać bardziej zaawansowane funkcje, takie jak interakcja z użytkownikiem lub więcej kształtów geometrycznych.
W zależności od potrzeb, możesz również rozważyć użycie bibliotek takich jak p5.js lub Three.js do bardziej zaawansowanej grafiki i animacji.