Home-theater-designers
Prelucrarea este un instrument puternic care permite crearea de artă prin cod. Este combinația dintre o bibliotecă Java pentru lucrul cu grafica și un mediu de dezvoltare integrat (IDE) care vă permite să scrieți și să rulați cod cu ușurință.
Există multe proiecte de grafică și animație pentru începători care utilizează Procesare, dar este, de asemenea, capabil să manipuleze videoclipuri live.
Astăzi veți realiza un slideshow video live cu diferite efecte controlate de mouse, utilizând biblioteca video Prelucrare. Pe lângă întoarcerea videoclipului live, veți învăța să îl redimensionați și să îl colorați și cum să îl faceți să urmeze cursorul mouse-ului.
Configurare proiect
A incepe, descărcare Procesare și deschideți o schiță goală. Acest tutorial se bazează pe un sistem Windows, dar ar trebui să funcționeze pe orice computer cu o cameră web.
Poate fi necesar să instalați biblioteca Video Processing, accesibilă în Schiță> Import bibliotecă> Adăugare bibliotecă . Caută Video în caseta de căutare și instalați biblioteca de la Fundația de procesare .
Odată instalat, sunteți gata de plecare. Dacă doriți să omiteți codarea, puteți descărcați schița completă . Cu toate acestea, este mult mai bine să-l faci singur de la zero!
Utilizarea unei camere web cu procesare
Să începem prin importarea bibliotecii și crearea unui fișier înființat funcţie. Introduceți următoarele în schița de procesare goală:
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
După importarea bibliotecii video, creați un fișier Captură instanță numită portocale pentru a stoca datele de pe camera web. În înființat , mărimea funcția configurează a 640x480 fereastră cu dimensiunea pixelilor pentru a lucra.
Următoarea linie atribuie portocale la o nouă instanță de Captură , pentru acest schiță, care are aceeași dimensiune ca fereastra, înainte de a spune camerei să pornească cam.start () .
Nu vă faceți griji dacă nu înțelegeți fiecare parte a acestui lucru pentru moment. Pe scurt, i-am spus Procesării să facă o fereastră, să ne găsească camera și să o pornească! Pentru a-l afișa avem nevoie de un a desena funcţie. Introduceți acest lucru sub codul de mai sus, în afara parantezelor cretate.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
The a desena funcția se numește fiecare cadru. Aceasta înseamnă că de multe ori în fiecare secundă, dacă camera are date disponibil tu citit datele din acesta.
Aceste date sunt apoi afișate ca imagine , la poziție 0, 0 , care este în partea stângă sus a ferestrei.
Salvați schița și apăsați butonul de redare din partea de sus a ecranului.
Succes! Datele stocate de portocale este corect imprimat pe ecran fiecare cadru. Dacă aveți probleme, verificați cu atenție codul. Java are nevoie de fiecare paranteză și punct și virgulă la locul potrivit! Procesarea poate necesita, de asemenea, câteva secunde pentru a accesa camera web, deci dacă credeți că nu funcționează, așteptați câteva secunde după lansarea scriptului.
Răsucirea imaginii
Acum că aveți o imagine cu webcam live, să o manipulăm. În funcția de extragere, înlocuiți imagine (cam, 0,0); cu aceste două linii de cod.
scale(-1,1);
image(cam,-width,0);
Salvați și relansați schița. Poți vedea diferența? Prin utilizarea unui negativ scară valoare, toate X valorile (pixelii orizontali) sunt acum inversate. Din acest motiv, trebuie să folosim valoarea negativă a ferestrei lăţime pentru a poziționa corect imaginea.
Întoarcerea imaginii cu capul în jos necesită doar câteva modificări mici.
scale(-1,-1);
image(cam,-width,-height);
De data aceasta, atât X și și valorile sunt răsturnate, întorcând imaginea camerei live cu capul în jos. Până acum ați codat o imagine normală, o imagine orizontală și o imagine verticală. Să înființăm o modalitate de a circula între ele.
Realizarea ciclului
În loc să vă rescriem codul de fiecare dată, putem folosi numerele pentru a le parcurge. Creaza un nou întreg în partea de sus a codului dvs. numit comutator .
import processing.video.*;
int switcher = 0;
Capture cam;
Putem folosi valoarea comutatorului pentru a determina ce se întâmplă cu imaginea camerei. Când începe schița, îi acordați o valoare de 0 . Acum putem folosi logica pentru a schimba ceea ce se întâmplă cu imaginea. Actualizați-vă a desena metoda de a arăta astfel:
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;
}
}
Acum, toate cele trei variante ale codului se vor declanșa în funcție de valoarea comutatorului. Dacă nu se potrivește cu una dintre a noastră dacă sau dacă altceva declarații, altceva clauza este resetată la 0. Logica este o abilitate importantă pentru începători de învățat și puteți afla despre ele și multe altele cu un excelent tutorial de programare YouTube!
Folosind mouse-ul
Procesarea are metode încorporate pentru accesarea mouse-ului. Pentru a detecta când utilizatorul face clic pe mouse, adăugați fișierul mouseApăsat funcția din partea de jos a scriptului.
jocuri gratuite distractive pentru a te juca când te plictisești
void mousePressed(){
switcher++;
}
Procesarea ascultă orice clicuri ale mouse-ului și întrerupe programul pentru a efectua această metodă atunci când detectează unul. De fiecare dată când metoda este apelată, valoarea comutatorului crește cu una. Salvați și rulați scriptul.
Acum, când apăsați butonul mouse-ului, acesta trece prin diferite orientări ale videoclipurilor, înainte de a reveni la original. Până acum tocmai ați răsucit videoclipul, acum să facem ceva mai interesant.
Adăugarea mai multor efecte
Acum, veți codifica un efect de imagine live în patru culori similar cu faimoasele opere de artă Andy Warhol. Adăugarea mai multor efecte este la fel de simplă ca adăugarea unei alte clauze la logică. Adăugați acest lucru la scriptul dvs. între ultimul altfel dacă declarație și altceva .
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);
}
Acest cod folosește imagine funcția de a crea patru imagini separate ale camerei în fiecare colț al ecranului și de a le face pe toate pe jumătate.
The tentă funcția adaugă culoare fiecărei imagini a camerei. Numerele paranteze sunt roșu, verde și albastru (RGB) valori. Colorează toate codurile următoare cu culoarea aleasă.
Salvați și jucați pentru a vedea rezultatul. Încercați să schimbați numerele RGB din fiecare tentă funcție pentru a schimba culorile!
Făcându-l să urmeze mouse-ul
În cele din urmă, să facem ca imaginea live să urmeze poziția mouse-ului folosind funcții utile din biblioteca Procesare. Adăugați acest lucru deasupra altceva parte din logica ta.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
Aici, poziționați imaginea de pe camera foto mouseX și mouseY . Acestea sunt încorporate în valori de procesare care returnează către ce pixel este îndreptat mouse-ul.
Asta e! Cinci variante ale videoclipului live prin cod. Cu toate acestea, când rulați codul, veți observa câteva probleme.
Finalizarea codului
Codul pe care l-ați creat până acum funcționează, dar veți observa două probleme. În primul rând, odată cu afișarea variantei de patru culori, totul ulterior este colorat în violet. În al doilea rând, atunci când mutați videoclipul cu mouse-ul, acesta lasă o urmă. O puteți remedia adăugând câteva linii în partea de sus a funcției de desen.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
La începutul fiecărui cadru, acest cod resetează culoarea nuanței la alb și adaugă o culoare de fundal negru pentru a opri videoclipul lăsând urmele. Acum, când testați programul, totul funcționează perfect!
Efecte webcame: artă din cod
Procesarea este foarte puternică și o puteți folosi pentru a face multe lucruri. Este o platformă excelentă pentru a crea artă cu cod, dar este la fel de potrivită pentru controlul roboților!
Dacă Java nu este lucrul tău, există o bibliotecă JavaScript bazată pe Procesare numită p5.js. Este bazat pe browser și chiar și începătorii îl pot folosi pentru a crea animații reactive fantastice!
Image Credit: Syda_Productions/ Depositphotos
Acțiune Acțiune Tweet E-mail 3 moduri de a verifica dacă un e-mail este real sau falsDacă ați primit un e-mail care arată puțin dubios, cel mai bine este întotdeauna să verificați autenticitatea acestuia. Iată trei moduri de a afla dacă un e-mail este real.
Citiți în continuare Subiecte asemănătoare- Programare
- Java
- Cameră web
- Prelucrare
- Tutoriale de codare
Ian Buckley este un jurnalist independent, muzician, interpret și producător video care locuiește în Berlin, Germania. Când nu scrie sau pe scenă, se ocupă de electronice sau coduri DIY în speranța de a deveni un om de știință nebun.
Mai multe de la Ian BuckleyAboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona