Tilbringe en dag med
Brendan Dawes.
på
Generere London
og oppdag hvordan
Data er dawesome
. I dette hele dagers workshop vil han forklare hvordan man tar dataene som omgir oss hver dag og gjør det til noe vakkert ved hjelp av behandling og p5.js.
Bestill nå
!
p5.js.
er et bibliotek designet for å bringe kraften til
Behandling
på nettet. Det tar sikte på å introdusere kunstnere, designere og lærere til programmeringsverdenen samtidig som de tilbyr allsidige verktøy for å bringe devs og ingeniører til den visuelle kunsten.
La oss dykke inn og lage vår første "skisse". Vårt mål er å bygge et tegneverktøy som forvandler et enkelt bilde til et felt av animerte stjerner. Først vil vi definere noen globale variabler og skrive vår
Oppsett ()
funksjon. P5-er
Oppsett ()
Kjøres en gang, når skissen er lastet, så er det det ideelle stedet å håndtere initialisering.
var hintimage, skyimage, stjerner = [];
Funksjonsoppsett () {...}
Inne i vår
Oppsett
Funksjon, vi lager et lerret og skjuler musemarkøren slik at vi kan tegne vår egen. Som standard legger P5 en oversikt rundt former - vi ønsker å deaktivere slag i dette tilfellet.
CreateCanvas (800 500);
nocursor ();
nesebor ();
Bakgrunnsbildet - denne nattehimmelen scenen gir innstillingen for animasjonen vår
Deretter laster vi et par bilder. Man vil tjene som bakgrunnen - i dette tilfellet en natthimmel scene. Den andre vil være "hint" -bildet - den svarte og hvite designen Vår endelige design vil være basert på. Tanken er å sette de fleste stjernene over svarte piksler i vårt hintbilde, for å gjenskape designet i vår bakgrunnsscene. Det ville være enkelt å lage disse bildene med P5s tekst- og tegneverktøy, men for korthetens skyld bruker vi statiske eiendeler.
Hintbildet, som dikterer plasseringen av våre stjerner
Tegnfunksjonen
Det er det for
Oppsett ()
! En annen nøkkelfunksjon er
tegne()
. Det kalles i en kontinuerlig sløyfe, som er nyttig for animasjoner og legger til elementer over tid.
Funksjon Tegn () {...}
Innenfor tegningsfunksjonen er vår første oppgave å fylle lerretet med vårt bakgrunnsbilde. P5 fjerner ikke automatisk lerretet mellom
tegne()
Samtaler, så vi må gjøre dette hver ramme, eller vi vil ende opp med noen rare akkumuleringseffekter. For å plassere et lastet bilde på lerretet, bruk
bilde()
Funksjon og gi X- og Y-koordinater for posisjonering.
bilde (Skyimage, 0, 0);
Deretter tar vi den nåværende musestedet og lagrer det som en P5.Vector med
CreateVector ()
. Dette objektet kommer med hendige funksjoner for å håndtere poeng i rommet, men vi er for det meste bare med det som en beholder.
Varposisjon = CreateVector (Mousex, Mousey);
Ved hjelp av vår nyopprettede musposisjon, kan vi tegne vår markør. Vi legger tegnefarge med
fylle()
Ved å sende RGB-verdier og bruk
ellipse ()
å tegne en sirkel på musen.
Vi vil bare tegne nye stjerner mens musen er trykket, så vi vil sjekke P5-er
musispressed.
før du fortsetter. Hvis musen er nede, må vi beregne et godt sted for vår neste stjerne å ende opp. Vi vil gjøre det med en tilpasset funksjon som heter
FindPixel ()
, som vi vil definere senere.
Når vi har et mål, lager vi en ny forekomst av et tilpasset stjerneobjekt (mer nedenfor) og skyv det på slutten av vår stjernespill. Hvis vi ender med over 2000 stjerner, begynner vi å kaste bort de eldste.
Hvis (musispresset) {
VAR-mål = Findpixel ();
var stjerne = ny stjerne (posisjon, mål);
Stars.Push (stjerne);
hvis (stars.length & gt; 2000) stars.shift ();
}
Til slutt vil vi sløyfe gjennom vårt utvalg av stjerner og ringe
Oppdater()
og
tegne()
på hver av dem. Vi dykker inn i disse metodene senere.
for (var i = 0; i & lt; stars.length; i ++) {
stjerner [i] .Update ();
stjerner [i] .draw ();
}
Hjelperfunksjoner
Nå
Oppsett ()
og
tegne()
Er på plass, vi vil jobbe på hjelperfunksjonene og objektene. Først vil vi definere en funksjon som finner en hvilestilling for hver ny stjerne. Alt vi trenger å gjøre er å sjekke noen tilfeldige piksler i vårt hintbilde, ved hjelp av
få()
for å se om de er svarte eller hvite.
Vi trenger faktisk bare å se på deres røde verdi, fordi i begge tilfeller matcher RGB-verdiene. Hvis vi finner en ikke-hvit piksel, kommer vi tilbake det fordi vi har truffet vårt design. Hvis ikke, vil vi bare returnere den siste pikselen sjekket, og det vil fungere som en tilfeldig stjerne.
Funksjon FindPixel () {
var x, y;
for (var i = 0; jeg <{15; i ++) {
x = gulv (tilfeldig (hintimage.width));
y = gulv (tilfeldig (hintimage.height));
hvis (rød (hintimage.get (x, y)) pause;
}
returnere kreatrector (x, y);
}
Siste opp er vår egendefinerte stjerneobjekt. Sett enkelt, vi vil ha en gjenbrukbar beholder som lagrer informasjon om hver stjerne, og gir også et middel for oppdatering og tegning av dem. JavaScript gir ikke en måte å skape klasser på en tradisjonell forstand, men vi kan få det samme resultatet ved å definere en funksjon og utvide den til våre egne behov.
Hver stjerne har noen egenskaper (startposisjon, endelig plassering og en tilfeldig generert diameter), som vi vil definere i en "konstruktørfunksjon" som kalles for hver ny stjerne som er opprettet i draw loop.
Deretter legger vi til en
Oppdater()
Metode til stjerne, som vil bruke P5.Vector's
LERP ()
å beregne en ny plassering mellom en stjernens nåværende og målstillinger. I dette tilfellet beveger vi oss fire prosent av gjenværende avstand for hver tegning, som effektivt gir oss en enkel effekt.
Hvis vi ønsket å få fancy, kunne vi også simulere litt fysikk her, men for nå holder vi det enkelt.
Til slutt, Star's
tegne()
Metoden trekker faktisk stjernen til lerretet. Igjen bruker vi
fylle()
og
ellipse ()
, selv om denne gangen vi ringer
fylle()
med en gråtonær verdi og en alfa-verdi for gjennomsiktighet.
Hver ramme, lineær interpolering gir oss et nytt punkt langs banen mellom den nåværende stjernestilling og dens destinasjon
For å gi stjernene en twinkle, er alfa-verdien bestemt ved hjelp av P5-er
bråk()
funksjon. Dette returnerer perlinestøyverdien for de angitte koordinatene, noe som betyr at du får en jevn, væskesekvens av tilfeldige tall. For den tredje parameteren, passerer vi en tidsbasert verdi i stedet for en romlig verdi, slik at støyen vil animere over tid.
Det er det for vår første skisse! Klikk og dra for å se nye stjerner vises og i samsvar med hintbildet.
Hva blir det neste?
Herfra kan du legge til noen HTML-elementer for å kontrollere variabler ved hjelp av P5.Dom-tillegget, eller til og med legge til lyden til bildene som bruker
P5.Sound.
.
Vi har bare riper overflaten av det som er mulig med P5.Js, og med nye funksjoner på vei, er det enda mer å se frem til. Ha det gøy!
Jeg opprettet mitt originale maleri rundt denne tiden i fjor, etter å ha blitt inspirert av de store fantasy landskapene av artister som Dongbiao Lu og RUXING GAO. Det var mitt første stili..
Hvis du alltid har ønsket å vite hvordan du tegner fjær, og gjør dem super-realistiske, er du på rett sted. Denne trinnvise veiledningen gir hint og tips om å gi fuglfjær en mer tredim..
Klienter søker stadig etter nye måter å engasjere seg med publikum. Snapchat Geofilters - spesielle kommunikative overlegg - er en fin måte å få et merke foran folk på en bestemt hende..
