Home-theater-designers
Processing is een krachtig hulpmiddel waarmee kunst door middel van code kan worden gemaakt. 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 beginnende grafische en animatieprojecten die Processing gebruiken, maar het is ook in staat om live video te manipuleren.
Vandaag ga je een live videodiavoorstelling maken van verschillende effecten die met de muis worden bestuurd, met behulp van de Processing-videobibliotheek. Naast het omdraaien van de live video, leer je het formaat en kleur ervan aan te passen en hoe je het de muiscursor kunt laten volgen.
Projectconfiguratie
Beginnen, downloaden Verwerking en open een lege schets. Deze tutorial is gebaseerd op een Windows-systeem, maar zou op elke computer met een webcam moeten werken.
Mogelijk moet u de Processing Video-bibliotheek installeren, toegankelijk onder Sketch > Bibliotheek importeren > Bibliotheek toevoegen . Zoeken Video in het zoekvak en installeer de bibliotheek vanaf Stichting Verwerking .
Eenmaal geïnstalleerd, bent u klaar om te gaan. Als u de codering wilt overslaan, kunt u: download de volledige schets . 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 opstelling functie. Voer het volgende in de blanco Verwerkingsschets in:
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
Na het importeren van de videobibliotheek maakt u een Vastlegging instantie genaamd Oranje om de gegevens van de webcam op te slaan. In opstelling , de maat functie stelt een in 640x480 pixelgroot venster om in te werken.
De volgende regel wijst Oranje naar een nieuwe instantie van Vastlegging , voor dit schets, die even groot is als het venster, voordat u de camera vertelt om in te schakelen met cam.start() .
Maak je geen zorgen als je dit voor nu niet allemaal begrijpt. Kortom, we hebben Processing opgedragen een raam te maken, onze camera te zoeken en aan te zetten! Om het weer te geven hebben we een . nodig tekenen functie. Voer dit in onder de bovenstaande code, buiten de accolades.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
De tekenen functie wordt elk frame aangeroepen. Dit betekent dat vele malen per seconde, indien de camera heeft gegevens beschikbaar jij lezen de gegevens ervan.
Deze gegevens worden dan weergegeven als een afbeelding , op de positie 0, 0 , dat is de linkerbovenhoek van het venster.
Sla je schets op en druk op de afspeelknop bovenaan het scherm.
Succes! De gegevens die zijn opgeslagen door Oranje wordt elk frame correct op het scherm afgedrukt. Als u problemen ondervindt, controleer dan uw code grondig. Java heeft elk haakje 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 het niet werkt, wacht dan een paar seconden nadat u het script heeft gestart.
De afbeelding omdraaien
Nu je een live webcambeeld hebt, gaan we het manipuleren. Vervang in de tekenfunctie: afbeelding (cam,0,0); met deze twee regels code.
scale(-1,1);
image(cam,-width,0);
Sla de schets op en voer deze opnieuw uit. Zie je het verschil? Door een negatief te gebruiken schaal waarde, alle x waarden (de horizontale pixels) zijn nu omgekeerd. Daarom moeten we de negatieve waarde van het venster gebruiken breedte om de afbeelding correct te positioneren.
Om de afbeelding ondersteboven te draaien, zijn slechts een paar kleine wijzigingen nodig.
scale(-1,-1);
image(cam,-width,-height);
Deze keer zijn zowel de x en en waarden worden omgedraaid, waardoor het live camerabeeld ondersteboven wordt gekeerd. Tot nu toe heb je een normale afbeelding, een horizontaal gespiegelde afbeelding en een verticaal gespiegelde afbeelding gecodeerd. Laten we een manier bedenken om ertussen te fietsen.
Het laten fietsen
In plaats van je code elke keer te herschrijven, kunnen we cijfers gebruiken om er doorheen te bladeren. Maak een nieuwe geheel getal bovenaan je code genaamd wisselaar .
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, geef je deze een waarde van 0 . Nu kunnen we logica gebruiken om te veranderen wat er met de afbeelding gebeurt. Update je tekenen methode ziet er als volgt uit:
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 indien of als anders verklaringen, de anders clausule wordt teruggezet naar 0. Logica is een belangrijke vaardigheid voor beginners om te leren, en je kunt er meer over te weten komen met een uitstekende YouTube-programmeerhandleiding!
De muis gebruiken
Processing heeft ingebouwde methoden voor toegang tot de muis. Om te detecteren wanneer de gebruiker met de muis klikt, voegt u de muis ingedrukt functie onderaan uw script.
windows 10 fabrieksreset vanuit bios
void mousePressed(){
switcher++;
}
Processing luistert naar muisklikken en onderbreekt het programma om deze methode uit te voeren wanneer het er een detecteert. Elke keer dat de methode wordt aangeroepen, wordt de waarde van switcher met één groter. Sla uw script op en voer het uit.
Wanneer u nu op de muisknop drukt, bladert het door de verschillende oriëntaties van video's, voordat het terugkeert naar het origineel. Tot nu toe heb je de video net omgedraaid, laten we nu iets interessanters doen.
Meer effecten toevoegen
Nu codeert u een vierkleurig live-beeldeffect dat lijkt op de beroemde kunstwerken van Andy Warhol. Het toevoegen van meer effecten is net zo eenvoudig als het toevoegen van een andere clausule aan de logica. Voeg dit toe aan je script tussen de laatste anders als verklaring, 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 afbeelding functie om vier afzonderlijke camerabeelden in elke hoek van het scherm te creëren en ze allemaal op halve grootte te maken.
De tint functie voegt kleur toe aan elk camerabeeld. De nummers die de haakjes zijn: rood, groen en blauw (RGB) waarden. Tint kleurt alle onderstaande code met de gekozen kleur.
Opslaan en spelen om het resultaat te zien. Probeer de RGB-nummers in elk te veranderen tint functie om de kleuren te veranderen!
De muis laten volgen
Laten we tot slot het live-beeld de muispositie laten volgen met behulp van handige functies uit de Processing-bibliotheek. Voeg dit toe boven de anders 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 muisX en muisY . Deze zijn ingebouwd in Processing-waarden die teruggeven naar welke pixel de muis wijst.
Dat is het! Vijf variaties van live video via code. Wanneer u de code uitvoert, zult u echter een aantal problemen opmerken.
De code afmaken
De code die u tot nu toe hebt gemaakt, werkt, maar u zult twee problemen opmerken. Ten eerste, zodra de vierkleurenvariatie zichtbaar is, is alles daarna paars getint. Ten tweede, wanneer u de video met de muis verplaatst, laat deze een spoor achter. Je kunt het oplossen door een paar regels 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 zet deze code de tintkleur terug naar wit en voegt een zwarte achtergrondkleur toe om te voorkomen dat de video sporen achterlaat. Als je het programma nu test, werkt alles perfect!
Webcame-effecten: kunst uit code
Verwerking is erg krachtig en je kunt het voor veel dingen gebruiken. Het is een uitstekend platform voor het maken van kunst met code, maar het is evenzeer 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 browsergebaseerd en zelfs beginners kunnen het gebruiken om fantastische reactieve animaties te maken!
Afbeelding tegoed: Syda_Productions / Depositphotos
Deel Deel Tweeten E-mail 3 manieren om te controleren of een e-mail echt of nep isAls je een e-mail hebt ontvangen die er een beetje dubieus uitziet, is het altijd het beste om de authenticiteit ervan te controleren. Hier zijn drie manieren om te zien of een e-mail echt is.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Java
- webcam
- Verwerken
- Codeerhandleidingen
Ian Buckley is een freelance journalist, muzikant, performer en videoproducent die in Berlijn, Duitsland woont. Als hij niet aan het schrijven of op het podium staat, sleutelt hij aan doe-het-zelf-elektronica of code in de hoop een gekke wetenschapper te worden.
Meer van Ian BuckleyAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren