Creative Computing Hub Oslo (C2HO) presenterer en serie med workshops fokusert på å komme i gang med kreativ koding i p5.js, et JavaScript-bibliotek som er vennlig for nybegynnere med en full serie av tegne- og lydskapende funksjonaliteter. I den første workshopen vil vi fokusere på å undervise i grunnleggende bruk av p5.js, med fokus på tegning og animasjon.
Del 1: Introduksjon og Former
Del 1: Introduksjon og Former For å begynne med p5.js, må du forstå strukturen i utviklingsmiljøet. Når en ny fil blir opprettet, blir alltid to funksjoner definert: setup og draw.
Setup-funksjonen er den første funksjonen som kjører når koden kjøres. Her kan du definere eventuelle variabler som ikke trenger å endres dynamisk under kjøring av koden. Setup-funksjonen inkluderer automatisk createCanvas, som brukes for å bestemme bredden og høyden på lerretet du skal tegne på.
Tegn-funksjonen kjører kontinuerlig i en løkke frem til programmet avsluttes. Det er også mulig for tegn-funksjonen å bare kjøre én gang ved bruk av noLoop function. funksjonen. Som standard blir tegn-funksjonen kalt 60 ganger per sekund. Dette kan endres ved å kalle frameRate-funksjonen.
Nå skal vi lære å tegne grunnleggende former. Under kan du se et utvalg av forskjellige former som p5.js lar deg tegne med funksjoner, inkludert rectangles, ellipses, og arcs.
Del 2: Tegn et Smilende Ansikt
Nå som vi vet hvordan vi tegner former, kan vi nå lage en mer estetisk tiltalende tegning. I denne workshopen kommer vi til å bruke et smilende ansikt som et eksempel. For å begynne, vil vi sørge for at det smilende ansiktet vil være på samme relative posisjon på lerretet uansett hvilken bredde og høyde vi setter for lerretet. For å gjøre dette, bruker vi width- og height-variablene som er definert av p5.js ved parameterne i createCanvas-funksjonen.
Translate-funksjonen kan nå brukes sammen med width- og height-variablene for å flytte formene vi skal tegne slik at de tegnes i sentrum av lerretet. Dette oppnås ved å skrive "translate(width/2, height/2)" før formene tegnes.
Etter at vi har oversatt til sentrum, kan vi begynne å tegne vårt smilende ansikt ved først å starte med sirkelen for ansiktet. For å endre fargen på en hvilken som helst form, bruker vi fill-funksjonen. For å sørge for at formateringen for alle former er forskjellige (inkludert fyll og randinnstillinger), bør push- og pop-funksjonene brukes før og etter tegning av hver form, henholdsvis.
Deretter tegnes øynene med 2 ellipser. Det er verdt å merke seg at bredden og høyden på alle former inne i det smilende ansiktet er satt i forhold til diameteren på den ytre sirkelen, for å tillate en dynamisk størrelse på formen. For å fjerne den svarte kanten rundt ellipsene, kan noStroke-funksjonen brukes.
Til slutt tegnes en bue for smilet. For å fjerne fyllfargen, kan du bruke noFill-funksjonen. For å justere tykkelsen på smilet, kan du bruke strokeWeight-funksjonen.
Når disse formene er tegnet, er et ferdig smilende ansikt tegnet, som du kan se et eksempel på nedenfor.
Del 3: Tilfeldige Smilende Ansikter
Nå som vi har tegnet vårt smilende ansikt, kan vi begynne å redigere dets funksjoner. For å holde koden ryddig, skal vi begynne med å flytte all koden som brukes til å tegne det smilende ansiktet til en funksjon utenfor draw-funksjonen. Vi kan deretter sende forskjellige parametere til denne funksjonen for å skape forskjellige smilende ansikter. Random-funksjonen lar oss generere tilfeldige verdier for disse parameterne for å skape interessante og uforutsigbare tegninger. For hver gjennomgang av tegne-loopen (draw loop), vil vi generere et nytt smilende ansikt med en tilfeldig x-koordinat, y-koordinat og diameter, som du kan se nedenfor.
Del 4: Rutenett av Smilende Ansikter
For å kontrastere med de tilfeldig størrelsesmerte smilende ansiktene, skal vi nå tegne noe litt mer strukturert med andre tilfeldige elementer. Nedenfor kan du se koden for å lage et rutenett med smilende ansikter, alle med sine egne tilfeldig genererte ansikts- og øyefarger.
Del 5: Introduksjon til Animasjon, Del 1
Vi kan nå begynne å gi vårt smilende ansikt liv gjennom animasjon. Som nevnt ovenfor kjører tegn-funksjonen (draw function) kontinuerlig i en løkke, noe som gjør at vi kan lage sømløse animasjoner ved å endre variabler med små inkrementer. I koden nedenfor kan du se hvordan du kan tilbakestille et smilende ansikt før det går ut av lerretets kant.
Del 6: Introduksjon til Animasjon, Del 2
For å utforske animasjon ytterligere, kan vi også endre tilbakestillingsfunksjonaliteten ovenfor til en "sprettefunksjonalitet" for å sende vårt smilende ansikt i en annen retning etter kontakt med kanten av lerretet. Vi tilfeldiggjorde også x- og y-farten, smilende ansiktsfarge og øyenfarge, og flyttet også background-funksjonen fra tegn-funksjonen (draw function) til setup-funksjonen for å lagre alle smilene på skjermen. Du kan se resultatene nedenfor.
Del 7: Musinteraksjon
Musinteraksjon p5.js tillater også brukere å samhandle med lerretet også. I denne delen vil vi utforske de forskjellige måtene vi kan bruke musen vår for å interagere med p5.js-skisser.
Den boolske variabelen mouseIsPressed brukes i eksempelet nedenfor for å bare tegne et smilende ansikt hvis musen er trykket ned. Ved hjelp av systemvariablene mouseX og mouseY kan vi finne nøyaktig hvor musen vår er på lerretet. I skissen nedenfor bruker vi disse variablene til å tegne det smilende ansiktets sentroid der musen befinner seg på lerretet. Ved å bruke funksjonene mousePressed, mouseReleased og mouseDragged kan vi initiere forskjellige atferder for hver av disse handlingene. I eksempelet nedenfor vil bakgrunnen bli rød hvis musen trykkes, blå hvis musen dras, og grønn hvis musen slippes.
Del 8: Tastaturinteraksjon
p5.jstillater interaksjon med lerretet ved hjelp av tastaturet ditt. Den boolske variabelen keyIsPressed bkan detektere om en hvilken som helst tast er trykket ned. I skissen nedenfor, benyttes piltastene for å detektere om en piltast er trykket ned og flytter det smilende ansiktet i den retningen. Systemvariabelen key inneholder den siste tasten som ble tastet, mens systemvariabelen keyCode detekterer spesialtegn som mellomrom og piltaster. Tilsvarende, funksjonen keyTyped aktiveres når alle taster trykkes bortsett fra spesielle handlingstaster, og keyPressed aktiveres hver gang en hvilken som helst tast trykkes. I skissen nedenfor brukes keyTyped-funksjonen og key-variabelen når ikke-spesielle karakterer tastes for å vise den inntastede meldingen på skjermen, mens keyPressed-funksjonen og keyCode-variabelen brukes når backspace tastes for å slette den forrige karakteren i meldingen.