Home-theater-designers
El processament és una potent eina que permet la creació d'art mitjançant el codi. És la combinació d'una biblioteca Java per treballar amb gràfics i un entorn de desenvolupament integrat (IDE) que us permet escriure i executar codi fàcilment.
Hi ha molts projectes per a principiants en gràfics i animacions que utilitzen Processament, però també és capaç de manipular el vídeo en directe.
Avui realitzareu una presentació de diapositives en vídeo en directe de diferents efectes controlats pel ratolí, mitjançant la biblioteca de vídeo Processament. A més d’invertir el vídeo en directe, aprendràs a canviar-ne la mida i a acolorir-lo i a fer-lo seguir el cursor del ratolí.
Configuració del projecte
Començar, descàrrega Processant i obriu un esbós en blanc. Aquest tutorial es basa en un sistema Windows, però hauria de funcionar en qualsevol ordinador amb càmera web.
Pot ser que hagueu d’instal·lar la biblioteca de vídeo en procés, accessible a la secció Esbós> Importa biblioteca> Afegeix biblioteca . Buscar Vídeo al quadre de cerca i instal·leu la biblioteca des de La Fundació Processadora .
Un cop instal·lat, ja esteu a punt. Si voleu ometre la codificació, podeu fer-ho descarregueu l'esbós complet . No obstant això, és molt millor fer-ho vosaltres mateixos des de zero.
Ús d’una càmera web amb processament
Comencem per importar la biblioteca i crear un fitxer configuració funció. Introduïu el següent a l'esbós de processament en blanc:
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
Després d'importar la biblioteca de vídeo, creeu un fitxer Captura instància anomenada taronja per emmagatzemar les dades de la càmera web. En configuració , el mida la funció configura a 640x480 finestra de mida de píxels per treballar.
La següent línia s’assigna taronja a una nova instància de Captura , per això esbós, que té la mateixa mida que la finestra, abans de dir a la càmera que s'encengui cam.start () .
No us preocupeu si ara no enteneu totes les parts. En resum, hem dit a Processing que faci una finestra, que trobi la càmera i l’engegui. Per mostrar-lo necessitem un dibuixar funció. Introduïu-ho a sota del codi anterior, fora dels claudàtors.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
El dibuixar La funció s'anomena cada fotograma. Això vol dir que moltes vegades cada segon, si la càmera té dades disponible vostè llegir les dades d’ella.
Tot seguit, aquestes dades es mostren com a fitxer imatge , a la posició 0, 0 , que es troba a la part superior esquerra de la finestra.
Deseu l'esbós i premeu el botó de reproducció de la part superior de la pantalla.
Èxit! Les dades emmagatzemades per taronja s'està imprimint correctament a la pantalla cada fotograma. Si teniu problemes, comproveu bé el vostre codi. Java necessita tots els claudàtors i els punts i coma al lloc correcte. El processament també pot requerir uns segons per accedir a la càmera web, de manera que si creieu que no funciona, espereu uns segons després d'iniciar l'script.
Invertir la imatge
Ara que teniu una imatge de càmera web en directe, manipulem-la. A la funció de dibuix, substituïu imatge (lleva, 0,0); amb aquestes dues línies de codi.
scale(-1,1);
image(cam,-width,0);
Deseu i torneu a executar l'esbós. Es veu la diferència? Mitjançant l’ús d’un negatiu escala valor, tots els x els valors (els píxels horitzontals) ara s’inverteixen. Per això, hem d’utilitzar el valor negatiu de la finestra amplada per situar la imatge correctament.
Capgirar la imatge cap per avall requereix només un parell de petits canvis.
scale(-1,-1);
image(cam,-width,-height);
Aquesta vegada, tant el x i i es canvien els valors, capgirant la imatge de la càmera en directe. Fins ara heu codificat una imatge normal, una imatge capgirada horitzontalment i una imatge capgirada verticalment. Configurem una manera de circular entre ells.
Fer-lo cicle
En lloc de tornar a escriure el codi cada vegada, podem utilitzar els números per recórrer-los. Crea un nou enter a la part superior del codi anomenat commutador .
import processing.video.*;
int switcher = 0;
Capture cam;
Podem utilitzar el valor del commutador per determinar què passa amb la imatge de la càmera. Quan s’inicia l’esbós, li assigneu un valor de 0 . Ara podem utilitzar la lògica per canviar el que passa amb la imatge. Actualitzeu el vostre dibuixar mètode que té aquest aspecte:
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;
}
}
Ara, les tres variacions del codi s'activaran en funció del valor del commutador. Si no coincideix amb un dels nostres si o bé si una altra cosa declaracions, el en cas contrari la clàusula es restableix a 0. La lògica és una habilitat important per a principiants que podeu aprendre i podeu obtenir-ne informació i molt més amb un excel·lent tutorial de programació de YouTube.
Utilitzant el ratolí
El processament té mètodes integrats per accedir al ratolí. Afegiu el fitxer per detectar quan l'usuari fa clic al ratolí premut amb el ratolí funció a la part inferior del vostre script.
sonarà treballar amb google home
void mousePressed(){
switcher++;
}
El processament escolta qualsevol clic del ratolí i interromp el programa per dur a terme aquest mètode quan en detecta un. Cada vegada que es crida el mètode, el valor del commutador augmenta en un. Deseu i executeu el vostre script.
Ara, quan premeu el botó del ratolí, recorre les diferents orientacions dels vídeos abans de tornar a l'original. Fins ara acabeu d'invertir el vídeo, ara fem una mica més interessant.
Afegir més efectes
Ara, codifiqueu un efecte d'imatge en viu de quatre colors similar a les famoses obres d'art d'Andy Warhol. Afegir més efectes és tan senzill com afegir una altra clàusula a la lògica. Afegiu-lo al vostre script entre l'últim si no declaració i en cas contrari .
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);
}
Aquest codi utilitza el fitxer imatge funció per crear quatre imatges de càmera separades a cada cantonada de la pantalla i fer-les totes mitjanes.
El tint La funció afegeix color a cada imatge de la càmera. Els números entre claudàtors són vermell, verd i blau (RGB) valors. Tinteu els colors del codi següent amb el color escollit.
Desa i juga per veure el resultat. Proveu de canviar els números RGB de cadascun tint funció per canviar els colors!
Fer que segueixi el ratolí
Finalment, fem que la imatge en directe segueixi la posició del ratolí mitjançant funcions útils de la biblioteca de processament. Afegiu-lo a sobre de en cas contrari part de la vostra lògica.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
Aquí esteu posicionant la imatge de la càmera mouseX i ratolí . Aquests s’inclouen en valors de processament que retornen a quin píxel apunta el ratolí.
Això és! Cinc variacions de vídeo en directe mitjançant codi. No obstant això, quan executeu el codi, notareu un parell de problemes.
Acabant el codi
El codi que heu creat fins ara funciona, però notareu dos problemes. En primer lloc, una vegada que es mostra la variació de quatre colors, tot el que queda després és de color porpra. En segon lloc, quan moveu el vídeo amb el ratolí, deixa un rastre. Podeu solucionar-ho afegint un parell de línies a la part superior de la funció de dibuix.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
Al començament de cada fotograma, aquest codi restableix el color del to a blanc i afegeix un color de fons de negre per deixar que el vídeo deixi rutes. Ara, quan proveu el programa, tot funciona perfectament.
Efectes de càmeres web: Art From Code
El processament és molt potent i el podeu utilitzar per fer moltes coses. És una plataforma excel·lent per fer art amb codi, però és igualment adequada per controlar els robots.
Si Java no és el vostre, hi ha una biblioteca JavaScript basada en Processing anomenada p5.js. Es basa en navegadors i fins i tot els principiants poden utilitzar-la per crear fantàstiques animacions reactives.
Crèdit de la imatge: Syda_Productions / Depositphotos
Compartir Compartir Tweet Correu electrònic 3 maneres de comprovar si un correu electrònic és real o falsSi heu rebut un correu electrònic que sembla una mica dubtós, sempre és millor comprovar-ne l’autenticitat. A continuació, es mostren tres maneres de saber si un correu electrònic és real.
Llegiu a continuació Temes relacionats- Programació
- Java
- Càmera web
- Processament
- Tutorials de codificació
Ian Buckley és periodista, músic, intèrpret i productor de vídeo independent que viu a Berlín, Alemanya. Quan no escriu ni a l’escenari, juga amb electrònica o codi de bricolatge amb l’esperança de convertir-se en un científic boig.
Més de Ian BuckleySubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us