Biblioteka p5.js to JavaScriptowa wersja projektu Processing przeznaczonego do działania w przeglądarce internetowej. Umożliwia ona tworzyć obrazy, animacje a nawet gry za pomocą dość intuicyjnego kodu. W Processingu tworzy się malutkie programy „szkice” (ang. sketch) używając prostych predefiniowanych funkcji setup() i draw().
Bibliotekę p5 można pobrać z oficjalnej strony projektu: https://p5js.org/download/ lub skorzystać z linku CDN. Poniżej zamieszczono zwięzły Boilerplate kodu, który wyświetli prosty szkic.
Za stworzenie płótna, na którym będziemy rysować szkice odpowiada instrukcja createCanvas(). Funkcja ta pobiera argumenty, które określają wielkość elementu canvas. Aby odróżnić płótno od tła strony internetowej w funkcji draw() zmienimy kolor tła płótna za pomocą instrukcji background().
<html>
<head>
<meta charset="utf-8">
<title>p5.js tutorial</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
<script>
function setup() {
createCanvas(640, 480);
}
function draw() {
background(128);
}
</script>
</body>
</html>
Instrukcje fill i stroke umożliwiają zmianę kolorów konturu i wypełnienia podobnie jak w przypadku rysowania w czystym JavaScripcie. Biblioteka p5.js pozwala wykorzystywać gotowe instrukcje do rysowania kształtów w dużo prostszy sposób niż jak to było w tutorialu HTML5 Canvas, gdzie nie wykorzystywaliśmy żadnych bibliotek. Pełna lista tych kształtów znajduje się w dokumentacji: https://p5js.org/reference/#group-Shape.
function draw() {
background(128);
stroke(255);
fill(220,220,220);
circle(100, 100, 120);
line(20, 230, 620, 230);
rect(480, 300, 120, 120);
}
Punkt 0,0 znajduje się w lewym górnym rogu płótna.
Animacje i interakcje w p5.js
Biblioteka p5.js ułatwia tworzenie animacji w taki sposób, że funkcja draw() jest domyślnie wykonywana w pętli 60 razy na sekundę. W funkcji setup() możemy zmienić częstotliwość odświeżania za pomocą instrukcji frameRate() w nawiasie podając pożądaną ilość klatek. Animację można łatwo stworzyć inkrementując jakąś zmienną, która będzie dodawana do pozycji lub innych właściwości odpowiedzialnych za rysowanie:
function setup() {
createCanvas(640, 480);
i = 0;
}
function draw() {
background(128);
fill(220,220,220);
stroke(255);
circle(100+i, 100, 120);
i++;
}
Biblioteka p5.js ułatwia też detekcję zdarzeń i interakcję. Za pomocą mouseX i mouseY możemy pobrać aktualną pozycję myszy.
function draw(){
background(255);
text("Pozycja X: "+mouseX, 10, 10);
text("Pozycja Y: "+mouseY, 10, 30);
}
Za pomocą kilku linijek kodu możemy stworzyć szkic, na którym będziemy mogli rysować „na żywo” za pomocą myszy.
function setup() {
createCanvas(640, 480);
background(255);
fill(0);
}
function draw() {
if (mouseIsPressed){
circle(mouseX, mouseY, 20);
}
}
Instrukcja noLoop(), którą umieszczamy w funkcji setup() zapobiega wykonywaniu się funkcji draw() więcej niż jeden raz. Wykonywanie w pętli można potem przywrócić wywołując instrukcję loop() np. w odpowiedzi na jakieś zdarzenie np. kliknięcie myszą.
WebGL
Biblioteka p5.js znacznie ułatwia poruszanie się po przestrzeni 3D. Aby operować w przestrzeni 3D musimy użyć parametru WebGL przy tworzeniu płótna.
function setup() {
createCanvas(640, 640, WEBGL);
}
function draw() {
background(255);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(200, 300, 50);
}
Dodatkowe biblioteki zależne od p5.js
Mocną stroną p5.js są dodatki, które rozszerzają funkcjonalność biblioteki: https://p5js.org/libraries/ Jednym z nich jest p5.sound.js, który wykorzystaliśmy do generowania fali dźwiękowej z pliku audio. Na stronie p5.js można znaleźć projekty, które ułatwiają generowanie interaktywnych map, ilustracji 3D a nawet ASCII-Art.
Gotowe przykłady projektów p5.js
Gotowe przykłady szkiców ze strony p5.js z interaktywnym edytorem to dobre miejsce do nauki p5.js i ciekawe źródło inspiracji.
Odpowiedz lub skomentuj