Share
p5.js er et JavaScript-bibliotek for kunstnere, designere og lærere, med et spesielt fokus på bildekunst. Det er en ekstremt enkel måte for deg å lage interaktive kunstverk, animasjoner og prototyper i nettleseren.
Det er sterkt inspirert av programmeringsspråket Processing, som refererer til seg selv som en "fleksibel programvare skissebok". Prosessering ble opprettet i 2001 med det formål å lære ikke-programmere hvordan man skal kode, men siden da har det blitt språkvalg for tusenvis av kunstnere, designere og studenter.
p5.js har imidlertid et litt annet mål i tankene. p5 gir kraft og enkelhet til behandling på nettet. Denne opplæringen vil vise deg hvordan du lager din første p5 "skisse" og noen morsomme ting du kan gjøre med det.
Fordi p5 er designet for nettet, trenger vi en nettside. Lag en ny katalog på datamaskinen din og opprett en index.html filen i den. Vi trenger ikke mye her inne, bare standardbiter og bobber.
Min første p5-skisse
Deretter trenger vi selve p5-biblioteket, som vi lett kan få fra p5-nedlastingssiden. Vi trenger bare det grunnleggende biblioteket, så bare last ned den enkle filversjonen av p5.
Sett den nedlastede filen i samme katalog som HTML-filen din. Vi kan da referere det til i vår HTML slik:
Min første p5-skisse
Vi trenger også en JavaScript-fil for skissen vår. En skisse er Behandling snakker for tegningen eller animasjonen vi lager med p5. Lag en annen fil, igjen i samme katalog, og ring den my-første-sketch.js. Dette må refereres til etter p5-biblioteket, så vårt skript kjenner alle metodene som leveres av p5.
Det er alt oppsettet det er! Vi er nå klar til å begynne å lage vårt mesterverk.
p5 gir oss to metoder som er viktige når du lager en skisse: setup () og tegne(). Du kan sikkert gjette hva hver av dem er for, men de har en viktig skjult forskjell. Åpne opp my-første-sketch.js og legg til følgende:
Accentsconagua
// Oppsettskodefunksjonoppsett () console.log ('Hei fra oppsett!'); // Tegningskodefunksjonstegn () console.log ('Hei fra tegne!'); Nå, selv om vi nettopp har definert disse funksjonene og ikke gjort noe annet, fordi p5 ventet at vi skulle gjøre dette, vil det automatisk utføre dem når vi laster inn siden. Åpne din index.html i din favoritt nettleser og åpne JavaScript-konsollen. Her ser jeg:
Som du kan se, ble begge funksjonene kalt automatisk, men setup () funksjon ble kalt bare en gang, mens tegne() ble kalt om og om igjen-768 ganger innen få sekunder! Vi ser betydningen av dette litt senere.
OK, for å begynne å tegne, trenger vi noe som alle kunstnere trenger: et lerret. Alt vi trenger å gjøre er å bruke p5s createCanvas () funksjon og gi den en bredde og høyde som argumenter. Hvor skal vi ringe denne funksjonen fra? setup () selvfølgelig.
funksjonsoppsett () // Lag et lerret 200px bredt og 200px tall createCanvas (200, 200);
Hvis du oppdaterer siden din, ser du ingenting annet. Dette skyldes at lerretet er gjennomsiktig som standard. La oss granke den opp med litt farge. Hva med en fin rød? Fest denne linjen inn setup () også.
bakgrunn ( 'red');
p5 er klok nok til å vite om vi har brukt et HTML-fargenavn eller en hex-verdi, noe som betyr bakgrunn ( '# FF0000'); er like gyldig.
La oss få tegne. Vi har noen innbyggede former til disposisjon. La oss starte med et grunnleggende rektangel. I vår tegnefunksjon kan vi skrive følgende. Husk at alle koordinater starter ved (0, 0), som er det øverste venstre hjørnet av lerretet.
funksjonstegn () rekt (0, 0, 50, 50);
Hvis du oppdaterer siden din, bør du se dette: et rektangel som starter på (0, 0) og er 50 px bredt og 50 px høyt (en firkant).
Denne torget kan farges inn like lett som vår bakgrunn. Alt vi trenger å gjøre er å spesifisere en fyllfarge før vi tegner rektangelet. La oss bruke noen heks denne gangen.
fylle ( '# CC00FF'); rekt (0, 0, 50, 50);
Nå har vi en lilla firkant. Ikke akkurat et mesterverk, men vi kommer et sted. Hva med en annen form? En sirkel, jeg hører deg si? Ikke noe problem.
// Tegn en ellipse som er 25px fra toppen og / / 25px fra venstre side av lærredets kant. // Ellipse er 25px høy og 25px bred gjør // det en sirkel. ellipse (25, 25, 25, 25);
Du merker at sirkelen vår ikke bare er trukket på toppen av rektangelet, men det er også samme farge som rektangelet.
Dette er fordi ordren der vi kaller disse funksjonene, er ekstremt viktig. Hvis vi hadde trukket rektanglet etter ellipsen, ville vi ikke se sirkelen i det hele tatt som det ville vært malt over. Når det gjelder sirkelens fyllfarge, er det det samme som firkanten fordi enhver form trukket etter fylle() funksjon kalles vil bruke den fargen. For å endre fargen på sirkelen, bare ring fyllfarge igjen med en annen verdi.
fylle ( '# 66CC66'); ellipse (25, 25, 25, 25);
Vi har nå dette:
Hmm, fortsatt ikke så spennende. La oss se hva vi kan gjøre. Nå, husk at flertallet av koden vår er inkludert i tegne() funksjon, og som vi så før, blir alt i trekkfunksjonen ringt igjen og igjen. Så vesentlig blir vår firkant og sirkel trukket igjen og igjen på toppen av torget og sirkelen som ble trukket i forrige ring av tegningsfunksjonen.
Hva om vi skulle tegne våre figurer på et annet sted hver gang?
For å tegne figurene dine på et annet sted, kan du bli fristet til å endre koordinatverdiene. Dette er helt akseptabelt og en fin måte å ha full kontroll over tegningen din.
Det er også et alternativ. Vi kan endre forskyvningen på hele lerretet, noe som betyr at vi kan endre opprinnelsen, de øverste venstre koordinatene (0, 0) til noe annet. Resultatet av dette er at våre figurer er tegnet med denne kompensasjonen. Hvis vi skulle skrive oversette (10, 10); vi vil ende opp med dette.
Legg merke til at figurene våre nå er trukket 10 px fra venstre og 10 px fra toppen.
Dette har egentlig ikke løst vårt opprinnelige problem med at figurene blir trukket over hverandre flere ganger, men hva om vi skulle endre opprinnelsen til lerretet med hver tegne() anrop? Formene vil bli trukket i en annen posisjon hver gang. Men hvilken stilling? Og hvordan skulle vi komme opp med en annen hver gang tegne() er kalt? Heldigvis har p5 oss dekket med tilfeldig() funksjon-en enkel måte å generere et tilfeldig nummer på. Vi bruker dette for å tilfeldigvis endre forskyvningen på lerretet vårt.
funksjonstegn () // Forskyv ler lerretet // tilfeldig (0, bredde) returnerer en verdi mellom // 0 og bredden på lerretet. // Som gjør tilfeldig (0, høyde) for høyde. oversette (tilfeldig (0, bredde), tilfeldig (0, høyde)); // Eksisterende kode her
Dette gir oss en animert versjon av dette:
Whee! Du kan finne denne animasjonen litt fort. Dette skyldes at p5 tegner våre figurer så fort som mulig, med tegne() blir kalt igjen og igjen. Hvis du vil redusere dette litt, kan du endre rammeprøven for å redusere frekvensen der tegne() er kalt. Ringe til Framerate () i oppsettfunksjonen.
funksjonsoppsett () createCanvas (200, 200); bakgrunn ( 'red'); Framerate (5);
Det er bedre. Igjen er det litt kjedelig med torget og sirkel er alltid på toppen av hverandre. La oss prøve å rotere våre figurer for å gjøre ting mer interessant. Så, hvordan gjør vi det? Yup, du antar det, p5 har vi dekket igjen. Først forteller vi p5 vi vil rotere ved hjelp av grader i stedet for radianer, og at vi vil rotere tilfeldig før vi tegner hver form.
angleMode (grader); // bruker global GRADE konstant rotere (tilfeldig (1, 360)); // roter til tilfeldig vinkelfylling ('# CC00FF'); rekt (0, 0, 50, 50); rotere (tilfeldig (1, 360)); fylle ( '# 66CC66'); ellipse (25, 25, 25, 25);Vi har laget et monster.
Jeg er ganske sikker på at jeg hadde en skjorte tilbake i 1991 med samme mønster på den ...
Nei, min feil, den hadde noen gule trekanter på den. La oss gå inn og legge til noen.
// Tilfeldig posisjonert gul trekant rotere (tilfeldig (1, 360)); fyll ( 'yellow'); // 3 par trekantspunkter trekant (25, 0, 50, 50, 0, 50);
Herlig. Bad 90s skjorte eller dagens Jackson Pollock? Det er opp til deg. Kunst er i øyets øye, som de sier.
Jeg håper du har sett fra denne veiledningen hvor lett det er å begynne å tegne i nettleseren med p5.js. p5 har mange flere nyttige, praktiske metoder for å hjelpe oss å tegne figurer, animere og håndtere brukerinngang. Hvis du er interessert i å lære mer, gå til p5-referansesiden, eller sjekk ut Envato Tuts + -kurset Interactive Art With p5.js.
Til referanse er her den komplette kilden til vår p5-skisse:
funksjonsoppsett () createCanvas (200, 200); bakgrunn ( 'red'); Framerate (5); funksjonstegn () translate (tilfeldig (0, bredde), tilfeldig (0, høyde)); angleMode (grader); rotere (tilfeldig (1, 360)); fylle ( '# CC00FF'); rekt (0, 0, 50, 50); rotere (tilfeldig (1, 360)); fylle ( '# 66CC66'); ellipse (25, 25, 25, 25); rotere (tilfeldig (1, 360)); fyll ( 'yellow'); trekant (25, 0, 50, 50, 0, 50);
