Čo je P5.js?

P5.js je priateľský nástroj na učenie sa kódovať a robiť počítačové umenie. Je to bezplatná knižnica JavaScript s otvoreným zdrojovým kódom, ktorú vytvorila inkluzívna a starostlivá komunita. P5.js víta umelcov, dizajnérov, začiatočníkov, pedagógov a kohokoľvek iného!

p5.js uprednostňuje dostupnosť, inkluzívnosť, komunitu a radosť. Vďaka tomu je skicovanie s kódom rovnako intuitívne, ako skicovanie v skicári. p5.js podporuje audiovizuálne, interaktívne a experimentálne diela pre web. Je prístupná v mnohých jazykoch a má rozsiahlu dokumentáciu s vizuálnymi príkladmi. Kódovanie môžete začať hneď teraz vo webovom editore a existuje množstvo návodov, ktoré vám pomôžu. P5.js môžete tiež rozšíriť o mnoho knižníc vytvorených komunitou. P5.js vždy hľadá prispievateľov a oceňuje zapojenie do všetkých foriem.

P5.js nájdete na tejto adrese

Úvod do práce s P5.js

Keď kliknete na Start Coding (vľavo dole), zobrazí sa na ľavej strane obrazovky kód programu a na pravej strane obrazovky plocha, na ktorú program kreslí. čo ste naprogramovali.

Na začiatku je vľavo nasledujúci kód:

V setup sú nastavenia, ktoré sa vykonajú raz po spustení programu a v draw sa vykresľuje opakovane do nekonečna, to čo sa tam nachádza. Program sa spustí kliknutím na šipku vľavo hore.

Canvas je po anglicky plátno, príkaz createCanvas vytvorí plátno (plochu) na ktorú sa bude kresliť, s rozmermi 400×400 pixelov.

Background je pozadie, ktorým sa celé plátno vyplní, parameter je farba pozadia, v tomto prípade odtieň sivej farby. Pokiaľ chceme, aby pozadie bolo farebné, použije sa kódovanie RGB (red, green, blue). Nasledujúce príkazy vykreslia červené, zelené a modré pozadie:

background(255,0,0); background(0,255,0);background(0,0,255);

Vyskúšajte rôzne nastavenia týchto parametrov.

Program na kreslenie kruhov na náhodných miestach:

function setup() {
createCanvas(400, 400);
frameRate(2)
background(200,100,100);
}

function draw() {
fill(100,200,50)

circle(random(1,400),random(1,400),50)
}