Kołyska Newtona w JavaScript

Zacznij od prostej struktury HTML zawierającej element canvas i przyciski sterujące:

<canvas id="canvas" width="600" height="400"></canvas>
<div class="controls">
    <button onclick="startSwing(1)">Swing 1 Ball</button>
    <button onclick="startSwing(2)">Swing 2 Balls</button>
    <button onclick="reset()">Reset</button>
</div>

Krok 2: Inicjalizacja Canvas i Stałych

Skonfiguruj kontekst canvas i zdefiniuj fizyczne parametry kołyski:

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

const numBalls = 5;              // Liczba kul w kołysce
const ballRadius = 20;           // Promień każdej kuli
const stringLength = 150;        // Długość linki wahadła
const frameY = 50;               // Pozycja Y górnej ramy
const spacing = ballRadius * 2 + 2;  // Odstęp między kulami
const centerX = canvas.width / 2;    // Środek canvas
  
let balls = [];
let dragging = null;             // Śledź, która kula jest przeciągana

💡 Wskazówka: Odstęp między kulami jest nieco większy niż ich średnica, aby zapobiec nakładaniu się, gdy są w spoczynku.

Krok 3: Utworzenie Klasy Ball

Właściwości Kuli

Każda kula jest wahadłem z punktem zakotwiczenia, kątem i prędkością:

class Ball {
    constructor(index) {
        this.index = index;
        this.anchorX = centerX + (index - 2) * spacing;
        this.anchorY = frameY;
        this.angle = 0;           // Aktualny kąt od pionu
        this.velocity = 0;        // Prędkość kątowa
        this.mass = 1;
        this.stringLength = stringLength;
    }
}

Obliczanie Pozycji

Konwersja współrzędnych biegunowych (kąt) na współrzędne kartezjańskie (x, y):

get x() {
    return this.anchorX + Math.sin(this.angle) * this.stringLength;
}

get y() {
    return this.anchorY + Math.cos(this.angle) * this.stringLength;
}

Koncepcja Fizyczna: Używamy sinusa i cosinusa, aby przekonwertować kąt wahadła na współrzędne ekranu. Kąt 0 reprezentuje kulę wiszącą prosto w dół.

Krok 4: Implementacja Fizyki Wahadła

Metoda Update

Zastosuj fizykę prostego wahadła, aby zaktualizować pozycję kuli w każdej klatce:

update(dt) {
    const gravity = 0.5;
    const damping = 0.999;
    
    // Oblicz przyspieszenie z grawitacji
    let acceleration = (-gravity / this.stringLength) * Math.sin(this.angle);
    
    // Zaktualizuj prędkość i zastosuj tłumienie
    this.velocity += acceleration * dt;
    this.velocity *= damping;
    
    // Zaktualizuj kąt
    this.angle += this.velocity * dt;
}

Wzór Wahadła:
przyspieszenie = -(g / L) × sin(θ)

Rozbicie na części:

gravity: Symuluje przyciąganie grawitacyjne (mniejsze = wolniejsze wahnięcie)
damping: Stopniowo zwalnia ruch (realistyczne tarcie)
acceleration: Jak szybko zmienia się prędkość
dt: Delta czasu - zapewnia spójną fizykę niezależnie od liczby klatek

Krok 5: Renderowanie Kul

Narysuj każdą kulę i jej linkę na canvas:

draw() {
    // Narysuj linkę
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(this.anchorX, this.anchorY);
    ctx.lineTo(this.x, this.y);
    ctx.stroke();
    
    // Narysuj kulę
    ctx.fillStyle = '#4a5568';
    ctx.beginPath();
    ctx.arc(this.x, this.y, ballRadius, 0, Math.PI * 2);
    ctx.fill();
    
    // Dodaj podświetlenie dla efektu 3D
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    ctx.beginPath();
    ctx.arc(this.x - 5, this.y - 5, ballRadius / 3, 0, Math.PI * 2);
    ctx.fill();
}

Krok 6: Wykrywanie Kolizji

Wykryj, kiedy kule zderzają się i przekaż pęd między nimi:

function detectCollisions() {
    for (let i = 0; i < balls.length - 1; i++) {
        const b1 = balls[i];
        const b2 = balls[i + 1];
        
        // Oblicz odległość między środkami kul
        const dx = b2.x - b1.x;
        const dy = b2.y - b1.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        
        // Jeśli kule się stykają
        if (dist < ballRadius * 2) {
            // Zamień prędkości (kolizja sprężysta)
            const temp = b1.velocity;
            b1.velocity = b2.velocity;
            b2.velocity = temp;
        }
    }
}

Koncepcja Fizyczna: W doskonale sprężystym zderzeniu między obiektami o równej masie, po prostu wymieniają się prędkościami. To właśnie tworzy kultowy efekt kołyski Newtona!

Krok 7: Pętla Animacji

Utwórz główną pętlę animacji, która aktualizuje i renderuje wszystko:

function animate() {
    const dt = 0.5;  // Krok czasowy dla fizyki
    
    // Aktualizuj wszystkie kule (z wyjątkiem tej przeciąganej)
    balls.forEach(ball => {
        if (dragging !== ball) {
            ball.update(dt);
        }
    });
    
    // Sprawdź kolizje
    detectCollisions();
    
    // Renderuj wszystko
    draw();
    
    // Poproś o następną klatkę
    requestAnimationFrame(animate);
}

💡 Wskazówka: requestAnimationFrame automatycznie synchronizuje się z częstotliwością odświeżania przeglądarki (zazwyczaj 60 FPS) dla płynnej animacji.

Krok 8: Funkcja Rysowania

Wyczyść canvas i narysuj wszystkie elementy:

function draw() {
    // Wyczyść canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Narysuj górną ramę
    ctx.strokeStyle = '#2d3748';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(50, frameY);
    ctx.lineTo(canvas.width - 50, frameY);
    ctx.stroke();
    
    // Narysuj wszystkie kule
    balls.forEach(ball => ball.draw());
}

Krok 9: Interakcja Myszą

Przycisk Myszy w Dół - Rozpocznij Przeciąganie

canvas.addEventListener('mousedown', e => {
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    
    // Sprawdź, czy mysz jest nad którąkolwiek kulą
    for (let ball of balls) {
        const dx = mx - ball.x;
        const dy = my - ball.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance < ballRadius) {
            dragging = ball;
            ball.velocity = 0;  // Zatrzymaj jej ruch
            break;
        }
    }
});

Ruch Myszy - Aktualizacja Pozycji Kuli

canvas.addEventListener('mousemove', e => {
    if (dragging) {
        const rect = canvas.getBoundingClientRect();
        const mx = e.clientX - rect.left;
        const my = e.clientY - rect.top;
        
        // Oblicz kąt od kotwicy do myszy
        const dx = mx - dragging.anchorX;
        const dy = my - dragging.anchorY;
        dragging.angle = Math.atan2(dx, dy);
    }
});

Przycisk Myszy w Górę - Zwolnij Kulę

canvas.addEventListener('mouseup', () => {
    dragging = null;
});

canvas.addEventListener('mouseleave', () => {
    dragging = null;
});

Krok 10: Obsługa Dotyku

Dodaj obsługę ekranu dotykowego z podobną logiką do zdarzeń myszy:

canvas.addEventListener('touchstart', e => {
    e.preventDefault();  // Zapobiegaj przewijaniu
    const rect = canvas.getBoundingClientRect();
    const touch = e.touches[0];
    const mx = touch.clientX - rect.left;
    const my = touch.clientY - rect.top;
    
    for (let ball of balls) {
        const dx = mx - ball.x;
        const dy = my - ball.y;
        if (Math.sqrt(dx * dx + dy * dy) < ballRadius) {
            dragging = ball;
            ball.velocity = 0;
            break;
        }
    }
});

canvas.addEventListener('touchmove', e => {
    e.preventDefault();
    if (dragging) {
        const rect = canvas.getBoundingClientRect();
        const touch = e.touches[0];
        const mx = touch.clientX - rect.left;
        const my = touch.clientY - rect.top;
        
        const dx = mx - dragging.anchorX;
        const dy = my - dragging.anchorY;
        dragging.angle = Math.atan2(dx, dy);
    }
});

canvas.addEventListener('touchend', () => {
    dragging = null;
});

canvas.addEventListener('touchcancel', () => {
    dragging = null;
});

💡 Ważne: Zawsze wywołuj e.preventDefault() dla zdarzeń dotykowych, aby zapobiec przewijaniu strony podczas przeciągania.

Krok 11: Funkcje Pomocnicze

Inicjalizacja Kołyski

function init() {
    balls = [];
    for (let i = 0; i < numBalls; i++) {
        balls.push(new Ball(i));
    }
}

Rozpocznij Automatyczne Wahnięcie

function startSwing(count) {
    reset();
    for (let i = 0; i < count; i++) {
        balls[i].angle = -0.6;  // Odchyl o 0.6 radiana
    }
}

Zresetuj Wszystkie Kule

function reset() {
    balls.forEach(ball => {
        ball.angle = 0;
        ball.velocity = 0;
    });
}

Krok 12: Uruchomienie Symulacji

Na koniec zainicjalizuj kule i uruchom pętlę animacji:

init();
animate();

🎓 Podsumowanie Kluczowych Koncepcji

Symulacja Fizyczna

Ruch Wahadła: Grawitacja tworzy przyspieszenie proporcjonalne do sin(kąta)
Kolizja Sprężysta: Obiekty o równej masie wymieniają się prędkościami
Tłumienie: Mnożenie prędkości przez 0.999 symuluje opór powietrza

Techniki Canvas

clearRect: Wyczyść canvas przed każdą klatką
Konwersja Współrzędnych: Użyj sin/cos do konwersji kątów na pozycje
requestAnimationFrame: Płynna animacja 60 FPS

Interakcja

getBoundingClientRect: Konwertuj współrzędne ekranu na współrzędne canvas
Wzór Odległości: sqrt(dx² + dy²) do sprawdzenia, czy mysz jest nad kulą
atan2: Oblicz kąt z dwóch punktów

🚀 Pomysły na Ulepszenia

Dodaj różne masy kul, aby zobaczyć asymetryczne kolizje
Zaimplementuj rozciąganie linki dla bardziej realistycznej fizyki
Dodaj efekty dźwiękowe podczas kolizji
Pozwól użytkownikom dynamicznie dodawać/usuwać kule
Dodaj smugi za kulami, aby wizualizować ruch
Zaimplementuj różne materiały (metal, guma itp.) o różnej elastyczności

🎯 Budowa Interaktywnej Kołyski Newtona

Krok 1: Struktura HTML

Krok 2: Inicjalizacja Canvas i Stałych

Krok 3: Utworzenie Klasy Ball

Właściwości Kuli

Obliczanie Pozycji

Krok 4: Implementacja Fizyki Wahadła

Metoda Update

Krok 5: Renderowanie Kul

Krok 6: Wykrywanie Kolizji

Krok 7: Pętla Animacji

Krok 8: Funkcja Rysowania

Krok 9: Interakcja Myszą

Przycisk Myszy w Dół - Rozpocznij Przeciąganie

Ruch Myszy - Aktualizacja Pozycji Kuli

Przycisk Myszy w Górę - Zwolnij Kulę

Krok 10: Obsługa Dotyku

Krok 11: Funkcje Pomocnicze

Inicjalizacja Kołyski

Rozpocznij Automatyczne Wahnięcie

Zresetuj Wszystkie Kule

Krok 12: Uruchomienie Symulacji

🎓 Podsumowanie Kluczowych Koncepcji

Symulacja Fizyczna

Techniki Canvas

Interakcja

🚀 Pomysły na Ulepszenia

Więcej samouczków JS