p5.js je JavaScriptová knihovna zaměřená na kreativní kódování (creative coding). JVychází z jazyka Processing, ale je plně přizpůsobena pro webový prohlížeč.

Webová stránka: https://p5js.org/

Sketch – další název pro p5.js

Základní struktura kódu

Sketch se skládá z dvou hlavních funkcí:

function setup() {
  createCanvas(400, 400); // Vytvoří kreslící plátno o rozměrech 400x400 pixelů
}

function draw() {
  background(220);        // Vymaže plátno a nastaví barvu pozadí (šedá)
}

setup(): Spustí se pouze jednou na startu aplikace. Používá se pro počáteční vytvoření canvasu (kreslícího plátna), proměnných, načítání obrázků apod.

draw(): Vykresluje se po startu opakovaně, obvykle 60x za vteřinu. Slouží k vykreslování grafiky a ovládání objektů.

Příkaz draw() překresluje plátno podobně jako filmové snímky. Pokud má celé plátno vymazat, musíme do draw přidat příkaz pro tvorbu pozadí background(color).

Základní tvary

Máme řadu předpřipravených tvarů:

rect(x, y, sirka, vyska); // Obdélník 
ellipse(x, y, w, h); // Elipsa/Kruh 
line(x1, y1, x2, y2); // Úsečka mezi dvěma body

Styl a barvy

Nastaví vlastnosti pro všechny následující objekty, dokud nenastavíme vlastnosti jinak

fill(r, g, b) //Nastaví barvu výplněstroke(r, g, b) // Nastaví barvu obrysové čáry.
noFill() / noStroke() // Vypne výplň nebo obrys.
strokeWeight(px) // Nastaví tloušťku obrysu v pixelech.

K čemu se tato knihovna využívá?

• generativní grafika/art – tvůrce naprogramuje sadu pravidel (algoritmus) a nechá počítač vygenerovat obraz. Často se využívá prvek náhody (random()) nebo matematické funkce

• interaktivní webové stránky
• vizuální instalace
• datová vizualizace
• tvorba 2D her
• audio vizualizátory