🌊 Tutorial Interaktywnych Metaballs

Naucz się kodować organiczne animacje przypominające krople

Czym są Metaballs?

Metaballs (a może po polsku meta-kulki?) to organicznie wyglądające kształty, które łączą się i mieszają płynnie, gdy zbliżają się do siebie. Są tworzone za pomocą równań pola matematycznego i często pojawiają się w lampach lawowych, symulacjach płynów i efektach w grach.

Krok 1: Konfiguracja Canvas

Najpierw potrzebujemy elementu canvas do rysowania:

<canvas id="canvas"></canvas>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // Dostosuj canvas do rozmiaru okna
    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    
    resize();
    window.addEventListener('resize', resize);
</script>

Krok 2: Tworzenie Klasy Metaball

Każdy metaball potrzebuje pozycji, prędkości i rozmiaru:

class Metaball {
    constructor(x, y, vx, vy, radius) {
        this.x = x;        // Pozycja X
        this.y = y;        // Pozycja Y
        this.vx = vx;      // Prędkość X
        this.vy = vy;      // Prędkość Y
        this.radius = radius;  // Rozmiar
    }
    
    update() {
        // Przesuń kulę
        this.x += this.vx;
        this.y += this.vy;
        
        // Odbij się od ścian
        if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
            this.vx *= -1;
        }
        if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
            this.vy *= -1;
        }
    }
}

Krok 3: Formuła Metaball

To jest matematyczne serce metaballs. Dla każdego piksela obliczamy, jak bardzo wpływa na niego każda kula:

Im bliżej punkt jest do centrum kuli, tym silniejszy wpływ. Sumujemy wszystkie wpływy:

function getMetaballValue(x, y) {
    let sum = 0;
    
    // Dodaj wpływ każdej kuli
    for (const ball of balls) {
        // Oblicz kwadrat odległości (szybsze niż sqrt)
        const dx = x - ball.x;
        const dy = y - ball.y;
        const distSq = dx * dx + dy * dy;
        
        // Dodaj wpływ tej kuli
        sum += (ball.radius * ball.radius) / distSq;
    }
    
    return sum;
}

Krok 4: Renderowanie Metaballs

Sprawdzamy każdy piksel i kolorujemy go na podstawie siły pola:

function render() {
    const imageData = ctx.createImageData(canvas.width, canvas.height);
    const data = imageData.data;
    const step = 3; // Sprawdź co 3 piksele dla wydajności
    
    for (let y = 0; y < canvas.height; y += step) {
        for (let x = 0; x < canvas.width; x += step) {
            const value = getMetaballValue(x, y);
            
            // Jeśli pole jest wystarczająco silne, narysuj piksel
            if (value > 1) {
                // Kolor na podstawie intensywności
                const intensity = Math.min(value / 3, 1);
                const r = Math.floor(100 + intensity * 155);
                const g = Math.floor(50 + intensity * 100);
                const b = Math.floor(200 + intensity * 55);
                
                // Wypełnij blok step x step
                for (let dy = 0; dy < step; dy++) {
                    for (let dx = 0; dx < step; dx++) {
                        const idx = ((y + dy) * canvas.width + (x + dx)) * 4;
                        data[idx] = r;
                        data[idx + 1] = g;
                        data[idx + 2] = b;
                        data[idx + 3] = 255; // Kanał alfa
                    }
                }
            }
        }
    }
    
    ctx.putImageData(imageData, 0, 0);
}

Krok 5: Dodawanie Interaktywności

Stwórz niewidzialny metaball, który podąża za kursorem:

const mouseInfluence = {
    x: -1000,
    y: -1000,
    radius: 80,
    active: false
};

canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    mouseInfluence.x = e.clientX - rect.left;
    mouseInfluence.y = e.clientY - rect.top;
    mouseInfluence.active = true;
});

canvas.addEventListener('mouseleave', () => {
    mouseInfluence.active = false;
});

Następnie uwzględnij to w obliczeniach pola:

function getMetaballValue(x, y) {
    let sum = 0;
    
    for (const ball of balls) {
        const dx = x - ball.x;
        const dy = y - ball.y;
        const distSq = dx * dx + dy * dy;
        sum += (ball.radius * ball.radius) / distSq;
    }
    
    // Dodaj wpływ myszy
    if (mouseInfluence.active) {
        const dx = x - mouseInfluence.x;
        const dy = y - mouseInfluence.y;
        const distSq = dx * dx + dy * dy;
        sum += (mouseInfluence.radius * mouseInfluence.radius) / distSq;
    }
    
    return sum;
}

Krok 6: Pętla Animacji

function animate() {
    // Wyczyść canvas
    ctx.fillStyle = '#0a0a0a';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Zaktualizuj wszystkie kule
    for (const ball of balls) {
        ball.update();
    }
    
    // Renderuj metaballs
    render();
    
    // Pętla
    requestAnimationFrame(animate);
}

animate();

Obsługa Dotyku

Dodaj obsługę zdarzeń dotykowych dla urządzeń mobilnych:

canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    mouseInfluence.x = touch.clientX - rect.left;
    mouseInfluence.y = touch.clientY - rect.top;
    mouseInfluence.active = true;
});

canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    balls.push(new Metaball(
        e.clientX - rect.left,
        e.clientY - rect.top,
        (Math.random() - 0.5) * 3,
        (Math.random() - 0.5) * 3,
        30 + Math.random() * 40
    ));
});

Wskazówki Optymalizacyjne

Eksperymentuj i Rozwijaj

Teraz, gdy rozumiesz podstawy, wypróbuj te warianty:

• Różne kolory: Zmieniaj wartości RGB na podstawie właściwości kul
• Grawitacja: Dodaj siłę grawitacji do prędkości kul
• Zmiana rozmiaru: Spraw, aby kule rosły i kurczyły się w czasie
• Wiele progów: Rysuj różne kolory przy różnych siłach pola
• Efekty świetlne: Dodaj filtr rozmycia dla miękkiego wyglądu

Udanego kodowania! 🚀

Więcej samouczków JS