Jeffrey Cross
Jeffrey Cross

Codebox: Ustvarite čarobno palico

Barvno sledenje je preprosta, a zmogljiva tehnika za ustvarjanje novih načinov za interakcijo s programsko opremo. Z uporabo spletne kamere kot senzorja se program »trenira«, da najde določeno barvo na nekakšnem fizičnem kazalcu. Barvni kazalec je preslikan v koordinato (x, y), ko se premakne. Končano v realnem času, to vam omogoča, da uporabite kazalec kot miš, ki odpira vse vrste zanimivih možnosti. Ta obrok Codeboxa vam pokaže, kako uporabljati obdelavo in spletno kamero računalnika (za ta primer sem uporabil vgrajeno kamero iSight za MacBook), da bi ustvaril navidezno "čarobno palico", ki lahko spremeni barve na sliki:

Sam primer je preprost, koda pa je gradnik za različne projekte, ki jih bom pozneje raziskal v tej seriji.

Nastavitev obdelave

Preden skočimo v ta projekt, si vzemimo nekaj minut in malo pregledamo o obdelavi. Prvič, če ste povsem novi v programu, bi morali nekaj časa preučiti jezik na Processing.org ali z oprijemom kopije za začetek obdelave, ki so jo napisali Ben Fry in Casey Reas, soustvarjalci Jezik obdelave. Medtem ko bom ob tem opozoril na podporno gradivo in reference, boste verjetno zelo razočarani, če v sistemu ne boste imeli osnovne podlage. Če tega še niste storili, prenesite Obdelava za vašo platformo in jo namestite.

Naredite »palico«

Ko je obdelava nastavljena in je skica zagnana, boste morali narediti »palico.« (Postavil sem palico v narekovaje, ker lahko resnično uporabite kateri koli predmet z značilno barvo.) Instructables ima veliko res dobrih primerov za to, kot "Naredite čudovito palico iz Harry Potterja iz lista papirja in lepilnega lepila". Ključni element, vsaj z vidika predelave, je, da ima palica značilno barvo na konici. Kot hitro in umazano rešitev sem ob koncu paličice ovijala oranžno opombo Day-Glo. Ni ravno Harry Potter, toda opravi delo.

Začnite skico

Ko je palica pripravljena, lahko skico poskusite. Zaženite Obdelava in nato prilepite naslednjo kodo v glavno okno. Lahko označite prvo vrstico, se pomaknete do konca in nato uporabite ctrl-c (trdo) ali pa kliknete to povezavo (magic_wand.pde), pritisnite Ctrl + a, da izberete celotno besedilo, nato pa uporabite Ctrl + c za njegovo kopiranje (lažje).

Ko prilepite kodo, pritisnite gumb za začetek v zgornjem levem kotu okna Obdelava, kot je ta:

Končno stopite pred vašo spletno kamero. Zdaj ste pripravljeni na igranje z barvnim sledenjem.

Pridobite barvo sledenja

Prvi korak je nastavitev barve, ki jo bo obdelala obdelava. To naredite tako, da konico palice premaknete v belo polje na zgornjem levem vogalu. Zgornje polje bo prikazalo barvo, ki je videti večinoma kot konica palice. (Več o tem v sekundi.) Ko je barva nastavljena, pritisnite katerokoli tipko.

Za kulisami, Processing obravnava vsak okvir, ki prihaja iz spletne kamere, in uporablja čudovit mali hack, ki ga izvaja guru Daniel Shiffman, s katerim obrne sliko vodoravno, da ustvari bolj naravno interakcijo s skico. V nasprotnem primeru se vsa gibanja prikazujejo kot zrcalna slika, tako da se premikanje palice v desno pojavi kot premik v levo in obratno. To se zgodi v naslednjem odlomku kode:

if (cam.available ()) {cam.read (); // To je nify mali trik iz guruja za obdelavo Daniel Shiffman, da / / razkrije učinek zrcalne slike na vaše predloge v webcam pushMatrix (); lestvica (-1,0, 1,0); slika (cam, -cam.width, 0); popMatrix (); slika (cam, 0,0); }

Po branju slike cam spremenljivko, se prenese na searchForTargetColor () (funkcije so opisane v poglavju 8. t Začetek obdelave). Ta funkcija optično prebere slikovne pike znotraj belega polja za pridobivanje tarč in izračuna njihovo rdečo, zeleno in modro komponento, da dobijo skupno barvo, ki predstavlja ciljno barvo. To se dogaja tukaj:

barva отриматиTargetColor () {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 znotraj ciljnega polja int y = targetY + j; // y točka znotraj ciljnega polja // izvlecite trenutno barvo pikslov c = cam.pixels [y * širina + x]; r + = rdeča (c); g + = zeleno (c); b + = modra (c); }} targetColor = barva (r / cnt, g / cnt, b / cnt); return targetColor; }

Poiščite ciljno barvo

Ko pritisnete tipko, nastavite barvo cilja (ki je zdaj shranjena v targetColor spremenljivka), skica preklopi načine od pridobitve ciljne barve do iskanja ciljne barve. To delo opravi searchForTargetColor () funkcija, ki skenira vsako sliko in jo primerja s sliko targetColor. Če je razdalja med dvema barvama manjša od 50 enot (ali katerokoli vrednost, ki ste jo nastavili v colorDist), potem se šteje za ujemanje. (Hitra opomba o razdalji: to pomeni, da RGB barve obravnavate kot »prostor«, ki ima rdečo os, zeleno os in modro os, razdalja med dvema barvama je le evklidska razdalja med dvema točkama od osnovne algebre .) Če se slikovna pika ujema s ciljno barvo, se doda tekočemu skupnemu številu ustreznih slikovnih pik. Ko je vsak piksel preizkušen, potem najdemo povprečje vseh ujemajočih se barv, da dobimo skupno pozicijo za vrh palice. Vse to se dogaja tukaj:

void searchForTargetColor () {// Ponastavi wandX = 0; wandY = 0; wandFound = false; // Zdaj poiščite piksle, ki ustrezajo ciljni barvi int numPoints = 0; // Število najdenih točk int sx = 0; // Vsota vseh x koordinat, ugotovljenih int sy = 0; // Vsota vseh koordinat y, najdenih za (int i = 0; i <širina; i ++) {za (int j = 0; j <višina; j ++) {barva pix = cam.pixels [j * širina + i] ; // Zgrabi pixel na i, j float dr = rdeče (targetColor) - rdeča (pix); float dg = zelena (targetColor) - zelena (pix); float db = modra (targetColor) - modra (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Če se ujema, potem obdrži tekoče skupno, če (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Če smo našli ciljno barvo, nastavimo koordinate palice, če (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = true; }}

Ta koncept povprečnega položaja je razlog, zakaj je tako pomembno, da na konici uporabite posebno barvo. Če ste izbrali skupno barvo, kot je bela, potem vaši povprečni položaji ne bi vključevali samo palice, ampak okvir vrat, vašo srajco, par čevljev ali kateri koli drug naključni beli predmet se je zgodil v vidnem polju .

Ko je ciljna lokacija izračunana, skica nato ustvari niz žarkov, ki izhajajo iz konice palice. To se obravnava v drawWand () funkcija, ki s časovnikom nadzoruje, kako hitro se pojavijo žarki. (Časovniki so zajeti v Primeru 7-11 v knjigi Getting Started). Sledi odrezek za to:

void drawWand (int N, int R) {strokeWeight (6); kap (wandColor); gladko (); int elapsedTime = millis () - oldTime; float r = map (elapsedTime, 0, wandFrequency, 0, R); za (int i = 0; i <N; i ++) {float step = radiani (360.0 / N); float dx = r * sin (i * korak) + wandX; float dy = r * cos (i * korak) + wandY; line (wandX + 10 * sin (i * korak), wandY + 10 * cos (i * korak), dx, dy); } if (elapsedTime> wandFrequency) {oldTime = millis (); }}

Izvedite dejanje

Zadnji korak je, da uporabite palico za nadzor obnašanja skice. V tem primeru sem v zgornjem levem kotu zaslona dodal majhen krog, ki spreminja barve glede na časovnik, ki ga lahko nastavite. Če konico palice premaknete v krog, se bo žarek palice prestavil na novo barvo. kar je le majhna sprememba primera 5-16 iz začetka:

// Nastavi barvni krog na novo naključno barvo voID setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; if (elapsedTime> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = barva (int (naključno (255)), int (naključno (255)), int (naključno (255))); // Naključna barva}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); če (d <cR) {wandColor = colorCircleColor; }}

V naslednjem delu Codeboxa bomo gradili na tem primeru z ustvarjanjem več premičnih ciljev. Ne glede na to, ali pišete igre, sisteme delcev ali čarovniško podprto čarobno oddajo z Arduinom (predmet prihodnje objave, vendar bo to trajalo nekaj časa), so to orodja, ki jih boste uporabljali znova in znova. ko nadaljujete z obdelavo.

Več:
Oglejte si vse obroke Codeboxa

V skladišču izdelovalca:


Uvod v obdelavo Naučite se računalniškega programiranja na preprost način z Obdelovanjem, preprostim jezikom, ki vam omogoča uporabo kode za ustvarjanje risb, animacij in interaktivne grafike. Programski tečaji se običajno začnejo s teorijo, toda ta knjiga vam omogoča, da skočite naravnost v kreativne in zabavne projekte. Idealen je za vsakogar, ki se želi naučiti osnovnega programiranja in služi kot preprost uvod v grafiko za ljudi z nekaj programerskimi veščinami.

Delež

Pustite Komentar