Come creare incredibili effetti webcam usando Java ed elaborazione
Annuncio pubblicitario
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 live.
Oggi realizzerai una presentazione video live di diversi effetti controllati dal mouse, utilizzando la libreria video Processing. Oltre a capovolgere il video live, imparerai a ridimensionarlo e colorarlo e a come farlo seguire il cursore del mouse.
Installazione del progetto
Per iniziare, scarica Elaborazione e apri uno schizzo vuoto. Questo tutorial si basa su un sistema Windows, ma dovrebbe funzionare su qualsiasi computer con una webcam.
Potrebbe essere necessario installare la libreria Elaborazione video, accessibile in Schizzo> 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, tuttavia!
Utilizzo di una webcam con elaborazione
Iniziamo importando la libreria e creando una funzione di installazione . 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. Nell'installazione, la funzione di 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 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 videocamera 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 di disegno viene chiamata ogni fotogramma. Ciò significa che molte volte al secondo, se la fotocamera dispone di dati disponibili, i dati vengono letti da essa.
Questi dati vengono quindi visualizzati come immagine, nella posizione 0, 0, che è in alto a sinistra nella finestra.
Salva il tuo schizzo e premi il pulsante di riproduzione nella parte superiore dello schermo.
Successo! I dati memorizzati dalla cam vengono correttamente stampati sullo schermo ogni fotogramma. In caso di problemi, controllare attentamente il 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 ritieni che non funzioni attendi qualche secondo dopo aver avviato lo script.
Lanciando l'immagine
Ora che hai un'immagine della webcam live, manipoliamola. Nella funzione di disegno, sostituisci l' immagine (cam, 0, 0); con queste due righe di codice.
scale(-1, 1); image(cam, -width, 0); Salvare ed eseguire nuovamente lo schizzo. Riesci a vedere la differenza? Usando un valore di scala negativo, tutti i valori x (i pixel orizzontali) vengono 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, entrambi i valori xey vengono capovolti, capovolgendo l'immagine della telecamera dal vivo. Finora hai codificato un'immagine normale, un'immagine capovolta orizzontalmente e un'immagine capovolta verticalmente. Creiamo un modo per scorrere tra di loro.
Rendendolo ciclo
Invece di riscrivere il codice ogni volta, possiamo usare i numeri per scorrere tra loro. Crea un nuovo numero intero nella parte superiore del 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 verranno attivate in base al 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 imparare, e puoi scoprirle e molto altro con un eccellente tutorial di programmazione di YouTube I 17 migliori tutorial di programmazione di YouTube I 17 migliori tutorial di programmazione di YouTube In questo post, vorremmo indicarti alcune delle migliori serie di programmazione di YouTube che abbiamo trovato. Tutti questi sono sufficienti per bagnare i piedi come programmatore principiante. Leggi di più !
Usando il mouse
L'elaborazione ha metodi integrati per l'accesso al mouse. Per rilevare quando l'utente fa clic con il mouse, aggiungi la funzione mousePressed nella parte inferiore dello script.
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 viene chiamato il metodo, il valore di switcher aumenta di uno. Salva ed esegui il tuo script.
Ora, quando si preme il pulsante del mouse, scorre i diversi orientamenti dei video, prima di tornare all'originale. Finora hai appena girato il video, ora facciamo qualcosa di un po 'più interessante.
Aggiunta di più effetti
Ora codificherai un effetto di 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 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 della telecamera separate in ogni angolo dello schermo e renderle tutte a metà.
La funzione tinta aggiunge colore a ogni immagine della fotocamera. I numeri tra parentesi sono i 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!
Fallo seguire il mouse
Infine, facciamo in modo che l'immagine live segua la posizione del mouse usando utili funzioni della libreria Processing. Aggiungi questo sopra l' altra parte della tua logica.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Qui, stai posizionando l'immagine dalla tua fotocamera su mouseX e mouseY . Questi sono integrati in valori di elaborazione che restituiscono il pixel a cui punta il mouse.
Questo è tutto! Cinque varianti di video live tramite codice. Tuttavia, quando esegui il codice, noterai un paio di problemi.
Completamento del codice
Il codice che hai creato finora funziona, ma noterai due problemi. In primo luogo, una volta che la variazione di quattro colori mostra, 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 all'inizio 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 sul bianco e aggiunge un colore di sfondo nero per fermare il video lasciando tracce. Ora, quando provi il programma, tutto funziona perfettamente!
Effetti Webcame: Art From Code
L'elaborazione è molto potente e puoi usarla per fare molte cose. È una piattaforma eccellente per creare arte con il codice, ma è ugualmente adatta per controllare i robot!
Se Java non fa per te, esiste una libreria JavaScript basata sull'elaborazione chiamata p5.js. È basato su browser e anche i principianti possono usarlo per creare fantastiche animazioni reattive Come creare script di un'animazione robot sensibile alla voce in p5.js Come scriptare un'animazione robot sensibile alla voce in p5.js Desideri coinvolgere i tuoi figli nella programmazione ? Mostra loro questa guida per costruire una testa robotica animata reattiva al suono. Leggi di più !
Credito di immagine: Syda_Productions / Depositphotos
Ulteriori informazioni su: Tutorial sulla codifica, Java, Elaborazione, Webcam.
