Hoe verbazingwekkende webcameffecten te maken met behulp van Java en verwerking
Advertentie
Verwerking is een krachtig hulpmiddel waarmee kunst kan worden gecreëerd door middel van code. Het is de combinatie van een Java-bibliotheek voor het werken met afbeeldingen en een geïntegreerde ontwikkelomgeving (IDE) waarmee u eenvoudig code kunt schrijven en uitvoeren.
Er zijn veel grafische en animatieprojecten voor beginners die Processing gebruiken, maar het is ook in staat om live video te manipuleren.
Vandaag maak je een live-videodiavoorstelling van verschillende effecten die worden bestuurd door de muis, met behulp van de videobibliotheek Verwerken. Naast het omdraaien van de live video, leer je het formaat en de kleur ervan te wijzigen en de muiscursor te volgen.
Project instellen
Download om te beginnen Verwerking en open een lege schets. Deze zelfstudie is gebaseerd op een Windows-systeem, maar zou op elke computer met een webcam moeten werken.
Mogelijk moet u de videobibliotheek verwerken, toegankelijk via Sketch> Import Library> Library toevoegen . Zoek naar video in het zoekvak en installeer de bibliotheek van The Processing Foundation .
Eenmaal geïnstalleerd, bent u klaar om te gaan. Als u de codering wilt overslaan, kunt u de volledige schets downloaden. Het is echter veel beter om het helemaal zelf te maken!
Een webcam gebruiken met verwerking
Laten we beginnen met het importeren van de bibliotheek en het maken van een instellingsfunctie . Voer het volgende in de lege verwerkingsschets in:
import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } Nadat u de videotheek hebt geïmporteerd, maakt u een Capture- instantie met de naam cam om de gegevens van de webcam op te slaan. In de setup stelt de grootte- functie een 640 × 480 pixelformaat venster in om in te werken.
De volgende regel wijst cam toe aan een nieuw exemplaar van Capture, voor deze schets, die dezelfde grootte heeft als het venster, voordat de camera wordt gevraagd om in te schakelen met cam.start () .
Maak je geen zorgen als je voorlopig niet elk onderdeel hiervan begrijpt. Kortom, we hebben Processing gezegd om een venster te maken, onze camera te vinden en aan te zetten! Om het weer te geven hebben we een tekenfunctie nodig. Voer dit in onder de bovenstaande code, buiten de accolades.
void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } De tekenfunctie wordt elk frame genoemd. Dit betekent dat vele keren per seconde, als de camera gegevens beschikbaar heeft, u de gegevens ervan leest .
Deze gegevens worden vervolgens weergegeven als een afbeelding op positie 0, 0, linksboven in het venster.
Sla uw schets op en druk op de afspeelknop boven aan het scherm.
Succes! De gegevens die door cam zijn opgeslagen, worden elk frame correct op het scherm afgedrukt. Als u problemen ondervindt, controleer dan uw code grondig. Java heeft elke haak en puntkomma op de juiste plaats nodig! De verwerking kan ook enkele seconden duren om toegang te krijgen tot de webcam, dus als u denkt dat deze niet werkt, wacht u enkele seconden nadat u het script hebt gestart.
De afbeelding omdraaien
Nu je een live webcam-afbeelding hebt, laten we het manipuleren. Vervang in de tekenfunctie de afbeelding (nok, 0, 0); met deze twee coderegels.
scale(-1, 1); image(cam, -width, 0); Sla de schets op en voer deze opnieuw uit. Zie je het verschil? Door een negatieve schaalwaarde te gebruiken, worden alle x- waarden (de horizontale pixels) nu omgekeerd. Daarom moeten we de negatieve waarde van de vensterbreedte gebruiken om de afbeelding correct te positioneren.
Het beeld ondersteboven draaien vereist slechts een paar kleine wijzigingen.
scale(-1, -1); image(cam, -width, -height); 
Deze keer worden zowel de x- als de y- waarde omgedraaid, waardoor het live camerabeeld op zijn kop staat. Tot nu toe heb je een normale afbeelding, een horizontaal gespiegelde afbeelding en een verticaal gespiegelde afbeelding gecodeerd. Laten we een manier bedenken om tussen hen te fietsen.
Makend het cyclus
In plaats van uw code elke keer te herschrijven, kunnen we nummers gebruiken om ze te doorlopen. Maak een nieuw geheel getal boven aan uw code met de naam switcher .
import processing.video.*; int switcher = 0; Capture cam; We kunnen de waarde van switcher gebruiken om te bepalen wat er met het camerabeeld gebeurt. Wanneer de schets begint, geeft u deze een waarde van 0 . Nu kunnen we logica gebruiken om te veranderen wat er met de afbeelding gebeurt. Werk uw tekenmethode bij om er zo uit te zien:
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 worden alle drie de variaties van de code geactiveerd, afhankelijk van de waarde van de switcher. Als het niet overeenkomt met een van onze if of if else- instructies, wordt de else- clausule teruggezet op 0. Logica is een belangrijke beginnersvaardigheid om te leren, en je kunt er meer over te weten komen en nog veel meer met een uitstekende YouTube-programmeerhandleiding De 17 Beste YouTube-programmeerhandleidingen De 17 beste YouTube-programmeerhandleidingen In dit bericht willen we je wijzen op enkele van de beste YouTube-programmeringseries die we hebben gevonden. Al deze zijn voldoende om je voeten nat te maken als een newbie-programmeur. Lees verder !
Gebruik van de muis
De verwerking heeft ingebouwde methoden voor toegang tot de muis. Om te detecteren wanneer de gebruiker op de muis klikt, voegt u de functie MousePressed onder aan uw script toe.
void mousePressed(){ switcher++; } De verwerking luistert naar muisklikken en onderbreekt het programma om deze methode uit te voeren wanneer deze wordt gedetecteerd. Elke keer dat de methode wordt aangeroepen, wordt de waarde van de switcher met één groter. Sla uw script op en voer het uit.
Wanneer u nu op de muisknop drukt, doorloopt deze de verschillende oriëntaties van video's voordat hij terugkeert naar het origineel. Tot nu toe heb je de video omgedraaid, laten we nu iets interessants gaan doen.
Meer effecten toevoegen
Nu gaat u een live-vierkleurig live-effect coderen, vergelijkbaar met de beroemde kunstwerken van Andy Warhol. Meer effecten toevoegen is net zo eenvoudig als het toevoegen van een andere clausule aan de logica. Voeg dit toe aan uw script tussen de laatste else- instructie en anders .
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); } Deze code gebruikt de beeldfunctie om vier afzonderlijke camerabeelden in elke hoek van het scherm te maken en ze allemaal halfformaat te maken.
De tintfunctie voegt kleur toe aan elk camerabeeld. De cijfers tussen haakjes zijn rode, groene en blauwe (RGB) waarden. Tint kleurt alle volgende code met de gekozen kleur.
Opslaan en spelen om het resultaat te zien. Probeer de RGB-nummers in elke tintfunctie te wijzigen om de kleuren te wijzigen!
De muis volgen
Laten we tot slot het livebeeld de muispositie laten volgen met behulp van handige functies uit de verwerkingsbibliotheek. Voeg dit toe boven het andere deel van je logica.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Hier positioneert u het beeld van uw camera op mouseX en mouseY . Deze zijn gebouwd in Verwerkingswaarden die teruggeven naar welke pixel de muis wijst.
Dat is het! Vijf variaties van live video via code. Wanneer u de code uitvoert, ziet u echter een aantal problemen.
De code voltooien
De code die u tot nu toe hebt gemaakt, werkt, maar u zult twee problemen opmerken. Ten eerste, als de vierkleurenvariatie zichtbaar is, is alles daarna paars gekleurd. Ten tweede, wanneer u de video met de muis verplaatst, laat deze een spoor achter. Je kunt dit oplossen door een paar lijnen toe te voegen aan de bovenkant van de tekenfunctie.
void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! Aan het begin van elk frame reset deze code de tintkleur naar wit en voegt een achtergrondkleur van zwart toe om te voorkomen dat de video sporen achterlaat. Wanneer u het programma test, werkt alles perfect!
Webcame-effecten: Art From Code
Verwerking is zeer krachtig en u kunt het gebruiken om veel dingen te doen. Het is een uitstekend platform voor het maken van kunst met code, maar het is even geschikt voor het besturen van robots!
Als Java niet jouw ding is, is er een JavaScript-bibliotheek op basis van Processing genaamd p5.js. Het is gebaseerd op een browser en zelfs beginners kunnen het gebruiken om fantastische reactieve animaties te maken Scripts een stemgevoelige robotanimatie in p5.js Scripts een stemgevoelige robotanimatie in p5.js Wil je je kinderen interesseren voor programmeren ? Laat hen deze gids zien voor het bouwen van een geluid-reactieve geanimeerde robotkop. Lees verder !
Beeldtegoed: Syda_Productions / Depositphotos
Ontdek meer over: Codeercursussen, Java, Verwerking, Webcam.
