Hur man skapar fantastiska webbkameraeffekter med Java och bearbetning
Annons
Bearbetning är ett kraftfullt verktyg som gör det möjligt att skapa konst genom kod. Det är kombinationen av ett Java-bibliotek för att arbeta med grafik och en integrerad utvecklingsmiljö (IDE) som gör att du enkelt kan skriva och köra kod.
Det finns många grafik- och animationsbörjarprojekt som använder Processing, men det kan också manipulera livevideo.
Idag kommer du att göra ett live-bildspel med olika effekter som styrs av musen med hjälp av Processing-videobiblioteket. Förutom att vända livevideoen lär du dig att ändra storleken på och färglägga den och hur du gör den enligt muspekaren.
Projektinställning
För att börja, ladda ner Bearbetning och öppna en tom skiss. Denna handledning är baserad på ett Windows-system, men det bör fungera på alla datorer med webbkamera.
Du kan behöva installera Processing Video-biblioteket, tillgängligt under Sketch> Import Library> Add Library . Sök efter video i sökrutan och installera biblioteket från Processing Foundation .
När du är installerad är du redo att gå. Om du vill hoppa över kodningen kan du ladda ner hela skissen. Men det är mycket bättre att göra det själv från början!
Använda en webbkamera med bearbetning
Låt oss börja med att importera biblioteket och skapa en installationsfunktion . Ange följande i den tomma bearbetningsskissen:
import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } När du har importerat videobiblioteket skapar du en Capture- instans som heter kam för att lagra data från webbkameran. Vid installationen sätter storleksfunktionen upp ett fönster på 640 × 480 pixlar som ska fungera.
Nästa rad tilldelar kam till en ny instans av Capture för denna skiss, som har samma storlek som fönstret, innan du ber kameran att slå på med cam.start () .
Oroa dig inte om du inte förstår alla delar av detta för nu. Kort sagt, vi har sagt till Processing att göra ett fönster, hitta vår kamera och slå på den! För att visa den behöver vi en dragfunktion . Ange detta under koden ovan, utanför de lockiga parenteserna.
void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } Rita- funktionen kallas varje ram. Detta betyder att många gånger varje sekund, om kameran har tillgängliga data, läser du data från den.
Dessa data visas sedan som en bild på positionen 0, 0, som är uppe till vänster i fönstret.
Spara din skiss och tryck på uppspelningsknappen längst upp på skärmen.
Framgång! Uppgifterna som lagras av kammen skrivs korrekt ut på skärmen varje ram. Om du har problem, kontrollera din kod noggrant. Java behöver varje konsol och semikolon på rätt plats! Bearbetning kan också kräva några sekunder för att komma åt webbkameran, så om du tror att den inte fungerar vänta några sekunder efter att skriptet har startats.
Vänd på bilden
Nu när du har fått en live webbkamera-bild låt oss manipulera den. Byt ut bilden (kam, 0, 0) i dragfunktionen. med dessa två kodrader.
scale(-1, 1); image(cam, -width, 0); Spara och kör skissen igen. Kan du se skillnaden? Genom att använda ett negativt skalavärde vänds nu alla x- värden (de horisontella pixlarna). På grund av detta måste vi använda det negativa värdet på fönsterbredden för att placera bilden korrekt.
Att vända bilden upp och ner kräver bara ett par små förändringar.
scale(-1, -1); image(cam, -width, -height); 
Den här gången vänds både x- och y- värdena, vilket gör att kameran avbildas upp och ner. Hittills har du kodat en normal bild, en horisontellt vippad bild och en vertikalt vänd bild. Låt oss skapa ett sätt att cykla mellan dem.
Gör det till cykel
Istället för att skriva om din kod varje gång kan vi använda siffror för att gå igenom dem. Skapa ett nytt heltal högst upp i din kod som heter switcher .
import processing.video.*; int switcher = 0; Capture cam; Vi kan använda värdet på switcharen för att bestämma vad som händer med kamerabilden. När skissen börjar ger du värdet 0 . Nu kan vi använda logik för att ändra vad som händer med bilden. Uppdatera din dragmetod så att den ser så här 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; } } Nu kommer alla tre varianter av koden att utlösas beroende på värdet på växlaren. Om det inte stämmer med något av våra om eller om andra uttalanden, återställes den andra klausulen till 0. Logik är en viktig nybörjare-färdighet att lära sig, och du kan ta reda på dem och mycket mer med en utmärkt YouTube-programmeringshandledning 17 bästa tutorials för YouTube-programmering De 17 bästa tutorials för YouTube-programmering I det här inlägget vill vi peka på några av de bästa YouTube-programmeringsserierna som vi hittat. Alla dessa är tillräckliga för att få dina fötter våta som en nybörjare programmerare. Läs mer !
Använda musen
Bearbetning har inbyggda metoder för åtkomst till musen. För att upptäcka när användaren klickar på musen lägger du till muspressfunktionen längst ner i skriptet.
void mousePressed(){ switcher++; } Bearbetning lyssnar på alla musklick och avbryter programmet för att utföra den här metoden när den upptäcker en. Varje gång metoden kallas blir värdet på switcharen större med en. Spara och köra ditt skript.
När du trycker på musknappen går det igenom de olika riktningarna för videor innan du återgår till originalet. Hittills har du precis vänt på videon, nu låt oss göra något lite mer intressant.
Lägga till fler effekter
Nu kodar du en fyrfärgad live-bildeffekt som liknar de berömda Andy Warhol-konstverken. Att lägga till fler effekter är lika enkelt som att lägga till en annan klausul till logiken. Lägg till detta i ditt skript mellan det sista annars om uttalande, och annat .
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); } Den här koden använder bildfunktionen för att skapa fyra separata kamerabilder i varje hörn på skärmen och för att göra dem alla halvstora.
Tonfunktionen lägger till färg till varje kamerabild. Siffrorna inom parentes är röda, gröna och blå (RGB) -värden. Färg färgar alla följande koder med den valda färgen.
Spara och spela för att se resultatet. Försök ändra RGB-nummer i varje färgfunktion för att ändra färger!
Gör det Följ musen
Slutligen, låt oss låta den levande bilden följa muspositionen med hjälp av användbara funktioner från Processing-biblioteket. Lägg till detta ovanför den andra delen av din logik.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Här placerar du bilden från din kamera på mouseX och mouseY . Dessa är inbyggda i Processing-värden som returnerar vilken pixel musen pekar på.
Det är allt! Fem varianter av livevideo via kod. Men när du kör koden kommer du att märka ett par problem.
Slutför koden
Koden du har skapat hittills fungerar, men du kommer att märka två problem. För det första, när den fyrfärgiga variationen visar, är allt efteråt tonat lila. För det andra, när du flyttar videon med musen lämnar den ett spår. Du kan fixa det genom att lägga till ett par rader på toppen av dragfunktionen.
void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! I början av varje ram återställer denna kod tonfärgen till vit och lägger till en bakgrundsfärg av svart för att stoppa videon som lämnar spår. När du testar programmet fungerar allt perfekt!
Webcame Effects: Art From Code
Bearbetning är mycket kraftfull, och du kan använda den för att göra många saker. Det är en utmärkt plattform för att skapa konst med kod, men den är lika lämpad att kontrollera robotar!
Om Java inte är din sak finns det ett JavaScript-bibliotek baserat på Processing som heter p5.js. Det är webbläsarbaserat, och till och med nybörjare kan använda det för att skapa fantastiska reaktiva animationer Hur man skriptar en röstkänslig robotanimering i p5.js Hur man skriver en röstkänslig robotanimering i p5.js Vill du få dina barn intresserade av programmering ? Visa dem den här guiden för att bygga ett ljudreaktivt animerat robothuvud. Läs mer !
Bildkredit: Syda_Productions / Depositphotos
Utforska mer om: Coding Tutorials, Java, Processing, Webcam.
