p5.js od podstaw

Biblioteka p5.js jest jednym z najpopularniejszych narzędzi do tworzenia grafiki generatywnej, animacji oraz interaktywnych projektów działających bezpośrednio w przeglądarce internetowej.

p5.js jest biblioteką JavaScript inspirowaną środowiskiem Processing. Pozwala tworzyć grafikę 2D, 3D, animacje, gry i sztukę generatywną.

Instalacja biblioteki

Najprostszym sposobem rozpoczęcia pracy jest dołączenie biblioteki z CDN. 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>

Pierwszy projekt

Poniższy przykład przedstawia małą aplikację p5.js rysującą koło. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>p5.js start</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
  createCanvas(600, 400);
  background(200);
}

function draw() {
  circle(300, 200, 100);
}
</script>
</body>
</html>

Podstawowa struktura programu

Każdy program p5.js opiera się na dwóch podstawowych funkcjach.

setup()

function setup() {
    createCanvas(800, 600);
}

Funkcja ta wykonywana jest tylko raz podczas uruchamiania programu.

draw()

function draw() {
    background(220);
}

Funkcja wykonywana jest wielokrotnie, domyślnie około 60 razy na sekundę.

Rysowanie figur

Punkt

point(100, 100);

Linia

line(50, 50, 300, 200);

Prostokąt

rect(100, 100, 200, 120);

Koło

circle(200, 200, 100);

Elipsa

ellipse(300, 200, 150, 80);

Kolory i style

Kolory w p5.js definiowane są najczęściej za pomocą modelu RGB. 

fill(255, 0, 0);
stroke(0, 0, 255);

circle(200, 200, 100);

Wyłączenie obrysu

noStroke();

Wyłączenie wypełnienia

noFill();

Przezroczystość

fill(255, 0, 0, 100);

Obsługa myszy

p5.js udostępnia wbudowane zmienne mouseX i mouseY. 

function draw() {
    background(220);
    circle(mouseX, mouseY, 50);
}

Obsługa kliknięcia

function mousePressed() {
    background(
        random(255),
        random(255),
        random(255)
    );
}

Obsługa klawiatury

function keyPressed() {
    if (key === 'a') {
        background(0);
    }
}

Funkcja random()

let x = random(0, width);
let y = random(0, height);

Losowe kropki

function draw() {
    fill(
        random(255),
        random(255),
        random(255)
    );
    circle(
        random(width),
        random(height),
        20
    );
}

Tworzenie animacji

let x = 0;

function setup() {
    createCanvas(600, 400);
}

function draw() {
    background(220);
    x += 2;
    circle(x, 200, 50);
}

Odbijanie od krawędzi

let x = 200; let speed = 4; let r = 25;
function draw() {
  background(240); x += speed;
  if (x > width - r || x < r) {
    speed *= -1;
  }
  circle(x, 200, 2*r);
}

Tablice i wiele obiektów

Poniższy przykład rysuje losowe cząsteczki.

let particles = [];
function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 100; i++) {
    particles.push({ x: random(width), y: random(height) });
  }
}
function draw() {
  background(20);
  for (let p of particles) {
    circle(p.x, p.y, 5);
  }
}

Mini projekt - kolorowy chaos

Kolorowe koła o różnym promieniu pojawiają się w losowych miejscach.

function setup() {
    createCanvas(800, 600);
    background(0);
}

function draw() {
    noStroke();
    fill(
        random(255),
        random(255),
        random(255),
        60
    );
    circle(
        random(width),
        random(height),
        random(10, 80)
    );
}

p5.js jest jedną z najlepszych bibliotek do nauki programowania kreatywnego. Pozwala szybko przejść od prostych figur geometrycznych do zaawansowanych animacji, wizualizacji danych, grafiki 3D i sztuki generatywnej.

Przykłady:
Kółko - pierwszy przykład
Losowe kropki
Tworzenie animacji
Odbijanie od krawędzi
Cząsteczki
Kolorowy chaos