I Dag vil jeg forklare p5.js. Jeg er også en p5.js nybegynner så la oss prøve å være kjent med p5.js sammen!

p5.js er skrevet I JavaScript, men opprinnelig Er Det Behandling (https://processing.org/). Processing er en visuell koding verktøy for visuell kunst. Det interessante er at behandling ikke bare er for utviklere, men også kunstnere, designere, forskere og de som ønsker å nyte å lage kunst. p5.js brukes I JavaScript, slik at vi kan bruke DEN MED DOM.

følgende er p5.js offisielle nettsted.
https://p5js.org/

hvordan bruke p5.js

La oss lage en enkel ting i dag. Vårt mål er å vite små tips og lage en animasjon.

Trinn 1: Lag EN HTML-fil og opprett en lenke til p5.js og Din Egen JavaScript-fil.

den enkle måten å få en link er å gå til offisielle nettstedet og finne CDN. Kopier noe … / p5.min.js og lim den inn I HTML.

over bildet.

Trinn 2: Lag en sirkel

creativeCanvas (bredde på lerretet, høyde på lerretet) – funksjonen setter lerretstørrelsen.

bakgrunn () – funksjonen setter en farge på lerretet vi lager. * Jeg bruker fargeparameter, men du kan bruke andre parametere. Vennligst referer til det offisielle nettstedet (https://p5js.org/referanse/ # / p5 / bakgrunn).

noStroke () – funksjonen betyr ingen omriss av ellipsen.

ellipse (x plassering av ellipsen, y plassering av ellipsen, bredden på ellipsen, høyden på ellipsen) .funksjonen trekker ellipsen.

ikke glem Å åpne HTML i nettleseren din!

skriptet ditt.js

trinn3: la oss gjøre ellipsen flytte!

tegn () funksjonsløkker for alltid. Dermed er det eneste du trenger å gjøre, å lage y-plasseringssett 0 og deretter øke det. Deretter får du en animasjon som ellipsen beveger seg fra toppen til bunnen av lerretet.

skriptet ditt.Js

Trinn4: Lag mange prikker og flytt dem uendelig

La oss gjøre det siste trinnet her.

random () – funksjonen gjør et tilfeldig flytende tall. I koden min setter jeg «tilfeldig (bredde)». Dette betyr at de vil returnere 0 opp til 500 som er maksimal bredde på lerretet. Hvis det bare er tilfeldig (), ville det sett fra 0 opp til 1. Hvis det er tilfeldig(6, 10), vil det returnere 6 til 10. Det er ganske lett å forstå, er det ikke?

det er det i dag! Jeg håper at du kan få et tips fra innlegget mitt. Jeg vil prøve å gjøre mer kompliserte ting og dele min erfaring her igjen senere.