Creative Computing Hub Oslo (C2HO) presenterer en serie workshops med fokus på å komme i gang med kreativ koding i p5.js, et nybegynnervennlig JavaScript-bibliotek med et fullstendig sett av funksjoner for tegning og lydproduksjon. I den andre workshopen vil vi utdype grunnlaget i p5.js, med fokus på å manipulere bilder, spille av og generere lyd, samt bruke klasser.
Del 1: Klasser
Ved å fortsette eksempelet fra den forrige workshopen, vil vi nå se på hvordan man håndterer flere smilefjesobjekter. En løsning på dette er å bruke parallelle arrayer for alle objektegenskapene, men en mye ryddigere måte å gjøre dette på er ved bruk av en class. I eksempelet nedenfor er alle verdier relatert til smilefjeset lagt til som klassevariabler og erklært i "constructor"-funksjonen til klassen "Smiley". "drawSmiley"-funksjonen og koden for å flytte smilefjeset fjernes, og all funksjonalitet relatert til smilefjeset legges til klassen i funksjonene "move" og "draw", henholdsvis. Når disse trinnene er tatt, kan vi opprette så mange smil på skjermen som vi ønsker i "setup"-funksjonen, og kalle på "move" og "draw"-funksjonene for hvert smil i hoved "draw"-løkken.
Del 2: Klassefunksjoner
Nå som vi har en smilefjesklasse, kan vi enkelt legge til mer funksjonalitet til smilefjeset ved å legge til nye klassefunksjoner. I dette tilfellet er det lagt til en sti til hver av våre genererte smil som består av sirkler som blir gradvis mindre jo lengre de er fra det bevegelige smilefjeset. Når funksjonen er opprettet i klassen, må funksjonen settes inn i "draw"-løkken på samme måte som de andre klassefunksjonene.
Del 3: Lydfiler
I denne seksjonen vil vi ta en kort titt på bruk av SoundFiles i p5.js. Det første og viktigste trinnet er å laste inn lydfiler ved hjelp av preload-funksjonen, som kjører før noen annen kode. Hvis du skulle laste inn filene i en annen funksjon, slik som "draw"- og "setup"-funksjonene, er det sannsynlig at udefinert oppførsel vil skje. Deretter, ved å gjøre små redigeringer i koden, kan du tilordne en lydfil til hvert smil og spille dem ved hjelp av play-funksjonen. I eksemplet nedenfor har hvert smil en trommesample festet til det som spiller når de spretter av et hjørne av skjermen. Du kan spille disse prøvene ved å klikke og holde på lerretet nedenfor.
Del 4: Introduksjon til bilder
Introduksjon til bilder p5.js inneholder et omfattende bibliotek for lasting og manipulering av bilder. Liknende til lydfilene, vil C2HO-logoen først bli lastet ved å bruke preLoad-funksjonen. Deretter vil vi endre størrelsen på bildet til 100 x 100 piksler. Vi vil så tegne bildet hvor enn brukeren setter musen på lerretet, og tillate brukeren å sette bakgrunnen tilbake til svart ved å klikke på lerretet. Du kan prøve dette selv nedenfor.
Del 5: Avanserte bildefunksjoner
Ved å bruke get-funksjonen kan vi hente fargen på bildet. I eksemplet nedenfor kaller vi get-funksjonen når brukeren klikker på en farge på C2HO-logoen på lerretet. Når fargen er klikket kan du da tegne på lerretet med fargen du tidligere klikket på.
Ved å bruke get-funksjonen kan vi også hente fargeverdien til hver piksel og deretter bruke set- og updatePixels-funksjonene til å endre pikselfargen. I eksempelet nedenfor inverterte vi pikselverdiene for hele C2HO-logoen samtidig som vi beholdt den samme draw-funksjonen som i eksemplet over.
Del 6: Lydgenerering
For å avrunde denne workshopen, vil vi ta en dypere dykk inn i p5-lydbiblioteket og lære grunnleggende lydgenerering. For å starte, vil vi generere en grunnleggende sinus bølge oscillator ved hjelp av SinOsc function. Vi vil også generere klang og bruke process-funksjonen til å justere parametrene for klangen og koble klangen til sinus bølgeoscillatoren. Ved å bruke map-funksjonen, vil vi kartlegge høyde og bredde på lerretet til passende verdier for oscillatorens frekvens og amplitude ved hjelp av freq- and amp-funksjonene. Du kan se og samhandle med eksempelet nedenfor ved å klikke og holde på lerretet.