9. Библиотека p5.js¶
На језику JavaScript постоји библиотека p5.js, која је направљена са циљем да уметницима и дизајнерима олакша генерисање дигиталних слика и анимација. Библиотека свакако може да буде интересантна и у настави програмирања. Ако намеравате да пишете p5.js програме, погледајте брзи увод и референтни приручник.
JavaScript програме који користе библиотеку p5.js можемо да мењамо и извршавамо на станицама Петљадок курсева и приручника. Један Петљин курс у коме се интензивно користе овакви програми је Алгоритамска уметност.
За додавање p5.js програма у курс или приручник, користи се директива p5js
. Директива p5js
има следеће опције:
height
, дефинише висину едитораwidth
, дефинише ширину едитораcanvaswidth
, дефинише ширину простора за цртање (платна)
Након опција следи један празан ред, испод ког се пише тело директиве p5js
. У телу директиве се наводи Јава скрипт кôд, који ће бити приказан у едитору и који ће корисник моћи да мења и извршава. Као и код других директива, и овде се тело директиве пише једнако увучено као и опције.
Овде је дат само један пример p5.js програма
.. p5js:: 5_part2_kod01
:width: 1000
:height: 580
:canvaswidth: 500
let speed = 10;
let diameter = 20;
let x, y;
function setup() {
createCanvas(450, 450);
smooth();
x = width/2;
y = height/2;
}
function draw() {
x += random(-speed, speed);
y += random(-speed, speed);
ellipse(x, y, diameter, diameter);
}
Испод можете да видите како функционише наведени кôд у браузеру. Кликом на дугме play
отвара се простор за цртање, у коме се приказује цртеж, односно анимација.