Jeffrey Cross
Jeffrey Cross

Codebox: Stvorite čarobni štapić

Praćenje boja je jednostavna, ali moćna tehnika za stvaranje zabavnih novih načina za interakciju sa softverom. Koristeći web-kameru kao senzor, program se “obučava” da pronađe određenu boju na nekoj vrsti fizičkog pokazivača. Obojeni pokazivač preslikava se u koordinatu (x, y) kako se pomiče. Gotovo u stvarnom vremenu, to vam omogućuje da koristite pokazivač poput miša, otvarajući sve vrste zanimljivih mogućnosti. Ova instalacija Codeboxa pokazuje kako se koristi obrada i web-kamera računala (za ovaj primjer koristio sam ugrađenu iSight kameru za MacBook) kako bih stvorio virtualni "čarobni štapić" koji može mijenjati boje na sličan način:

Iako je sam primjer jednostavan, kôd je sastavni dio raznih projekata koje ću kasnije istražiti u ovoj seriji.

Postavljanje obrade

Prije skakanja u ovaj projekt, odvojimo nekoliko minuta i malo pregledamo o obradi. Prvo, ako ste potpuno novi u programu, trebali biste provesti neko vrijeme u učenju jezika na Processing.org ili preuzimanjem kopije Početak obrade, koju su napisali Ben Fry i Casey Reas, ko-kreatori Jezik obrade. Iako ću usput ukazati na pomoćne materijale i reference, vjerojatno ćete biti vrlo frustrirani ako nemate osnovno uzemljenje u sustavu. Ako to već niste učinili, preuzmite Obradu za svoju platformu i instalirajte ga.

Napravi "štapić"

Nakon što je obrada postavljena i skica je pokrenuta, morat ćete napraviti "štapić". (Stavljam štapić u navodnike jer stvarno možete koristiti bilo koji objekt s prepoznatljivom bojom.) Instructables ima mnogo stvarno cool primjera za ovo, kao "Napravite strašan Harry Potter štapić s lista papira i ljepila za pištolj". Ključni element, barem iz gledišta obrade, je da štapić ima prepoznatljivu boju na vrhu. Kao brzo i prljavo rješenje, zamotao sam narančastu post-bilješku Day-Glo oko kraja štapića. Nije baš Harry Potter, ali posao je obavljen.

Pokrenite skicu

Kada je štapić spreman, možete dati skicu pokušaju. Pokrenite Obradu i zatim zalijepite sljedeći kod u glavni prozor. Možete označiti prvi redak, pomicati se do kraja, a zatim koristiti ctrl-c (tvrdi) ili možete kliknuti na ovu vezu (magic_wand.pde), pritisnite Ctrl + a da biste odabrali cijeli tekst, a zatim upotrijebite Ctrl + c za kopiranje (lakše).

Kada zalijepite kôd, pritisnite gumb za pokretanje u gornjem lijevom kutu prozora Obrada, na ovaj način:

Naposljetku prijeđite ispred svoje web-kamere. Sada ste spremni za igru ​​s praćenjem boja.

Steknite boju praćenja

Prvi korak je postaviti boju koju će obrada obraditi. Da biste to učinili, pomaknite vrh štapića u bijeli okvir u gornjem lijevom kutu. Prikazat će se gornji okvir u boji koja izgleda uglavnom poput vrha štapa. (Više o tome u sekundi.) Kada je boja postavljena, pritisnite bilo koju tipku.

Iza kulisa, obrada čita svaki okvir koji dolazi s web-kamere i koristi prekrasan mali hak od strane guruja za obradu Daniela Shiffmana, okrećući sliku vodoravno kako bi stvorio prirodniju interakciju sa skicom. Inače se svi vaši pokreti pojavljuju kao zrcalna slika, tako da se pomicanje štapa udesno pojavljuje kao pomicanje ulijevo, i obrnuto. Sve se to događa u sljedećem isječku koda:

ako (cam.available ()) {cam.read (); // Ovo je mali trik iz obrade gurua Daniela Shiffmana koji // otkriva efekt zrcalne slike na vaše pokrete u web kamera pushMatrix (); skala (-1.0, 1.0); slika (cam, -cam.width, 0); popMatrix (); slika (CAM, 0,0); }

Nakon što se slika pročita breg varijabla, prosljeđuje se searchForTargetColor () funkcija (funkcije su opisane u poglavlju 8. t Početak rada s obradom). Ova funkcija skenira piksele unutar bijele kutije za prikupljanje ciljeva i prosječuje njihove crvene, zelene i plave komponente kako bi dobila ukupnu boju koja predstavlja ciljnu boju. To se događa ovdje:

color nakupiTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; za (int i = 0; i <targetSide; i ++) {za (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = targetX + i; // x točka unutar ciljnog okvira int y = targetY + j; // y točka unutar okvira cilja // Izvucite trenutnu boju piksela u boji c = cam.pixels [y * width + x]; r + = crveno (c); g + = zeleno (c); b + = plava (c); }} targetColor = boja (r / cnt, g / cnt, b / cnt); return targetColor; }

Traži ciljnu boju

Nakon što pritisnete tipku, postavite boju cilja (koja je sada spremljena u targetColor varijabla), skica prebacuje modus od stjecanja ciljne boje do traženja ciljne boje. Ovaj posao obavlja posao searchForTargetColor () koja skenira svaki piksel na slici i uspoređuje ga s targetColor, Ako je udaljenost između dviju boja manja od 50 jedinica (ili neku drugu vrijednost koju ste postavili colorDist), a onda se smatra podudaranjem. (Brza bilješka o udaljenosti: to znači da RGB boje tretirate kao "prostor" koji ima crvenu os, zelenu osi i plavu osi, a udaljenost između dvije boje je samo euklidska udaljenost između dvije točke od osnovne Algebre .) Ako piksel odgovara ciljnoj boji, on se dodaje ukupnom broju odgovarajućih piksela. Nakon što je svaki piksel testiran, tada nalazimo prosjek svih odgovarajućih boja kako bismo dobili ukupnu poziciju za vrh štapa. Sve se to događa ovdje:

void searchForTargetColor () {// Reset wandx = 0; wandY = 0; wandFound = false; // Sada tražite piksele koji odgovaraju ciljnoj boji int numPoints = 0; // Broj pronađenih bodova int sx = 0; // Suma svih x koordinata pronađena int sy = 0; // Zbir svih y koordinata za (int i = 0; i <širina; i ++) {za (int j = 0; j <visina; j ++) {boja piks = cam.pixels [j * širina + i] ; // Grab pixel at i, j float dr = crveno (targetColor) - crveno (pix); float dg = zeleno (targetColor) - zeleno (pix); float db = plava (targetColor) - plava (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Ako se podudara, tada zadržite ukupnu vrijednost ako (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Ako smo pronašli ciljnu boju, postavite koordinate štapića ako (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = true; }}

Ovaj koncept prosječnog položaja je razlog zašto je tako važno koristiti različite boje na vrhu. Ako odaberete zajedničku boju, kao što je bijela, tada vaša prosječna pozicija može uključivati ​​ne samo štapić, već okvir vrata, košulju, par cipela ili bilo koji drugi slučajni bijeli objekt koji se dogodio u vidnom polju ,

Nakon što se izračuna lokacija cilja, skica zatim stvara niz zraka koje dolaze iz vrha štapa.Ovo se rješava u drawWand () funkcija, koja koristi tajmer za kontrolu kako brzo se zrake pojavljuju. (Tajmeri su pokriveni u primjeru 7-11 knjige Getting Started). Ovo je isječak za ovo:

void drawwand (int N, int R) {strokeWeight (6); udar (wandColor); glatko, nesmetano(); int elapsedTime = millis () - oldTime; float r = map (elapsedTime, 0, wandFrequency, 0, R); za (int i = 0; i <N; i ++) {float step = radijan (360.0 / N); float dx = r * sin (i * korak) + wandX; float dy = r * cos (i * korak) + wandY; linija (wandX + 10 * sin (i * korak), wandY + 10 * cos (i * korak), dx, dy); } if (elapsedTime> wandFrequency) {oldTime = millis (); }}

Izvršite radnju

Posljednji korak je korištenje štapa kojim se kontrolira ponašanje skice. U ovom primjeru dodao sam mali krug u gornjem lijevom kutu zaslona koji mijenja boje na temelju brojača koji možete postaviti. Ako pomaknete vrh štapa u krug, zrake štapića će se prebaciti na novu boju. što je samo neznatna modifikacija Primjera 5-16 iz Početnog rada:

// Postavlja krug boja na neku novu nevažeću boju setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; if (elapsedTime> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = boja (int (slučajni (255)), int (slučajni (255)), int (slučajni (255))); // Slučajna boja}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); ako (d <cR) {wandColor = colorCircleColor; }}

U sljedećem nastavku Codeboxa gradit ćemo na ovom primjeru stvaranjem više pokretnih ciljeva. Bilo da pišete igre, sustave čestica, ili čarobnu emisiju s Arduino-om (predmetom budućeg posta, ali za to je potrebno malo vremena), to su alati koje ćete ponovno koristiti kao što idete dalje s obradom.

Više:
Pogledajte sve rate Codeboxa

U skladištu za kavu:


Početak rada s obradom Naučite programiranje računala na jednostavan način s obradom, jednostavnim jezikom koji vam omogućuje da koristite kod za izradu crteža, animacije i interaktivne grafike. Programski tečajevi obično počinju s teorijom, ali ova knjiga omogućuje vam da skočite izravno u kreativne i zabavne projekte. Idealan je za svakoga tko želi naučiti osnovno programiranje i služi kao jednostavan uvod u grafiku za osobe s određenim vještinama programiranja.

Udio

Ostavite Komentar