Hur man skapar fantastiska webbkameraeffekter med hjälp av Java och bearbetning

Hur man skapar fantastiska webbkameraeffekter med hjälp av Java och bearbetning

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 animationsprojekt för nybörjare 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 bearbetningsvideobiblioteket. Förutom att vända på livevideon lär du dig att ändra storlek och färglägga den och hur du får den att följa muspekaren.





Projektuppsättning

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å vilken dator som helst med en webbkamera.

Du kan behöva installera Processing Video -biblioteket, tillgängligt under Skiss> Importera bibliotek> Lägg till bibliotek . Söka efter Video i sökrutan och installera biblioteket från Bearbetningsstiftelsen .



Efter installationen är du redo att gå. Om du vill hoppa över kodningen kan du ladda ner hela skissen . Det är dock mycket bättre att göra det själv från grunden!

Använda en webbkamera med bearbetning

Låt oss börja med att importera biblioteket och skapa ett uppstart fungera. 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 Fånga instans kallad Orange för att lagra data från webbkameran. I uppstart , storlek funktion ställer in a 640x480 pixelstor fönster att arbeta i.

Nästa rad tilldelas Orange till en ny instans av Fånga , för detta skiss, som är samma storlek som fönstret, innan du säger till kameran att slå på den cam.start () .



Oroa dig inte om du inte förstår alla delar av detta för tillfället. 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 det behöver vi en dra fungera. Ange detta under koden ovan, utanför de lockiga parenteserna.

void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}

De dra funktionen kallas varje bildruta. Det betyder att många gånger varje sekund, om kameran har data tillgängliga du läsa data från den.

Dessa data visas sedan som en bild , på positionen 0, 0 , som är längst upp till vänster i fönstret.

Spara din skiss och tryck på uppspelningsknappen högst upp på skärmen.

Framgång! Uppgifterna som lagras av Orange skrivs ut korrekt på skärmen varje bildruta. Om du har problem, kontrollera din kod noggrant. Java behöver varje parentes 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 manuset har startats.

Vända bilden

Nu när du har en levande webbkamerabild, låt oss manipulera den. I dragfunktionen, ersätt bild (kam, 0,0); 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 en negativ skala värde, alla x värdena (de horisontella pixlarna) är nu omvända. På grund av detta måste vi använda fönsterets negativa värde bredd för att placera bilden korrekt.

Att vända bilden upp och ner kräver bara ett par små ändringar.

scale(-1,-1);
image(cam,-width,-height);

Den här gången, både x och och värdena vänds och vänder upp och ner på kameran. Hittills har du kodat en normal bild, en horisontellt vänd bild och en vertikalt vänd bild. Låt oss sätta upp ett sätt att cykla mellan dem.

Att få det att cykla

Istället för att skriva om din kod varje gång kan vi använda siffror för att bläddra igenom dem. Skapa en ny heltal högst upp i din kod som heter omkopplare .

import processing.video.*;
int switcher = 0;
Capture cam;

Vi kan använda värdet på switcher för att avgöra vad som händer med kamerabilden. När skissen börjar ger du den ett värde av 0 . Nu kan vi använda logik för att ändra vad som händer med bilden. Uppdatera din dra metod för att se ut så här:

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 varianterna av koden att utlösas beroende på värdet på omkopplaren. Om det inte matchar en av våra om eller om annat uttalanden, annan klausul återställs till 0. Logik är en viktig nybörjarkunskap att lära sig, och du kan lära dig mer om dem och mycket mer med en utmärkt YouTube -programmeringsguide!

Använda musen

Bearbetningen har inbyggda metoder för åtkomst till musen. För att upptäcka när användaren klickar på musen, lägg till musPressad funktion längst ner i ditt manus.

Windows 10 laptop ansluten laddas inte
void mousePressed(){
switcher++;
}

Bearbetningen lyssnar efter musklick och avbryter programmet för att utföra denna metod när det upptäcker ett. Varje gång metoden anropas blir värdet på switcher större med en. Spara och kör ditt skript.

Nu, när du trycker på musknappen, går den igenom olika videoriktningar innan den återgår till originalet. Hittills har du bara vänd på videon, låt oss nu göra något lite mer intressant.

Lägga till fler effekter

Nu kommer du att koda en fyrfärgs levande 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 i logiken. Lägg till detta i ditt skript mellan de senaste annat om uttalande och annan .

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);
}

Denna kod använder bild funktion för att skapa fyra separata kamerabilder i varje hörn av skärmen och göra dem alla halvstora.

De färgton funktionen ger färg till varje kamerabild. Siffrorna inom parentes är rött, grönt och blått (RGB) värden. Färgfärg hela följande kod med den valda färgen.

Spara och spela för att se resultatet. Prova att ändra RGB -numren i varje färgton funktion för att ändra färger!

Att få det att följa musen

Slutligen, låt oss få den levande bilden att följa muspositionen med hjälp av användbara funktioner från bearbetningsbiblioteket. Lägg till detta ovanför annan en del av din logik.

else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}

Här placerar du bilden från din kamera vid musX och musY . Dessa är inbyggda i bearbetningsvärden som returnerar vilken pixel musen pekar på.

Det är allt! Fem varianter av livevideo genom 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 fyrfärgsvariationen 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 högst upp i dragningsfunktionen.

void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!

I början av varje bildram återställer denna kod nyansfärgen till vit och lägger till en bakgrundsfärg av svart för att stoppa att videon lämnar spår. Nu när du testar programmet fungerar allt perfekt!

Webbkameraeffekter: Art From Code

Bearbetningen ä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 det är lika lämpligt för att styra robotar!

Om Java inte är din sak finns det ett JavaScript -bibliotek baserat på Processing som kallas p5.js. Det är webbläsarbaserat, och även nybörjare kan använda det för att skapa fantastiska reaktiva animationer!

Bildkredit: Syda_Productions / Depositphotos

Dela med sig Dela med sig Tweet E-post 3 sätt att kontrollera om ett e -postmeddelande är riktigt eller falskt

Om du har fått ett e -postmeddelande som ser lite tveksamt ut är det alltid bäst att kontrollera dess äkthet. Här är tre sätt att se om ett e -postmeddelande är sant.

Läs Nästa Relaterade ämnen
  • Programmering
  • Java
  • Webbkamera
  • Bearbetning
  • Handledning för kodning
Om författaren Ian Buckley(216 artiklar publicerade)

Ian Buckley är frilansjournalist, musiker, artist och videoproducent som bor i Berlin, Tyskland. När han inte skriver eller på scenen, pysslar han med DIY -elektronik eller kod i hopp om att bli en galet forskare.

Mer från Ian Buckley

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera