Creative Computing Hub Oslo (C2HO) presenterer en serie workshops fokusert på å komme i gang med kreativ koding i p5.js, et nybegynnervennlig JavaScript-bibliotek med et komplett sett av funksjoner for tegning og lydproduksjon. I den fjerde workshopen vil vi utforske avanserte animasjonsteknikker, inkludert 3D-modellering.
Del 1: Svevende partikler
For den første delen av denne workshopen, vil vi bruke konsepene lært fra de tre foregående workshopene til å kopiere det tilkoblede vertices eksemplet fra Louis Hoebregts. Først må vi skape en rekke svevende partikler på skjermen. Vi vil starte med å deklarere en partikkelklasse, sammen med klassefunksjoner for å flytte partikkelen, håndtere hva som skjer når den treffer en vegg, og til slutt tegne en partikkel. Deretter vil vi lage en array av partikler som vil bevege seg i sekvens, som du kan se nedenfor.
Del 2: Koble punktene
Med koordinatene deklarert av createVector-funksjonen i hver partikkelklasse, kan vi bruke dist-funksjonen for å beregne avstanden mellom hver partikkel. Ved å bruke denne informasjonen, vil vi tegne linjer som forbinder partiklene våre når de kommer nært nok hverandre. Ved å bruke alfa-verdiene i stroke-funksjonen kan vi også gradvis redusere linjens gjennomsiktighet når partiklene beveger seg lengre fra hverandre, og øke den ettersom de kommer nærmere. I eksemplet nedenfor har vi også randomisert radiene til hver partikkel for å gi illusjonen av dybde.
Del 3: Brukerinteraksjon
Nå kan vi legge til noe brukerinteraksjon! I eksemplet nedenfor vil det å bevege musen til venstre eller høyre ende av skjermen senke terskelen for partikkelforbindelser, mens det å bevege musen til toppen eller bunnen av skjermen vil legge til flere partikler.
Del 4: 3D-Grafikk og Orbital Kontroll
Nå til noe litt annerledes! p5.js bruker WEBGL for mer komplekse oppgaver som skyggelegging og 3D-grafikk. Det er mange tilgjengelige 3D-former i WEBGL, inkludert cones og boxes, i tillegg til innebygde funksjoner som gjør 3D-modellering enklere. For eksempel lar orbitControl-funksjonen brukere enkelt bevege seg rundt en 3D-skisse ved bruk av musen. I dette eksemplet fra p5.js brukes translate-funksjonen for å plassere flere kjegle- og boksobjekter i en kuppelformasjon i 3D-rommet. Du kan se og interagere med dette eksemplet nedenfor.
Del 5: Introduksjon til Shaders
Shaders er programmer som tillater behandling av mange piksler i en skisse ved bruk av WEBGL, noe som er nyttig for effekter som gradienter, uskarphet og støy. De to variantene av shader er vertex shader, som påvirker 3D-modeller, og fragment shader, som påvirker fargeutgangen. I denne opplæringen fra p5.js lages en grunnleggende gradient shader ved bruk av en vertex og fragment shader. Du kan se resultatet nedenfor.
Del 6: 3D-animasjon
Nå skal vi kombinere 3D-grafikk med shader. I dette eksemplet fra p5.js, blir uskarphetseffekten brukt ettersom en kuleobjekt kommer nærmere skjermen. Dette oppnås ved bruk av frameBuffer-funksjonen, som skaper lag av uskarphet. Forskjellige belysninger blir brukt på kulene for å ytterligere gi en illusjon av dybde, inkludert ambient light og directional light, og uskarpheten oppnås med vertex og fragment shader. Du kan se det endelige resultatet nedenfor.