Sådan opretter du fantastiske webcam-effekter ved hjælp af Java og behandling
Reklame
Processing er et kraftfuldt værktøj, der tillader oprettelse af kunst gennem kode. Det er kombinationen af et Java-bibliotek til arbejde med grafik og et integreret udviklingsmiljø (IDE), som giver dig mulighed for let at skrive og køre kode.
Der er mange grafik- og animationsbegynderprojekter, der bruger Processing, men det er også i stand til at manipulere live video.
I dag laver du et live video-lysbilledshow af forskellige effekter kontrolleret af musen ved hjælp af Processing-videobiblioteket. Ud over at vende livevideoen, lærer du at ændre størrelsen og farve den, og hvordan man får den til at følge musemarkøren.
Projektopsætning
For at begynde skal du downloade Behandling og åbne en tom skitse. Denne tutorial er baseret på et Windows-system, men det skal fungere på enhver computer med et webcam.
Du skal muligvis installere Processing Video-biblioteket, der er tilgængeligt under Sketch> Import Library> Add Library . Søg efter video i søgefeltet, og installer biblioteket fra Processing Foundation .
Når den er installeret, er du klar til at gå. Hvis du vil springe kodningen over, kan du downloade den komplette skitse. Det er dog meget bedre at gøre det selv fra bunden af!
Brug af et webcam med behandling
Lad os begynde med at importere biblioteket og oprette en installationsfunktion . Indtast følgende i den tomme behandlingsskitse:
import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } Efter import af videobiblioteket opretter du en Capture- forekomst kaldet cam til at gemme dataene fra webcam. I opsætningen indstiller størrelsesfunktionen et vindue på 640 × 480 pixel til at arbejde i.
Den næste linje tildeler cam til en ny forekomst af Capture til denne skitse, der er i samme størrelse som vinduet, før du beder kameraet om at tænde med cam.start () .
Bare rolig, hvis du ikke forstår enhver del af dette indtil videre. Kort sagt, vi har bedt Processing om at oprette et vindue, finde vores kamera og tænde det! For at få vist det har vi brug for en tegnefunktion . Indtast dette under koden ovenfor uden for de krøllede parenteser.
void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } Tegnefunktionen kaldes hver ramme. Dette betyder, at mange gange hvert sekund, hvis kameraet har tilgængelige data , læser du dataene fra det.
Disse data vises derefter som et billede i positionen 0, 0, der er øverst til venstre i vinduet.
Gem din skitse, og tryk på afspilningsknappen øverst på skærmen.
Succes! De data, der er gemt af cam, udskrives korrekt på skærmen i hver ramme. Hvis du har problemer, skal du kontrollere din kode grundigt. Java har brug for hver beslag og semikolon på det rigtige sted! Behandling kan også kræve et par sekunder for at få adgang til webcam, så hvis du tror, det ikke fungerer, skal du vente et par sekunder efter, at scriptet er startet.
Vend billedet
Nu hvor du har et live webcam-billede, lad os manipulere det. Udskift billede i tegnefunktionen (cam, 0, 0); med disse to kodelinjer.
scale(-1, 1); image(cam, -width, 0); Gem og kør skitten igen. Kan du se forskellen? Ved at bruge en negativ skalaværdi vendes alle x- værdierne (de vandrette pixels) nu. På grund af dette er vi nødt til at bruge den negative værdi af vinduesbredden til at placere billedet korrekt.
At vende billedet på hovedet kræver kun et par små ændringer.
scale(-1, -1); image(cam, -width, -height); 
Denne gang vippes både x- og y- værdierne, hvilket vender det levende kamerabillede på hovedet. Indtil videre har du kodet et normalt billede, et vandret vendt billede og et lodret vendt billede. Lad os oprette en måde at cykle mellem dem på.
Making It Cycle
I stedet for at omskrive din kode hver gang, kan vi bruge tal til at gå gennem dem. Opret et nyt heltal øverst på din kode kaldet switcher .
import processing.video.*; int switcher = 0; Capture cam; Vi kan bruge værdien af switcher til at bestemme, hvad der sker med kamerabilledet. Når skitsen starter, giver du den en værdi af 0 . Nu kan vi bruge logik til at ændre, hvad der sker med billedet. Opdater din trækmetode for at se sådan ud:
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; } } Nu udløses alle tre variationer af koden afhængigt af værdien af switcher. Hvis det ikke stemmer overens med en af vores, hvis eller hvis ellers udsagn, nulstilles den anden klausul til 0. Logik er en vigtig begynderværdighed at lære, og du kan finde ud af om dem og meget mere med en fremragende YouTube-programmeringsvejledning 17 Bedste YouTube-programmeringsvejledninger De 17 bedste YouTube-programmeringsvejledninger I dette indlæg vil vi gerne henvise til nogle af de bedste YouTube-programmeringsserier, vi har fundet. Alle disse er tilstrækkelige til at få fødderne våde som en nybegynder-programmør. Læs mere !
Brug af musen
Behandling har indbyggede metoder til adgang til musen. For at opdage, når brugeren klikker på musen, skal du tilføje funktionen mousePression i bunden af dit script.
void mousePressed(){ switcher++; } Behandling lytter til museklik og afbryder programmet til at udføre denne metode, når det registrerer et. Hver gang metoden bliver kaldt, bliver værdien af switcher større med én. Gem og kør dit script.
Når du nu trykker på museknappen, cykler den gennem de forskellige orienteringer af videoer, før du vender tilbage til originalen. Indtil videre har du lige vendt videoen, lad os nu gøre noget lidt mere interessant.
Tilføjelse af flere effekter
Nu koder du en live-farveeffekt på fire farver, der ligner de berømte Andy Warhol-kunstværker. Tilføjelse af flere effekter er så simpelt som at tilføje en anden klausul til logikken. Føj dette til dit script mellem det sidste andet, hvis udsagn, ellers .
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 kode bruger billedfunktionen til at oprette fire separate kamerabilleder i hvert hjørne af skærmen og til at gøre dem alle halvstore.
Farvefunktionen tilføjer farve til hvert kamerabillede. Tallene inden parenteserne er rød, grøn og blå (RGB) værdier. Farvetone farver alle følgende koder med den valgte farve.
Gem og spil for at se resultatet. Prøv at ændre RGB-numre i hver tonefunktion for at ændre farverne!
At gøre det Følg musen
Endelig, lad os få det levende billede til at følge musepositionen ved hjælp af nyttige funktioner fra Processing-biblioteket. Tilføj dette over den anden del af din logik.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Her placerer du billedet fra dit kamera på mouseX og mouseY . Disse er indbygget i Processing-værdier, der returnerer hvilken pixel musen peger på.
Det er det! Fem variationer af live video gennem kode. Når du kører koden, vil du dog bemærke et par problemer.
Efterbehandling af koden
Koden, du har oprettet indtil videre, fungerer, men du vil bemærke to problemer. For det første, når fire-farvevariationen vises, er alt bagefter tonet lilla. For det andet, når du flytter videoen med musen, efterlader den et spor. Du kan ordne det ved at tilføje et par linjer øverst i tegnefunktionen.
void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! Ved starten af hver ramme nulstiller denne kode farven til hvid og tilføjer en baggrundsfarve i sort for at forhindre, at videoen forlader spor. Når du nu tester programmet, fungerer alt perfekt!
Webcame Effects: Art From Code
Behandling er meget kraftfuld, og du kan bruge den til at gøre mange ting. Det er en fremragende platform til at lave kunst med kode, men den er lige så velegnet til at kontrollere robotter!
Hvis Java ikke er din ting, er der et JavaScript-bibliotek baseret på Processing kaldet p5.js. Det er browserbaseret, og endda begyndere kan bruge det til at oprette fantastiske reaktive animationer Sådan scriptes en stemmefølsom robotanimation i p5.js Sådan scriptes en stemmefølsom robotanimation i p5.js Vil du have dine børn interesseret i programmering ? Vis dem denne vejledning til opbygning af et lydreaktivt animeret robothoved. Læs mere !
Billedkredit: Syda_Productions / Depositphotos
Udforsk mere om: Coding Tutorials, Java, Processing, Webcam.
