Jeffrey Cross
Jeffrey Cross

Codebox: Luo taikasauva

Värien seuranta on yksinkertainen, mutta tehokas tekniikka hauskojen uusien tapojen luomiseen ohjelmiston kanssa. Käyttämällä web-kameraa anturina ohjelma on ”koulutettu” etsimään tietty väri fyysiseen osoittimeen. Värillinen osoitin kartoitetaan (x, y) koordinaattiin, kun se on liikkunut. Tämä tapahtuu reaaliajassa, joten voit käyttää osoitinta hiirenä ja avata kaikenlaisia ​​mielenkiintoisia mahdollisuuksia. Tässä Codeboxin osassa näytetään, miten voit käyttää Processing -ohjelmaa ja tietokoneen web-kameraa (tässä esimerkissä käytin MacBookin sisäänrakennettua iSight-kameraa) luomaan virtuaalisen ”taikasauvan”, joka voi muuttaa värejä, kuten tämä:

Vaikka esimerkki itsessään on yksinkertainen, koodi on rakennuspalikka useille hankkeille, joita tutkin myöhemmin tässä sarjassa.

Aseta käsittely

Ennen kuin siirryt tähän projektiin, ota muutama minuutti ja tarkista hieman käsittelystä. Ensinnäkin, jos olet täysin uusi ohjelmaan, sinun pitäisi viettää aikaa kielen oppimiseksi Processing.org-sivustossa tai tarttumalla kopio Getting Started with Processing -työkalusta, jonka ovat kirjoittaneet Ben Fry ja Casey Reas. käsittelykielellä. Vaikka muistutan tukimateriaalia ja viitteitä matkan varrella, olet todennäköisesti hyvin turhautunut, ellei sinulla ole perusasioita järjestelmässä. Joten jos et ole jo tehnyt sitä, lataa Processing for your platform ja asenna se.

Tee ”sauva”

Kun käsittely on asetettu ja luonnos on käynnissä, sinun täytyy tehdä "sauva". (Laitoin lainausmerkkejä, koska voit todella käyttää mitä tahansa esineitä, joilla on erottuva väri.) Instructablesilla on paljon todella hienoja esimerkkejä tämä, kuten “Tee mahtava Harry Potterin sauva paperiarkista ja liimapistooliliimasta”. Avainelementti, ainakin prosessin näkökulmasta, on se, että sauvalla on erottuva väri kärjessä. Nopeana ja likaisena ratkaisuna olen käärittänyt päivän-Glo-oranssin Post-it-huomion noin syömäpuikon loppuun. Ei juuri Harry Potter, mutta se saa työn.

Aloita luonnos

Kun sauva on valmis, voit antaa luonnoksen kokeilemaan. Aloita käsittely ja liitä seuraava koodi pääikkunaan. Voit joko korostaa ensimmäisen rivin, vierittää kokonaan alas ja käyttää sitten ctrl-c (kova) tai napsauttaa tätä linkkiä (magic_wand.pde), valitse Ctrl + a ja valitse kaikki teksti ja käytä sitten Ctrl + c kopioida se (helpompaa).

Kun olet liittänyt koodiin, paina Käynnistä-painiketta käsittelyikkunan vasemmassa yläkulmassa, kuten tämä:

Lopuksi, siirry kameran eteen. Olet nyt valmis pelaamaan värien seurannalla.

Hanki seurantaväri

Ensimmäinen askel on määrittää värin, jonka käsittely käsittelee. Voit tehdä tämän siirtämällä sauvakärjen valkoiseen ruutuun vasemmassa yläkulmassa. Näet ruudun yläpuolella olevan värin, joka näyttää enimmäkseen kuin sauvan kärki. (Lisää tästä sekunnissa.) Kun väri on asetettu, paina mitä tahansa näppäintä.

Kulissien takana prosessointi lukee jokaista verkkokamerasta tulevaa kehystä ja käyttää hienoa pikku hackiä käsittelemällä guru Daniel Shiffmania, kääntämällä kuva vaakasuoraan luodaksesi luonnollisemman vuorovaikutuksen luonnoksen kanssa. Muuten kaikki liikkeesi näkyvät peilikuvana, joten sauvan liikuttaminen oikealle näyttää liikkuvan sen vasemmalle ja päinvastoin. Kaikki tämä tapahtuu seuraavassa koodinpätkässä:

jos (cam.available ()) {cam.read (); // Tämä on muokkaava pikku temppu, joka on käsittelyn guru Daniel Shiffmanin // uudelleentarkastelussa peilikuvatehosteen vaikutuksesta web-kameran pushMatrix (); mittakaava (-1,0, 1,0); kuva (cam, -cam.width, 0); popMatrix (); kuva (cam, 0,0); }

Kun kuva on luettu epäkesko muuttuja, se siirretään searchForTargetColor () toiminto (toiminnot on kuvattu luvussa 8) Käsittelyn aloittaminen). Tämä toiminto skannaa valkoisen kohteen hankintakentän sisällä olevat pikselit ja keskittää niiden punaiset, vihreät ja siniset komponentit, jotta he saavat kokonaisvärin, joka edustaa kohdevärin. Tämä tapahtuu täällä:

värin hankintaTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; (int i = 0; i <targetSide; i ++) {for (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = targetX + i; // x kohta kohdekentän sisällä int y = targetY + j; // y kohta kohdekentän sisällä // Vedä nykyinen pikseliväri c = cam.pixels [y * leveys + x]; r + = punainen (c); g + = vihreä (c); b + = sininen (c); }} targetColor = väri (r / cnt, g / cnt, b / cnt); palauttaa targetColor; }

Etsi kohdeväri

Kun painat näppäintä, voit asettaa kohteen värin (joka on nyt tallennettu targetColor muuttuja), luonnos kytkeytyy käyttötavasta hankkimalla kohdevärin etsimään kohdevärin. Tämä tehtävä tehdään searchForTargetColor () toiminto, joka skannaa jokaisen kuvan pikselin ja vertaa sitä targetColor. Jos kahden värin välinen etäisyys on alle 50 yksikköä (tai mitä arvoa olet asettanut sisään) colorDist), se katsotaan otteluksi. (Nopea huomautus etäisyydellä: tämä tarkoittaa sitä, että käsität RGB-värejä "avaruudeksi", jossa on punainen akseli, vihreä akseli ja sininen akseli, kahden värin välinen etäisyys on vain euklidinen etäisyys kahden pisteen välillä perusalgebrasta .) Jos pikseli on kohdevärin mukainen, se lisätään yhteensopiviin pikseleihin. Kun jokainen pikseli on testattu, löydämme kaikkien vastaavien värien keskiarvon, jotta saisimme yleisen sijainnin sauvan kärjelle. Kaikki tämä tapahtuu täällä:

void searchForTargetColor () {// Palauta sauva wandX = 0; wandY = 0; wandFound = false; // Etsi nyt pikseleitä, jotka vastaavat kohdevärin int numPoints = 0; // Löydettyjen pisteiden lukumäärä int sx = 0; // Kaikkien x koordinaattien summa, joka on löydetty v = 0; // Kaikkien y-koordinaattien summa (int i = 0; i <leveys; i ++) {for (int j = 0; j <korkeus; j ++) {väri pix = cam.pixels [j * leveys + i] ; // napauta pikseli i: llä, j kelluu dr = punainen (targetColor) - punainen (pix); float dg = vihreä (targetColor) - vihreä (pix); float db = sininen (targetColor) - sininen (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Jos se on ottelu, pidä käynnissä oleva summa, jos (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Jos löysimme kohdevärin, aseta sauvakoordinaatit, jos (numeropisteet> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = totta; }}

Tämä keskimääräinen sijainti on, miksi on niin tärkeää käyttää erillistä väriä kärjessä. Jos valitsisit tavallisen värin, kuten valkoisen, keskimääräinen sijaintisi voi sisältää vain sauvan, mutta ovikehyksen, paitasi, kenkäparin tai minkä tahansa muun satunnaisen valkoisen objektin, joka tapahtui näkökentässä .

Kun kohteen sijainti on laskettu, luonnos luo sitten sarjan säkeitä, jotka lähtevät sauvan kärjestä. Tätä käsitellään drawWand () -toiminto, joka käyttää ajastinta sen säätämiseksi, kuinka nopeasti säteitä syntyy. (Ajastimet sisältyvät aloituskirjan esimerkkiin 7-11). Seuraavassa on tämän katkelman kuvaus:

void drawWand (int N, int R) {strokeWeight (6); aivohalvaus (wandColor); sileä(); int elapsedTime = millis () - oldTime; float r = kartta (kulunutTime, 0, wandFrequency, 0, R); (int i = 0; i <N; i ++) {float-vaihe = radiaani (360,0 / N); float dx = r * sin (i * askel) + wandX; float dy = r * cos (i * vaihe) + wandY; linja (wandX + 10 * sin (i * -vaihe), wandY + 10 * cos (i * -vaihe), dx, dy); } jos (kulunut aika> wandFrequency) {oldTime = millis (); }}

Suorita toimenpide

Viimeinen vaihe on käyttää sauvaa ohjaamaan luonnoksen käyttäytymistä. Tässä esimerkissä olen lisännyt pienen ympyrän näytön vasemmassa yläkulmassa, joka muuttaa värejä asetettavan ajastimen perusteella. Jos siirrät sauvan kärjen ympyrään, niin sauvan säde siirtyy uuteen väriin. joka on vain pieni muutos esimerkistä 5-16 Aloittaminen:

// Asettaa värin ympyrän johonkin uuteen satunnaisvärin tyhjyyteen setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; jos (kulunut aika> väriCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = väri (int (satunnainen (255)), int (satunnainen (255)), int (satunnainen (255)); // Satunnainen väri}} mitätön testControlBounds () {float d = dist (wandX, wandY, cX, cY); jos (d <cR) {wandColor = väriCircleColor; }}

Seuraavassa Codeboxin asennuksessa käytämme tätä esimerkkiä luomalla useita liikkuvia kohteita. Olitpa sitten kirjoittamassa pelejä, hiukkasjärjestelmiä tai sauvaohjattua, Arduino-moottorista taikaa (tulevan viestin aihe, mutta se vie vähän aikaa), nämä ovat työkaluja, joita käytät uudelleen ja uudelleen kun menet edelleen.

Lisää:
Katso kaikki Codeboxin erät

Makerissa:


Käsittelyn aloittaminen Opi käyttämään prosessointia helpompaa tietokoneen ohjelmointia, joka on yksinkertainen kieli, jolla voit käyttää koodia piirustusten, animaatioiden ja vuorovaikutteisen grafiikan luomiseen. Ohjelmointikurssit alkavat yleensä teoriasta, mutta tämän kirjan avulla voit siirtyä suoraan luoviin ja hauskiin projekteihin. Se sopii kaikille, jotka haluavat oppia perusohjelmointia, ja se on yksinkertainen esittely grafiikalle ihmisille, joilla on joitakin ohjelmointitaitoja.

Osake

Jättänyt Kommenttia