Come creare effetti webcam stupefacenti con Java ed elaborazione

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 codice facilmente.

Ci sono molti progetti per principianti di grafica e animazione che usano Processing, ma sono anche in grado di manipolare video live.

Oggi realizzerai una presentazione video dal vivo di diversi effetti controllati dal mouse, utilizzando la libreria video Elaborazione. Oltre a capovolgere il video dal vivo, imparerai a ridimensionarlo e colorarlo, e come farlo seguire il cursore del mouse.

Impostazione del progetto

Per iniziare, scarica Elaborazione e apri uno schizzo vuoto. Questo tutorial è basato su un sistema Windows, ma dovrebbe funzionare su qualsiasi computer con una webcam.

Potrebbe essere necessario installare la libreria Elaborazione video, accessibile in Sketch> Importa libreria> Aggiungi libreria . Cerca video nella casella di ricerca e installa la libreria da The Processing Foundation .

Una volta installato, sei pronto per partire. Se si desidera saltare la codifica, è possibile scaricare lo schizzo completo . È molto meglio farlo da zero, comunque!

Utilizzo di una webcam con elaborazione

Iniziamo importando la libreria e creando una funzione di configurazione . 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, si crea un'istanza Capture chiamata cam per memorizzare i dati dalla webcam. Nella configurazione , la funzione dimensione imposta una finestra di dimensioni 640 × 480 pixel in cui lavorare.

La riga successiva assegna cam a una nuova istanza di Capture , per questo schizzo, che ha le stesse dimensioni della finestra, prima di dire alla telecamera di accendere cam.start () .

Non ti preoccupare 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 una funzione di disegno . Inserisci questo sotto il codice sopra, al di fuori delle parentesi graffe.

 void draw(){ if (cam.available()){ cam.read(); } image(cam,0,0); } 

La funzione draw viene chiamata ogni frame. Ciò significa che molte volte al secondo, se la fotocamera ha i dati disponibili , leggi i dati da essa.

Questi dati vengono quindi visualizzati come un'immagine , nella posizione 0, 0 , che è in alto a sinistra nella finestra.

Salva il tuo schizzo e premi il pulsante play nella parte superiore dello schermo.

Successo! I dati memorizzati dalla camma vengono stampati 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 l'avvio dello script.

Capovolgimento dell'immagine

Ora che hai un'immagine live della webcam, manipolala. Nella funzione di disegno, sostituire l' immagine (camma 0,0); con queste due linee di codice.

 scale(-1,1); image(cam,-width,0); 

Salva e riesegui lo schizzo. Riesci a vedere la differenza? Utilizzando un valore di scala negativo, tutti i valori x (i pixel orizzontali) sono ora invertiti. Per questo motivo, è necessario utilizzare il valore negativo della larghezza della finestra per posizionare correttamente l'immagine.

Capovolgere l'immagine sottosopra richiede solo un paio di piccole modifiche.

 scale(-1,-1); image(cam,-width,-height); 

Questa volta, sia il valori xey vengono capovolte, trasformando l'immagine live della telecamera capovolta. Finora hai codificato un'immagine normale, un'immagine capovolta in orizzontale e un'immagine capovolta verticalmente. Impostiamo un modo per passare da una all'altra.

Rendendolo Ciclo

Invece di riscrivere il tuo codice ogni volta, possiamo usare i numeri per scorrerli. Crea un nuovo numero intero nella parte superiore del tuo codice chiamato switcher .

 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 metodo di disegno 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 attivano a seconda del valore del commutatore. Se non corrisponde a una delle nostre istruzioni if o if else , la clausola else viene reimpostata su 0. La logica è un'importante abilità per principianti da apprendere e puoi scoprirne di più e molto di più con un eccellente tutorial di programmazione su YouTube !

Usando il mouse

L'elaborazione ha metodi incorporati per l'accesso al mouse. Per rilevare quando l'utente fa clic con il mouse, aggiungi la funzione mousePress nella parte inferiore dello script.

 void mousePressed(){ switcher++; } 

L'elaborazione ascolta i clic del mouse e interrompe il programma per eseguire questo metodo quando ne r
ileva uno. Ogni volta che il metodo viene chiamato, il valore di switcher aumenta di uno. Salva ed esegui il tuo script.

Ora, quando si preme il pulsante del mouse, si passa attraverso i diversi orientamenti dei video, prima di tornare all'originale. Finora hai appena capovolto il video, ora facciamo qualcosa di un po 'più interessante.

Aggiungere più effetti

Ora, codificherete un effetto immagine live 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 l'ultima istruzione if if 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 la funzione immagine per creare quattro immagini separate della videocamera in ogni angolo dello schermo e renderle di dimensioni ridotte.

La funzione tinta aggiunge colore ad ogni immagine della telecamera. I numeri delle parentesi sono valori rosso, verde e blu (RGB) . Tinta colora tutto il codice seguente con il colore scelto.

Salva e gioca per vedere il risultato. Prova a cambiare i numeri RGB in ogni funzione di tinta per cambiare i colori!

Farlo seguire il mouse

Infine, facciamo in modo che l'immagine live segua la posizione del mouse usando le funzioni utili dalla libreria Processing. Aggiungi questo sopra la parte opposta della tua logica.

 else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } 

Qui, stai posizionando l'immagine dalla tua fotocamera con mouseX e mouseY . Questi sono costruiti in Valori di elaborazione che restituiscono a quale pixel punta il mouse.

Questo è tutto! Cinque varianti di video dal vivo attraverso il codice. Tuttavia, quando esegui il codice, noterai un paio di problemi.

Terminare il codice

Il codice che hai creato finora funziona, ma noterai due problemi. In primo luogo, una volta mostrata la variazione in quadricromia, tutto in seguito è colorato di viola. In secondo luogo, quando sposti il ​​video con il mouse, lascia una traccia. Puoi sistemarlo aggiungendo un paio di linee all'inizio della funzione di disegno.

 void draw(){ tint(256,256,256); background(0); //draw function continues normally here! 

All'inizio di ciascun fotogramma questo codice ripristina il colore della tinta su bianco e aggiunge un colore di sfondo del nero per interrompere il trascinamento dei video. Ora quando esegui il test del programma, tutto funziona perfettamente!

Effetti di Webcame: Arte dal codice

L'elaborazione è molto potente e puoi usarla per fare molte cose. È una piattaforma eccellente per fare arte con il codice, ma è ugualmente adatta al controllo dei robot !

Se Java non ti piace, c'è una libreria JavaScript basata su Processing chiamata p5.js. È basato su browser e persino i principianti possono utilizzarlo per creare fantastiche animazioni reattive !

Immagine di credito: Syda_Productions / Depositphotos

Leggi l'articolo completo: Come creare effetti webcam stupefacenti con Java ed elaborazione

Fonte: Utilizzare