Садржај
Увод

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 отвара се простор за цртање, у коме се приказује цртеж, односно анимација.

(Created using Swinx, RunestoneComponents and PetljaDoc)
© 2022 Petlja
A- A+