Share
p5.js este o bibliotecă JavaScript pentru artiști, designeri și educatori, cu un accent special pe artele vizuale. Este o modalitate extrem de ușoară de a crea în browser un program interactiv de artă, animație și prototip.
Este puternic inspirat de prelucrarea limbajului de programare, care se referă la ea însăși ca o "schiță de software flexibilă". Procesarea a fost creată în 2001 cu scopul de a învăța nonprogramatorii cum să codifice, dar de atunci a devenit limba de alegere pentru zeci de mii de artiști, designeri și studenți.
p5.js, cu toate acestea, are un scop ușor diferit în minte. p5 aduce puterea și simplitatea procesării pe web. Acest tutorial vă va arăta cum să vă creați prima schiță "p5" și câteva lucruri distractive pe care le puteți face cu ea.
Deoarece p5 este proiectat pentru web, vom avea nevoie de o pagină Web. Creați un nou director pe computerul dvs. și creați-l index.html dosar în interiorul acestuia. Nu avem nevoie de mult aici, doar biții standard și bobii.
Prima mea schiță p5
Apoi, vom avea nevoie de biblioteca p5, pe care o putem obține cu ușurință de pe pagina de descărcare p5. Avem nevoie doar de biblioteca de bază, așa că descarcă doar versiunea cu un singur fișier a p5.
Puneți fișierul descărcat în același director ca și fișierul HTML. Putem apoi să o referim în HTML-ul nostru, astfel:
Prima mea schiță p5
De asemenea, vom avea nevoie de un fișier JavaScript pentru schița noastră. O schiță este Prelucrarea vorbirii pentru desenul sau animația pe care o creăm cu p5. Faceți un alt fișier, din nou în același director, și sunați-l mi-primul-sketch.js. Acest lucru trebuie să fie menționat după biblioteca p5, astfel încât scriptul nostru cunoaște toate metodele furnizate de p5.
Asta e tot ce este acolo! Acum suntem gata să începem să ne creați capodopera.
p5 ne oferă două metode care sunt esențiale la crearea unei schițe: înființat() și a desena(). Probabil, puteți ghici ce este pentru fiecare, dar ele au o diferență importantă ascunsă. Deschide mi-primul-sketch.js și adăugați următoarele:
Accentsconagua
// Configurarea funcției de configurare a codului () console.log ('Hi from setup!'); // Drawing function code draw () console.log ('Hi din draw!'); Acum, chiar dacă tocmai am definit aceste funcții și nu am făcut nimic altceva, deoarece p5 ne aștepta să facem acest lucru, va fi executat automat în momentul încărcării paginii. Deschide-ți index.html în browserul dvs. preferat și deschideți consola JavaScript. Iată ce văd:
După cum puteți vedea, ambele funcții au fost numite automat, dar înființat() funcția a fost apelată o singură dată, în timp ce a desena() a fost numit peste si peste din nou - 768 de ori in cateva secunde! Vom vedea importanța acestui lucru mai târziu.
OK, pentru a începe desenul, vom cere ceva de care toți artiștii au nevoie: o pânză. Tot ce trebuie să facem este să folosim p5 createCanvas () și dați-i o lățime și o înălțime ca argumente. Unde ar trebui să numim această funcție? înființat() desigur.
setarea funcției () // Creați o pânză 200px înălțime și 200px înălțime createCanvas (200, 200);
Dacă vă actualizați pagina, nu veți vedea nimic diferit. Acest lucru se datorează faptului că panza este transparentă în mod prestabilit. Să-l molid cu puțină culoare. Ce zici de un roșu frumos? Puneți această linie în înființat() de asemenea.
fundal ( 'roșu');
p5 este suficient de inteligent pentru a ști dacă am folosit un nume de culoare HTML sau o valoare hexagonală, adică fundal ( '# FF0000'); este la fel de valabil.
Să desenăm. Avem câteva forme încorporate la dispoziția noastră. Să începem cu un dreptunghi de bază. În funcția noastră de tragere, putem scrie următoarele. Rețineți că toate coordonatele încep la (0, 0), care este colțul din stânga sus al pânzei.
desenul funcției () rect (0, 0, 50, 50);
Dacă actualizați pagina, ar trebui să vedeți acest lucru: un dreptunghi care începe la (0, 0) și are o lățime de 50 de pixeli și o înălțime de 50 de pixeli (un pătrat).
Acest pătrat poate fi colorat la fel de ușor ca fundalul nostru. Tot ce trebuie să facem este să specificăm o culoare de umplere inainte de tragem dreptunghiul. Hai să folosim un hexaj de data asta.
umple ( '# CC00FF'); rect (0, 0, 50, 50);
Acum avem un pătrat purpuriu. Nu este chiar o capodoperă, dar ajungem undeva. Ce zici de o altă formă? Un cerc, te-am auzit spunând? Nici o problema.
// Desenați o elipsă de 25px din partea de sus și / 25px din stânga marginii pânzei. // Elipsa are o înălțime de 25px și o latură de 25px, făcând un cerc. elipsă (25, 25, 25, 25);
Veți observa că cercul nostru nu a fost desenat doar pe partea de sus a dreptunghiului nostru, dar este, de asemenea, aceeași culoare ca și dreptunghiul.
Acest lucru se datorează faptului că ordinea în care numim aceste funcții este extrem de importantă. Dacă ar fi tras dreptunghiul după elipsă, nu vom vedea cercul deloc așa cum ar fi fost pictat. În ceea ce privește culoarea de umplere a cercului, este aceeași cu pătratul deoarece orice formă trasată după completati() se va folosi această culoare. Pentru a schimba culoarea cercului, pur și simplu apelați din nou culoarea de umplere cu o valoare diferită.
umple ( '# 66CC66'); elipsă (25, 25, 25, 25);
Acum avem acest lucru:
Hmm, încă nu este incitant. Să vedem ce putem face. Acum, amintiți-vă majoritatea codului nostru aici este conținut în a desena() și așa cum am văzut mai înainte, orice lucru din funcția de tragere este chemat mereu și repetat. Deci, în mod esențial, pătratul și cercul nostru sunt trase peste și peste din nou pe partea de sus a pătratului și a cercului care au fost trase în apelul anterior al funcției de tragere.
Dar dacă ne-am desenat de fiecare dată într-un loc diferit?
Pentru a vă desena forma într-un loc diferit, puteți fi tentați să schimbați valorile coordonatelor. Acest lucru este perfect acceptabil și o modalitate excelentă de a avea control complet asupra desenului.
Există, de asemenea, o alternativă. Putem schimba decalajul întregii panze, ceea ce înseamnă că putem schimba originea, coordonatele de sus-stânga (0, 0) cu altceva. Rezultatul este că formele noastre sunt desenate cu această compensare. Dacă trebuia să scriem traduce (10, 10); am fi terminat cu asta.
Rețineți că formele noastre sunt acum trase 10 px din partea stângă și 10 px din partea de sus.
Acest lucru nu ne-a fixat cu adevărat problema inițială a formelor care s-au atras în mod repetat, dar dacă ar fi să schimbăm originea pânzei cu fiecare a desena() apel? Formele ar fi trase într-o poziție diferită de fiecare dată. Dar ce poziție? Și cum am veni cu un altul de fiecare dată a desena() se numește? Din fericire, p5 ne-a acoperit cu întâmplător() funcția - o modalitate ușoară de a genera un număr aleatoriu. Vom folosi asta pentru a schimba aleator compensarea pânzei noastre.
funcția draw () // Offset the canvas // random (0, lățime) returnează o valoare între // 0 și lățimea panzei. // La fel ca la întâmplare (0, înălțime) pentru înălțime. traduce (aleatoare (0, lățime), aleatoare (0, înălțime)); // Codul existent aici
Acest lucru ne oferă o versiune animată a acestui lucru:
Whee! Puteți găsi această animație puțin repede. Acest lucru se datorează faptului că p5 desenează formele noastre cât mai repede posibil a desena() fiind chemat din nou și din nou. Dacă doriți să încetiniți acest lucru puțin, puteți schimba rata cadrelor pentru a reduce frecvența în care acestea se află a desena() se numește. Apelați-vă framerate () în funcția de configurare.
setarea funcției () createCanvas (200, 200); fundal ( 'roșu'); framerate (5);
Asa e mai bine. Din nou este un pic plictisitor cu pătratul și cercul întotdeauna fiind unul peste celălalt. Să încercăm să ne rotim formele pentru a face lucrurile mai interesante. Deci, cum facem asta? Da, ai ghicit, p5 ne-a acoperit din nou. Mai întâi spunem p5 că vrem să rotim folosind grade în loc de radiani și că dorim să ne rotamăm aleatoriu înainte de a desena fiecare formă.
angleMode (GRADE); // folosește rotația globală DEGREES constantă (aleatoare (1, 360)); // rotiți la umplerea unghiului aleator ('# CC00FF'); rect (0, 0, 50, 50); rotiți (aleatoare (1, 360)); umple ( '# 66CC66'); elipsă (25, 25, 25, 25);Am creat un monstru.
Sunt destul de sigur că am avut o cămașă în 1991 cu același model pe ea ...
Nu, greseala mea, avea niște triunghiuri galbene pe ea. Să mergem și să adăugăm ceva.
// rotație triunghi galben poziționată aleatoriu (aleatoriu (1, 360)); umple ( 'galben'); // 3 perechi de triunghiuri triunghiulare puncte (25, 0, 50, 50, 0, 50);
Minunat. Tricoul de 90 de ani sau Jackson-ul modern Pollock? Depinde de tine. Arta este în ochii privitorului, așa cum se spune.
Sper că ați văzut din acest tutorial cât de ușor este să începeți desenarea în browser cu p5.js. p5 are mult mai multe metode utile și convenabile pentru a ne ajuta să desenăm forme, să animăm și să manipulăm datele introduse de utilizatori. Dacă sunteți interesat să aflați mai multe, vizitați pagina de referință p5 sau vizitați cursul Envato Tuts + Interactive Art With p5.js.
Pentru referință, iată sursa completă pentru schița noastră p5:
setarea funcției () createCanvas (200, 200); fundal ( 'roșu'); framerate (5); funcția trage () traduce (aleatoare (0, lățime), aleatoare (0, înălțime)); angleMode (GRADE); rotiți (aleatoare (1, 360)); umple ( '# CC00FF'); rect (0, 0, 50, 50); rotiți (aleatoare (1, 360)); umple ( '# 66CC66'); elipsă (25, 25, 25, 25); rotiți (aleatoare (1, 360)); umple ( 'galben'); triunghi (25, 0, 50, 50, 0, 50);
