astăzi vreau să explic p5.js. Sunt, de asemenea, un p5.JS începător deci, să încercăm să fim familiarizați cu p5.js împreună!

p5.js este scris în JavaScript, dar inițial este de procesare (https://processing.org/). Procesarea este un instrument de codificare vizuală pentru artele vizuale. Interesant este că prelucrarea nu este numai pentru dezvoltatori, ci și artiști, designeri, cercetători și cei care doresc să se bucure de a face arte. p5.js este folosit în JavaScript, astfel încât să îl putem folosi cu DOM.

Următorul este p5.site-ul oficial js.
https://p5js.org/

cum să utilizați p5.js

să facem o chestie simplă astăzi. Scopul nostru este să cunoaștem sfaturi mici și să facem o animație.

Pasul 1: Creați un fișier HTML și creați un link către p5.js și propriul fișier JavaScript.

cea mai ușoară modalitate de a obține un link este să accesați site-ul oficial și să găsiți CDN. Copiază ceva … / p5.min.JS și lipiți-l în HTML.

imaginea de mai sus.

Pasul 2: Faceți un cerc

creativeCanvas(lățimea pânzei, înălțimea pânzei) funcția setează dimensiunea pânzei.funcția

background() stabilește o culoare a pânzei pe care o facem. * Eu folosesc parametru de culoare, dar puteți utiliza alți parametri. Vă rugăm să consultați site-ul oficial (https://p5js.org/referință/#/p5/fundal).

noStroke() funcția înseamnă nici o schiță a elipsei.

elipsă(x locația elipsei, y locația elipsei, lățimea elipsei, înălțimea elipsei) .funcția atrage elipsa.

nu uitați să deschideți HTML-ul în browser!

scriptul tău.js

Pasul 3: să facem elipsa să se miște!

draw() funcția bucle pentru totdeauna. Astfel, singurul lucru pe care trebuie să-l faceți este să faceți seturi de locație y 0 și apoi să îl măriți. Apoi, veți obține o animație pe care elipsa dvs. se mișcă de sus în partea de jos a pânzei.

script-ul.js

Pasul 4: Faceți multe puncte și mutați-le infinit

să facem pasul final aici.

random() funcția face un număr plutitor aleatoriu. În codul meu, am setat”random(lățime)”. Acest lucru înseamnă că s-ar întoarce 0 până la 500 care este lățimea maximă a pânzei. Dacă este doar aleatoare (), ar seturi de la 0 până la 1. Apoi, s-ar putea observa deja…dacă este aleatoare(6, 10), s-ar întoarce 6 până la 10. Este destul de ușor de înțeles, nu-i așa?

asta este astăzi! Sper că puteți obține un sfat din postarea mea. Voi încerca să fac lucruri mai complicate și să împărtășesc din nou experiența mea aici mai târziu.