Home-theater-designers
L'elaborazione è un potente strumento che consente la creazione di arte attraverso il codice. È la combinazione di una libreria Java per lavorare con la grafica e un ambiente di sviluppo integrato (IDE) che consente di scrivere ed eseguire facilmente il codice.
Esistono molti progetti per principianti di grafica e animazione che utilizzano Processing, ma è anche in grado di manipolare video dal vivo.
Oggi realizzerai una presentazione video in diretta di diversi effetti controllati dal mouse, utilizzando la libreria video Processing. Oltre a capovolgere il video dal vivo, imparerai a ridimensionarlo e colorarlo e come farlo seguire il cursore del mouse.
Configurazione del progetto
Iniziare, scarica Elaborazione e apri uno schizzo vuoto. Questo tutorial è basato su un sistema Windows, ma dovrebbe funzionare su qualsiasi computer dotato di webcam.
Potrebbe essere necessario installare la libreria Processing Video, accessibile sotto Schizzo > Importa libreria > Aggiungi libreria . Cercare video nella casella di ricerca e installa la libreria da La Fondazione per il trattamento .
Una volta installato, sei pronto per partire. Se vuoi saltare la codifica, puoi scarica lo sketch completo . Tuttavia, è molto meglio farlo da zero!
Utilizzo di una webcam con elaborazione
Iniziamo importando la libreria e creando un impostare funzione. Immettere quanto segue nello schizzo di elaborazione vuoto:
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
Dopo aver importato la libreria video, crei un Catturare istanza chiamata arancia per memorizzare i dati dalla webcam. In impostare , il dimensione la funzione imposta un 640x480 finestra di dimensioni in pixel in cui lavorare.
La riga successiva assegna arancia a una nuova istanza di Catturare , per questo schizzo, che ha le stesse dimensioni della finestra, prima di dire alla fotocamera di accendersi con cam.start() .
Non preoccuparti se non capisci ogni parte di questo per ora. In breve, abbiamo detto a Processing di creare una finestra, trovare la nostra fotocamera e accenderla! Per visualizzarlo abbiamo bisogno di un disegno funzione. Inserisci questo sotto il codice sopra, al di fuori delle parentesi graffe.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
Il disegno la funzione viene chiamata ogni frame. Ciò significa che molte volte al secondo, Se la fotocamera ha dati a disposizione tu leggere i dati da esso.
Questi dati vengono quindi visualizzati come un Immagine , in posizione 0, 0 , che è la parte superiore sinistra della finestra.
Salva il tuo schizzo e premi il pulsante di riproduzione nella parte superiore dello schermo.
Successo! I dati conservati da arancia viene stampato correttamente sullo schermo ogni fotogramma. Se hai problemi, controlla attentamente il tuo codice. Java ha bisogno di ogni parentesi e punto e virgola nel posto giusto! L'elaborazione può anche richiedere alcuni secondi per accedere alla webcam, quindi se pensi che non funzioni attendi qualche secondo dopo aver avviato lo script.
Capovolgere l'immagine
Ora che hai un'immagine live della webcam, manipoliamola. Nella funzione di disegno, sostituisci immagine(cam,0,0); con queste due righe di codice.
scale(-1,1);
image(cam,-width,0);
Salva e riesegui lo schizzo. Riesci a vedere la differenza? Usando un negativo scala valore, tutti i X i valori (i pixel orizzontali) sono ora invertiti. Per questo motivo, dobbiamo usare il valore negativo della finestra larghezza per posizionare correttamente l'immagine.
Capovolgere l'immagine richiede solo un paio di piccole modifiche.
scale(-1,-1);
image(cam,-width,-height);
Questa volta, entrambi i X e e i valori vengono capovolti, capovolgendo l'immagine live della telecamera. Finora hai codificato un'immagine normale, un'immagine capovolta orizzontalmente e un'immagine capovolta verticalmente. Impostiamo un modo per passare da uno all'altro.
Rendendolo ciclo
Invece di riscrivere il codice ogni volta, possiamo usare i numeri per scorrerli. Crea un nuovo numero intero all'inizio del tuo codice chiamato interruttore .
import processing.video.*;
int switcher = 0;
Capture cam;
Possiamo usare il valore di switcher per determinare cosa succede all'immagine della telecamera. Quando lo schizzo inizia, gli dai un valore di 0 . Ora possiamo usare la logica per cambiare ciò che accade all'immagine. Aggiorna il tuo disegno metodo per assomigliare a questo:
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;
}
}
Ora, tutte e tre le varianti del codice si attiveranno a seconda del valore di switcher. Se non corrisponde a uno dei nostri Se o se altro dichiarazioni, il altro la clausola viene reimpostata a 0. La logica è un'importante abilità per principianti da imparare e puoi scoprire su di loro e molto altro con un eccellente tutorial di programmazione su YouTube!
Uso del mouse
L'elaborazione ha metodi incorporati per l'accesso al mouse. Per rilevare quando l'utente fa clic con il mouse, aggiungi il pulsante mouse premuto funzione nella parte inferiore dello script.
mantieni il display del monitor acceso dopo aver chiuso lo schermo del laptop Windows 10
void mousePressed(){
switcher++;
}
L'elaborazione ascolta qualsiasi clic del mouse e interrompe il programma per eseguire questo metodo quando ne rileva uno. Ogni volta che il metodo viene chiamato, il valore di switcher aumenta di uno. Salva ed esegui il tuo script.
Ora, quando premi il pulsante del mouse, scorre i diversi orientamenti dei video, prima di tornare all'originale. Finora hai appena capovolto il video, ora facciamo qualcosa di un po' più interessante.
Aggiunta di più effetti
Ora, codificherai un effetto immagine dal vivo a quattro colori simile alle famose opere d'arte di Andy Warhol. Aggiungere più effetti è semplice come aggiungere un'altra clausola alla logica. Aggiungi questo al tuo script tra gli ultimi altrimenti se dichiarazione, e altro .
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);
}
Questo codice utilizza il Immagine funzione per creare quattro immagini della telecamera separate in ogni angolo dello schermo e per renderle tutte dimezzate.
Il tinta la funzione aggiunge colore a ciascuna immagine della telecamera. I numeri sono le parentesi rosso, verde e blu (RGB) valori. Tinta colora tutti i seguenti codici con il colore scelto.
Salva e gioca per vedere il risultato. Prova a cambiare i numeri RGB in ciascuno tinta funzione per cambiare i colori!
Fargli seguire il mouse
Infine, facciamo in modo che l'immagine live segua la posizione del mouse utilizzando le utili funzioni della libreria Processing. Aggiungi questo sopra il altro parte della tua logica.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
Qui stai posizionando l'immagine dalla tua fotocamera a mouseX e topoY . Questi sono incorporati nei valori di elaborazione che restituiscono a quale pixel punta il mouse.
Questo è tutto! Cinque varianti di video in diretta tramite codice. Tuttavia, quando esegui il codice, noterai un paio di problemi.
Finire il codice
Il codice che hai creato finora funziona, ma noterai due problemi. In primo luogo, una volta mostrata la variazione in quattro colori, tutto in seguito è colorato di viola. In secondo luogo, quando sposti il video con il mouse, lascia una scia. Puoi risolverlo aggiungendo un paio di linee nella parte superiore della funzione di disegno.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
All'inizio di ogni fotogramma questo codice reimposta il colore della tinta su bianco e aggiunge un colore di sfondo nero per impedire al video di lasciare tracce. Ora, quando provi il programma, tutto funziona perfettamente!
Effetti webcam: arte dal codice
L'elaborazione è molto potente e puoi usarla per fare molte cose. È un'eccellente piattaforma per creare arte con il codice, ma è ugualmente adatta per controllare i robot!
Se Java non fa per te, esiste una libreria JavaScript basata su Processing chiamata p5.js. È basato su browser e anche i principianti possono usarlo per creare fantastiche animazioni reattive!
Credito immagine: Syda_Productions / Depositphotos
Condividere Condividere Tweet E-mail 3 modi per verificare se un'e-mail è reale o falsaSe hai ricevuto un'email che sembra un po' dubbia, è sempre meglio verificarne l'autenticità. Ecco tre modi per sapere se un'e-mail è reale.
Leggi Avanti Argomenti correlati- Programmazione
- Giava
- Webcam
- in lavorazione
- Tutorial sulla programmazione
Ian Buckley è un giornalista freelance, musicista, performer e produttore di video che vive a Berlino, in Germania. Quando non sta scrivendo o sul palco, armeggia con l'elettronica o il codice fai-da-te nella speranza di diventare uno scienziato pazzo.
Altro da Ian BuckleyIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti