Hvordan lage fantastiske webkameraeffekter ved hjelp av Java og prosessering
Annonse
Prosessering er et kraftig verktøy som gjør det mulig å lage kunst gjennom kode. Det er kombinasjonen av et Java-bibliotek for arbeid med grafikk, og et integrert utviklingsmiljø (IDE) som lar deg skrive og kjøre kode enkelt.
Det er mange nybegynnerprosjekter for grafikk og animasjoner som bruker prosessering, men det er også i stand til å manipulere livevideo.
I dag lager du et live video-lysbildefremvisning av forskjellige effekter som styres av musen, ved hjelp av Processing-videobiblioteket. I tillegg til å snu livevideoen, lærer du å endre størrelse på og fargelegge den, og hvordan du får den til å følge musemarkøren.
Prosjektoppsett
For å begynne, last ned Processing og åpne en blank skisse. Denne opplæringen er basert på et Windows-system, men den skal fungere på hvilken som helst datamaskin med et webkamera.
Du må kanskje installere Processing Video-biblioteket, tilgjengelig under Sketch> Import Library> Add Library . Søk etter video i søkefeltet, og installer biblioteket fra The Processing Foundation .
Når du er installert, er du klar til å gå. Hvis du vil hoppe over kodingen, kan du laste ned hele skissen. Det er imidlertid mye bedre å lage det selv fra bunnen av!
Bruke et webkamera med prosessering
La oss begynne med å importere biblioteket og opprette en konfigurasjonsfunksjon . Legg inn følgende i den tomme behandlingsskissen:
import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } Etter å ha importert videobiblioteket oppretter du en Capture- forekomst kalt cam for å lagre dataene fra webkameraet. I oppsett setter størrelsesfunksjonen opp et vindu på 640 × 480 piksler som skal fungere i.
Den neste linjen tilordner cam til en ny forekomst av Capture, for denne skissen, som er i samme størrelse som vinduet, før du ber kameraet slå på med cam.start () .
Ikke bekymre deg hvis du ikke forstår alle delene av dette foreløpig. Kort sagt, vi har fortalt Processing å lage et vindu, finne kameraet vårt og slå det på! For å vise den trenger vi en trekkfunksjon . Skriv inn dette under koden over, utenfor krøllete parenteser.
void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } Trekkfunksjonen blir kalt hver ramme. Dette betyr at mange ganger hvert sekund, hvis kameraet har tilgjengelige data, leser du dataene fra det.
Disse dataene vises deretter som et bilde på 0, 0, som er øverst til venstre i vinduet.
Lagre skissen din, og trykk på spillknappen øverst på skjermen.
Suksess! Dataene som er lagret av cam, blir korrekt skrevet ut på skjermen hver ramme. Hvis du har problemer, må du sjekke koden grundig. Java trenger hver brakett og semikolon på rett sted! Behandlingen kan også kreve noen sekunder for å få tilgang til webkameraet, så hvis du tror det ikke fungerer, vent noen sekunder etter at skriptet er startet.
Vend bildet
Nå som du har et live webcam-bilde, la oss manipulere det. Bytt ut bilde (kam, 0, 0) i trekkfunksjonen; med disse to kodelinjene.
scale(-1, 1); image(cam, -width, 0); Lagre og kjør skissen på nytt. Kan du se forskjellen? Ved å bruke en negativ skaleringsverdi blir alle x- verdiene (de horisontale pikslene) nå reversert. På grunn av dette må vi bruke den negative verdien på vindusbredden for å plassere bildet riktig.
Å snu bildet opp ned krever bare et par små endringer.
scale(-1, -1); image(cam, -width, -height); 
Denne gangen blir både x- og y- verdiene snudd, og snu live-kamerabildet opp ned. Så langt har du kodet et normalt bilde, et horisontalt vendt bilde og et vertikalt vippet bilde. La oss sette opp en måte å sykle mellom dem.
Making It Cycle
I stedet for å skrive om koden din hver gang, kan vi bruke tall for å bla gjennom dem. Opprett et nytt heltall øverst på koden kalt switcher .
import processing.video.*; int switcher = 0; Capture cam; Vi kan bruke verdien av switcher for å bestemme hva som skjer med kamerabildet. Når skissen starter, gir du den verdien 0 . Nå kan vi bruke logikk for å endre hva som skjer med bildet. Oppdater tegningsmetoden din slik at den ser slik ut:
void draw(){ if (cam.available()){ cam.read(); } if(switcher==0){ image(cam, 0, 0); } else if(switcher == 1){ scale(-1, 1); image(cam, -width, 0); } else if(switcher == 2){ scale(-1, -1); image(cam, -width, -height); } else{ println("Switcher = 0 again"); switcher = 0; } } Nå vil alle tre variantene av koden utløse, avhengig av verdien på switcher. Hvis det ikke samsvarer med et av våre om eller hvis uttalelser, ellers blir klausulen tilbakestilt til 0. Logikk er en viktig nybegynnerferdighet å lære, og du kan finne ut om dem og mye mer med en utmerket YouTube-programmeringsopplæring 17 beste opplæringsprogrammer for YouTube De 17 beste opplæringsprogrammene for YouTube I dette innlegget ønsker vi å vise deg noen av de beste YouTube-programmeringsseriene vi har funnet. Alle disse er tilstrekkelige for å bli føttene våte som nybegynner-programmerer. Les mer !
Bruke musen
Prosessering har innebygde metoder for tilgang til musen. For å oppdage når brukeren klikker på musen, legger du til musepressfunksjonen nederst i skriptet.
void mousePressed(){ switcher++; } Behandlingen lytter etter museklikk og avbryter programmet for å utføre denne metoden når den oppdager en. Hver gang metoden blir kalt, blir verdien av veksleren større med én. Lagre og kjør skriptet.
Når du trykker på museknappen, går den gjennom de forskjellige retningene til videoer, før du går tilbake til originalen. Så langt har du nettopp vendt videoen, la oss gjøre noe litt mer interessant.
Legge til flere effekter
Nå vil du kode en fire-fargers live-bildeffekt som ligner på den berømte Andy Warhol kunstverk. Å legge til flere effekter er så enkelt som å legge en ny klausul til logikken. Legg dette til i skriptet mellom det siste annet hvis uttalelse, og annet .
else if(switcher == 3){ tint(256, 0, 0); image(cam, 0, 0, width/2, height/2); tint(0, 256, 0); image(cam, width/2, 0, width/2, height/2); tint(0, 0, 256); image(cam, 0, height/2, width/2, height/2); tint(256, 0, 256); image(cam, width/2, height/2, width/2, height/2); } Denne koden bruker bildefunksjonen til å lage fire separate kamerabilder i hvert hjørne av skjermen og for å gjøre dem alle halvstore.
Fargetone gir farge til hvert kamerabilde. Tallene i parentesene er røde, grønne og blå (RGB) verdier. Fargetone farger alle følgende koder med den valgte fargen.
Lagre og spill for å se resultatet. Prøv å endre RGB-tallene i hver fargefunksjon for å endre farger!
Gjør det Følg musen
Til slutt, la oss få livebildet til å følge museposisjonen ved hjelp av nyttige funksjoner fra Behandlingsbiblioteket. Legg til dette over den andre delen av logikken din.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Her plasserer du bildet fra kameraet ditt på mouseX og mouseY . Disse er innebygd i behandlingsverdier som returnerer hvilken piksel musen peker på.
Det er det! Fem varianter av live video gjennom kode. Når du kjører koden, vil du imidlertid merke et par problemer.
Etterbehandling av koden
Koden du har opprettet så langt fungerer, men du vil merke to problemer. For det første, når fire-fargevariasjonen vises, er alt deretter farvet lilla. For det andre, når du flytter videoen med musen, etterlater den seg et spor. Du kan fikse det ved å legge et par linjer til toppen av trekkfunksjonen.
void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! Ved begynnelsen av hver ramme tilbakestiller denne koden fargen til hvit, og legger til en bakgrunnsfarge av svart for å stoppe videoens forlate spor. Når du tester programmet, fungerer alt perfekt!
Webcame Effects: Art From Code
Prosessering er veldig kraftig, og du kan bruke den til å gjøre mange ting. Det er en utmerket plattform for å lage kunst med kode, men den er like godt egnet til å kontrollere roboter!
Hvis Java ikke er din greie, er det et JavaScript-bibliotek basert på prosessering kalt p5.js. Det er nettleserbasert, og til og med nybegynnere kan bruke det til å lage fantastiske reaktive animasjoner. Hvordan skripte en stemmesensitiv robotanimasjon i p5.js Hvordan skripte en stemmesensitiv robotanimasjon i p5.js Vil du få barna dine interessert i programmering ? Vis dem denne guiden for å bygge et lydreaktivt animert robothode. Les mer !
Bildekreditt: Syda_Productions / Depositphotos
Utforsk mer om: Coding Tutorials, Java, Processing, Webcam.
