🌈 Animowana plazma w JavaScript

Efekt plazmy to klasyczny efekt graficzny, który polega na tworzeniu płynnych, kolorowych animacji przypominających wirujące chmury lub płomienie. W tym tutorialu nauczysz się, jak stworzyć taki efekt od podstaw używając czystego JavaScript i elementu <canvas>.

Krok 1: Struktura HTML

Zacznijmy od podstawowej struktury HTML z elementem canvas:

<canvas id="plasmaCanvas" width="400" height="400"></canvas>

Krok 2: Inicjalizacja Canvas

Pierwszym krokiem jest uzyskanie kontekstu 2D canvas oraz przygotowanie bufora pikseli:

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

// Tworzymy obiekt ImageData do manipulacji pikselami
const imageData = ctx.createImageData(width, height);
const data = imageData.data; // Tablica RGBA pikseli

Krok 3: Matematyka za Plazmą

Efekt plazmy opiera się na nakładaniu na siebie funkcji sinusoidalnych. Dla każdego piksela (x, y) obliczamy wartość używając kombinacji funkcji sin() i cos():

function plasma(x, y, time) {
    // Różne fale sinusoidalne z różnymi częstotliwościami
    const value = 
        Math.sin(x / 16.0 + time) +
        Math.sin(y / 8.0 + time) +
        Math.sin((x + y) / 16.0 + time) +
        Math.sin(Math.sqrt(x * x + y * y) / 8.0 + time);
    
    // Normalizujemy wartość do zakresu 0-1
    return (value + 4) / 8;
}

Każda z tych funkcji sinusoidalnych tworzy inny wzór:

• sin(x / 16.0) - poziome fale
• sin(y / 8.0) - pionowe fale
• sin((x + y) / 16.0) - fale ukośne
• sin(sqrt(x² + y²) / 8.0) - koncentryczne okręgi

Krok 4: Mapowanie Kolorów

Konwertujemy wartość plazmy (0-1) na kolory RGB używając funkcji sinusoidalnych z przesunięciem fazowym:

function getColor(value) {
    // Używamy sin() z różnymi przesunięciami dla RGB
    const r = Math.floor(128 + 128 * Math.sin(value * Math.PI * 2));
    const g = Math.floor(128 + 128 * Math.sin(value * Math.PI * 2 + 2));
    const b = Math.floor(128 + 128 * Math.sin(value * Math.PI * 2 + 4));
    
    return [r, g, b];
}

Krok 5: Renderowanie

Teraz łączymy wszystko w funkcję renderującą:

function render(time) {
    // Konwertujemy czas na sekundy i spowalniamy
    time = time / 1000;
    
    // Dla każdego piksela
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Obliczamy wartość plazmy
            const value = plasma(x, y, time);
            
            // Konwertujemy na kolor
            const [r, g, b] = getColor(value);
            
            // Ustawiamy piksel w buforze
            const index = (y * width + x) * 4;
            data[index] = r;       // Red
            data[index + 1] = g;   // Green
            data[index + 2] = b;   // Blue
            data[index + 3] = 255; // Alpha (pełna nieprzezroczystość)
        }
    }
    
    // Rysujemy bufor na canvas
    ctx.putImageData(imageData, 0, 0);
}

Krok 6: Pętla Animacji

Ostatni krok to stworzenie pętli animacji używając requestAnimationFrame:

function animate(time) {
    render(time);
    requestAnimationFrame(animate);
}

// Startujemy animację
requestAnimationFrame(animate);

Demo: Zobacz Efekt w Akcji

Pełny Kod

Oto kompletny kod źródłowy efektu plazmy:

const canvas = document.getElementById('plasmaCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const imageData = ctx.createImageData(width, height);
const data = imageData.data;

function plasma(x, y, time) {
    const value = 
        Math.sin(x / 16.0 + time) +
        Math.sin(y / 8.0 + time) +
        Math.sin((x + y) / 16.0 + time) +
        Math.sin(Math.sqrt(x * x + y * y) / 8.0 + time);
    return (value + 4) / 8;
}

function getColor(value) {
    const r = Math.floor(128 + 128 * Math.sin(value * Math.PI * 2));
    const g = Math.floor(128 + 128 * Math.sin(value * Math.PI * 2 + 2));
    const b = Math.floor(128 + 128 * Math.sin(value * Math.PI * 2 + 4));
    return [r, g, b];
}

function render(time) {
    time = time / 1000;
    
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const value = plasma(x, y, time);
            const [r, g, b] = getColor(value);
            const index = (y * width + x) * 4;
            data[index] = r;
            data[index + 1] = g;
            data[index + 2] = b;
            data[index + 3] = 255;
        }
    }
    
    ctx.putImageData(imageData, 0, 0);
}

function animate(time) {
    render(time);
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Eksperymenty i Modyfikacje

Teraz, gdy masz działającą plazmę, możesz eksperymentować z różnymi parametrami:

1. Zmień częstotliwość fal

Modyfikuj wartości dzielników (16.0, 8.0) w funkcji plasma(), aby uzyskać większe lub mniejsze wzory.

2. Dodaj więcej fal

Dodaj kolejne funkcje sinusoidalne do sumy, np.:

Math.sin(x / 32.0 - time * 0.5)

3. Zmień schemat kolorów

Eksperymentuj z różnymi przesunięciami fazowymi lub użyj innych funkcji do mapowania kolorów.

4. Zmień prędkość animacji

Pomnóż time przez współczynnik, aby przyspieszyć lub spowolnić animację:

time = time / 1000 * 0.5; // Spowolnienie o połowę

Inne samouczki:

Fraktale - 25 linii JavaScript

Sinus scroll - 30 linii

Gra "Angry Chickens"

Animowane krzywe kwadratowe - 40 linii

Animowane konstelacje cząsteczek - 42 linie

Eksperyment z enginem fizyki