ma el akarom magyarázni a p5-öt.js. Én is p5 vagyok.js kezdő tehát próbáljuk meg megismerni a p5-öt.js együtt!

p5.a js JavaScript-ben van írva, de eredetileg feldolgozás alatt áll (https://processing.org/). A feldolgozás a vizuális művészetek vizuális kódoló eszköze. Érdekes, hogy a feldolgozás nem csak a fejlesztőknek szól, hanem a művészeknek, a tervezőknek, a kutatóknak és azoknak is, akik szeretnék élvezni a művészetet. p5.js használják JavaScript, így tudjuk használni a DOM.

a következő a p5.js hivatalos oldal.
https://p5js.org/

A p5 használata.js

készítsünk egy egyszerű dolgot ma. Célunk, hogy ismerjük a kis tippeket, és animációt készítsünk.

1.lépés: készítsen egy HTML fájlt, és hozzon létre egy linket a p5-re.js és saját JavaScript fájl.

a link megszerzésének egyszerű módja a hivatalos webhely megkeresése CDN. Vettem valamit … / p5.min.js és illessze be a HTML.

a kép felett.

2.lépés: készítsen egy kört

creativeCanvas(a vászon szélessége, a vászon magassága) funkció beállítja a vászon méretét.

háttér () függvény beállítja a vászon színét. * Színes paramétert használok, de más paramétereket is használhat. Kérjük, olvassa el a hivatalos oldalt (https://p5js.org/reference/#/p5/background).

noStroke() függvény azt jelenti, nincs körvonala az ellipszis.

ellipszis(x az ellipszis helye, y Az ellipszis helye, az ellipszis szélessége, az ellipszis magassága) .függvény felhívja az ellipszis.

ne felejtsd el megnyitni a HTML-t a böngészőben!

3. lépés: tegyük meg az ellipszis mozgását!

draw() függvényhurkok örökre. Így az egyetlen dolog, amit meg kell tennie, hogy y-helykészleteket készítsen 0 majd növelje. Ezután kap egy animációt, amelyet az ellipszis a vászon tetejétől az aljáig mozog.

4. lépés: készíts sok pontot és mozgasd őket végtelenül

tegyük meg az utolsó lépést itt.

random() függvény véletlenszerű lebegő számot ad. A kódomban a “véletlenszerű(szélesség)”beállítást állítottam be. Ez azt jelenti, hogy visszatérnének 0 akár 500 Ez a vászon maximális szélessége. Ha ez csak véletlen (), akkor állítja 0-tól 1-ig. Akkor már észreveheti…ha véletlenszerű (6, 10), akkor 6-tól 10-ig tér vissza. Elég könnyű megérteni, nem?

Ez ma van! Remélem, hogy kap egy tippet a posztomból. Megpróbálok bonyolultabb dolgokat csinálni, és később újra megosztom itt a tapasztalataimat.