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 tredje workshopen vil vi utforske interaktive og estetisk tiltalende visuelle fremstillinger.
Del 1: Interaktivt Sirkelnett
For å begynne denne workshopen, vil vi bygge videre på konseptene fra de to forrige workshopene for å skape et rutenett av sirkler som blir større når du beveger musen nærmere (kode fra p5.js-bruker jpcaldwell). Dette oppnås ved bruk av avstands- og map-funksjonene fra p5.js som ble introdusert i den siste workshopen. Vi implementerte også en gradient med sirkler ved gradvis å øke de røde og blå verdiene fra venstre til høyre.
Del 2: Sykliske animasjoner
I neste del vil vi bruke sin- og cos-funksjoner for å skape objekter som beveger seg i en syklus (kode fra p5.js wavemaker-eksempelet).I dette tilfellet har vi en sirkel som beveger seg i midten av skjermen i henhold til sin- og cos-funksjonene, og posisjonen blir sporet ved hjelp av frameCount-funksjonen, som teller antall bilder utført siden programmet startet. Vinkelen som brukes i disse funksjonene kan endres basert på musens x- og y-posisjon.
Del 3: Bølgeanimasjon
Selv om bølgeanimasjonen nedenfor ser kompleks ut, er den ganske enkelt en kombinasjon av de to siste delene. Hver sirkel bruker den nøyaktige samme sykliske animasjonen fra del 2, men arrangert i det samme rutenettmønsteret som del 1.
Del 4: Støy og Dynamisk Størrelse med Bølgeanimasjon
For å gjøre bølgeanimasjonen vår litt mer interessant, vil vi introdusere den samme dynamiske størrelsesfunksjonaliteten som del 1 og støy på syklusanimasjonen. p5.js-funksjonen noise er lik random-funksjonen, men produserer mer organiske følelser av tilfeldige tall.
Del 5: Støyorbit del 1
Ved å bruke de samme konseptene fra de første fire delene av denne workshopen, vil vi gjenskape en støyorbit (kreditt til Stevan Dedovic for koden). Selv om denne animasjonen ser kompleks ut, kan den enkelt brytes ned i tre deler. Den første delen er rett og slett å lage innestengte, sirkulære polygoner, som sett nedenfor.
Del 6: Støyorbit del 2
Deretter må vi forvrenge polygonene ved hjelp av støyfunksjonene. Hver gang siden oppfriskes, vil forvrengefunksjonen produsere litt forskjellig forvrengning for hvert polygon.
Del 7: Støyorbit del 3
Nå må vi bare få polygonene til å bevege seg! Dette vil bli oppnådd ved bruk av samme type syklisk animasjon med sin- og cos-funksjonene som deler 2-4 av denne workshopen. Ganske enkelt, vi vil legge til litt støy på z-aksen og dytte sirkelen i et syklisk mønster. I eksempelet nedenfor kan du øke intensiteten på dyttingen ved å bevege musen til høyre, men mønsteret vil alltid bevege seg tilbake til sin opprinnelige posisjon på grunn av sin- og cos-funksjonene.