Codebox: crea una bacchetta magica - 💡 Fix My Ideas

Codebox: crea una bacchetta magica

Codebox: crea una bacchetta magica


Autore: Ethan Holmes, 2019

Il tracciamento del colore è una tecnica semplice ma potente per creare nuovi modi divertenti di interagire con il software. Utilizzando una webcam come sensore, un programma viene "addestrato" per individuare un colore specifico su una sorta di puntatore fisico. Il puntatore colorato viene mappato su una coordinata (x, y) mentre viene spostato. Fatto in tempo reale, questo ti permette di usare il puntatore come un mouse, aprendo ogni genere di possibilità interessanti. Questa rata di Codebox mostra come usare Processing e la webcam del tuo computer (per questo esempio, ho usato la fotocamera iSight incorporata nel mio MacBook) per creare una "bacchetta magica" virtuale che può cambiare i colori alla cue, come questa:

Sebbene l'esempio stesso sia semplice, il codice è un elemento fondamentale per una varietà di progetti che esplorerò più avanti in questa serie.

Imposta l'elaborazione

Prima di saltare in questo progetto, prendiamo qualche minuto e analizziamo un po 'di Processing. Innanzitutto, se sei completamente nuovo al programma, dovresti passare un po 'di tempo a imparare la lingua su Processing.org o a prendere una copia di Getting Started with Processing, scritta da Ben Fry e Casey Reas, i co-creatori di la lingua di elaborazione. Mentre indicherò materiale di supporto e riferimenti lungo il percorso, è probabile che sarai molto frustrato a meno che tu non abbia delle basi di base nel sistema. Quindi, se non lo hai già fatto, scarica Processing per la tua piattaforma e installalo.

Crea una "bacchetta"

Una volta che Elaborazione è impostata e lo schizzo è in esecuzione, dovrai creare una "bacchetta". (Ho messo la bacchetta tra virgolette perché puoi davvero usare qualsiasi oggetto con un colore distintivo.) Instructables ha molti esempi davvero interessanti per questo, come "Crea un'enorme bacchetta di Harry Potter da un foglio di carta e colla per colla a colla". L'elemento chiave, almeno dal punto di vista di Processing, è che la bacchetta ha un colore distintivo sulla punta. Come soluzione rapida e sporca, ho avvolto un post-it arancione Day-Glo attorno all'estremità di una bacchetta. Non esattamente Harry Potter, ma ha fatto il lavoro.

Inizia lo schizzo

Una volta che la tua bacchetta è pronta, puoi provare lo schizzo. Avvia elaborazione e quindi incolla il seguente codice nella finestra principale. Puoi evidenziare la prima riga, scorrere fino in fondo e poi usare ctrl-c (difficile), oppure puoi cliccare su questo link (magic_wand.pde), premere Ctrl + a per selezionare tutto il testo, e quindi usare Ctrl + c per copiarlo (più facile).

Dopo aver incollato il codice, premi il pulsante di avvio nell'angolo in alto a sinistra della finestra di elaborazione, in questo modo:

Infine, passa davanti alla tua webcam. Ora sei pronto per giocare con il tracciamento del colore.

Acquisisci il colore di tracciamento

Il primo passaggio consiste nell'impostare il colore che verrà tracciato da Processing. Per fare ciò, sposta la punta della bacchetta nella casella bianca nell'angolo in alto a sinistra. Vedrai che la casella sopra mostra un colore che sembra per lo più la punta della bacchetta. (Più su questo in un secondo.) Una volta che il colore è impostato, premere un tasto qualsiasi.

Dietro le quinte, Processing sta leggendo ogni frame proveniente dalla webcam, e usando un meraviglioso piccolo hack del guru del processing Daniel Shiffman, capovolgendo l'immagine orizzontalmente per creare un'interazione più naturale con lo schizzo. Altrimenti, tutti i tuoi movimenti appaiono come un'immagine speculare, in modo che lo spostamento della bacchetta verso destra appaia come spostandolo a sinistra, e viceversa. Tutto ciò si verifica nel seguente frammento di codice:

if (cam.available ()) {cam.read (); // Questo è un piccolo trucchetto di Elaborazione dal guru Daniel Shiffman per // rivedere l'effetto dell'immagine speculare sui tuoi movimenti nella webcam pushMatrix (); scala (-1.0, 1.0); immagine (camma, -cam.width, 0); popMatrix (); immagine (camma, 0,0); }

Dopo aver letto l'immagine Camera variabile, è passato al searchForTargetColor () funzione (le funzioni sono descritte nel capitolo 8 di Iniziare con l'elaborazione). Questa funzione analizza i pixel all'interno del riquadro di acquisizione del bersaglio bianco e calcola la media dei componenti rosso, verde e blu per ottenere un colore complessivo che rappresenti il ​​colore target. Questo succede qui:

color acquireTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; for (int i = 0; i <targetSide; i ++) {for (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = targetX + i; // x punto all'interno della casella di destinazione int y = targetY + j; // y punto all'interno della casella di destinazione // Estrarre il colore di colore del pixel corrente c = cam.pixels [y * width + x]; r + = rosso (c); g + = verde (c); b + = blu (c); }} targetColor = color (r / cnt, g / cnt, b / cnt); return targetColor; }

Cerca il colore target

Una volta premuto un tasto per impostare il colore del bersaglio (che ora è memorizzato nel targetColor variabile), lo schizzo cambia modalità dall'acquisizione del colore target alla ricerca del colore target. Questo lavoro è svolto da searchForTargetColor () funzione, che analizza ogni pixel dell'immagine e la confronta con targetColor. Se la distanza tra i due colori è inferiore a 50 unità (o qualsiasi valore impostato in colorDist), quindi è considerato una corrispondenza. (Una breve nota sulla distanza: questo significa che tratti i colori RGB come uno "spazio" che ha un asse rosso, un asse verde e un asse blu, la distanza tra due colori è solo la distanza euclidea tra due punti dell'algebra di base .) Se il pixel corrisponde al colore di destinazione, viene aggiunto a un totale parziale di pixel corrispondenti. Una volta che tutti i pixel sono stati testati, troviamo la media di tutti i colori corrispondenti per ottenere una posizione complessiva per la punta della bacchetta. Tutto questo succede qui:

void searchForTargetColor () {// Reimposta wand wandX = 0; wandY = 0; wandFound = false; // Ora cerca i pixel che corrispondono al colore target int NumPoints = 0; // Numero di punti trovati int sx = 0; // Somma di tutte le coordinate x trovate int sy = 0; // Somma di tutte le coordinate y trovate per (int i = 0; i <width; i ++) {per (int j = 0; j <height; j ++) {color pix = cam.pixels [j * width + i] ; // Cattura il pixel su i, j float dr = rosso (targetColor) - red (pix); float dg = green (targetColor) - green (pix); float db = blue (targetColor) - blue (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Se è una corrispondenza, mantieni un totale parziale se (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Se abbiamo trovato il colore di destinazione, imposta le coordinate della bacchetta if (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = true; }}

Questo concetto di posizione media è il motivo per cui è così importante utilizzare un colore distinto sulla punta. Se dovessi scegliere un colore comune, come il bianco, la posizione media potrebbe includere non solo la bacchetta, ma il telaio della porta, la tua camicia, un paio di scarpe o qualunque altro oggetto bianco casuale si trovasse nel campo visivo .

Una volta calcolata la posizione del bersaglio, lo schizzo crea una serie di raggi che emanano dalla punta della bacchetta. Questo è gestito nel drawWand () funzione, che utilizza un timer per controllare la velocità con cui i raggi emergono. (I timer sono trattati nell'Esempio 7-11 del manuale Getting Started). Ecco lo snippet per questo:

void drawWand (int N, int R) {strokeWeight (6); Corsa (wandColor); liscio(); int elapsedTime = millis () - oldTime; float r = map (elapsedTime, 0, wandFrequency, 0, R); for (int i = 0; i <N; i ++) {float step = radians (360.0 / N); float dx = r * sin (i * step) + wandX; float dy = r * cos (i * step) + wandY; linea (wandX + 10 * sin (i * step), wandY + 10 * cos (i * step), dx, dy); } if (elapsedTime> wandFrequency) {oldTime = millis (); }}

Esegui un'azione

L'ultimo passaggio consiste nell'utilizzare la bacchetta per controllare il comportamento dello schizzo. In questo esempio, ho aggiunto un piccolo cerchio nell'angolo in alto a sinistra dello schermo che cambia i colori in base a un timer che puoi impostare. Se sposti la punta della bacchetta nel cerchio, i raggi della bacchetta passeranno al nuovo colore. che è solo una leggera modifica dell'Esempio 5-16 di Getting Started:

// Imposta il cerchio di colori su un nuovo colore casuale vuoto void setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; if (elapsedTime> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = color (int (random (255)), int (random (255)), int (random (255))); // Colore casuale}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); if (d <cR) {wandColor = colorCircleColor; }}

Nella prossima puntata di Codebox, svilupperemo questo esempio creando più bersagli mobili. Che tu stia scrivendo giochi, sistemi di particelle o uno spettacolo di magia con comando Arduino controllato da bacchetta (soggetto di un post futuro, ma ci vorrà un po 'per arrivarci), questi sono strumenti che userete ancora e ancora man mano che procedi con Processing.

Di Più:
Vedi tutte le rate di Codebox

Nel capannone di Maker:


Guida introduttiva all'elaborazione Imparate a programmare il computer in modo semplice con Processing, un linguaggio semplice che consente di utilizzare il codice per creare disegni, animazioni e grafica interattiva. I corsi di programmazione di solito iniziano con la teoria, ma questo libro ti consente di passare direttamente a progetti creativi e divertenti. È ideale per chiunque voglia apprendere la programmazione di base e serve come semplice introduzione alla grafica per le persone con alcune abilità di programmazione.



Si Può Essere Interessati

Guarda questo trailer DIY Star Wars realizzato con cartone e cannucce

Guarda questo trailer DIY Star Wars realizzato con cartone e cannucce


Evita le folle del Black Friday: 8 progetti da fare con le cose che hai a casa

Evita le folle del Black Friday: 8 progetti da fare con le cose che hai a casa


Guarda: Ecco come funziona un bombardiere Nerf a canna multipla

Guarda: Ecco come funziona un bombardiere Nerf a canna multipla


Marie Claire Pairs Disegni PCB stilizzati con gioielli di lusso

Marie Claire Pairs Disegni PCB stilizzati con gioielli di lusso






Messaggi Recenti