Codebox: Hozzon létre egy varázspálcát - 💡 Fix My Ideas

Codebox: Hozzon létre egy varázspálcát

Codebox: Hozzon létre egy varázspálcát


Szerző: Ethan Holmes, 2019

A színes nyomkövetés egyszerű, de hatékony technika a szoftverekkel való interaktív szórakoztató új módszerek létrehozásához. Egy webkamerát érzékelőként használva a program „képzett”, hogy egy bizonyos színt keressen valamilyen fizikai mutatóra. A színes mutató egy (x, y) koordinátára van leképezve, ahogy az körül mozog. Valós idejű készítéssel ez lehetővé teszi, hogy a mutatót egérként használhassa, így mindenféle érdekes lehetőséget nyit meg. A Codebox ezen részlete megmutatja, hogyan kell használni a Feldolgozást és a számítógép webkameráját (ehhez a példához a MacBook beépített iSight fényképezőgépét használtam), hogy hozzon létre egy virtuális „varázspálcát”, amely megváltoztathatja a színeket, így:

Míg maga a példa egyszerű, a kód az építőelem a különböző projektek számára, amelyeket később a sorozatban fogok feltárni.

Feldolgozás beállítása

Mielőtt belépne ehhez a projekthez, vessünk néhány percet, és tekintsünk át egy kicsit a Feldolgozásról. Először is, ha teljesen új vagy a programban, akkor egy kis időt kell töltenie a Language.org-on, vagy ha megragadja az Első lépések feldolgozásával című példányát, amelyet Ben Fry és Casey Reas írtak. a Feldolgozási nyelv. Míg az útközben támogató anyagokat és referenciákat fogok mutatni, valószínűleg nagyon csalódott lesz, kivéve, ha van néhány alapvető alapja a rendszerben. Tehát, ha még nem tette meg, töltse le a Feldolgozás platformot és telepítse azt.

Készíts egy „pálcát”

A Feldolgozás beállítása és a vázlat futtatása után „pálcát” kell készítenie. (A pálcát idézőjelekbe helyezem, mert valóban bármilyen színt használhatunk.) Az instructables-nek sok nagyon jó példája van ezt, mint például: „Készíts egy fantasztikus Harry Potter pálcát egy papírlapról és ragasztópisztoly ragasztóról”. A legfontosabb szempont, legalábbis a Feldolgozás szempontjából, hogy a pálcának a színe megkülönböztető színe van. Gyors és piszkos megoldásként csomagoltam egy Day-Glo narancssárga Post-it Note-t a chopstick vége felé. Nem pontosan Harry Potter, de ez megkapja a munkát.

Indítsa el a vázlatot

Miután készen áll a pálca, megpróbálhatja a vázlatot. Indítsa el a feldolgozást, majd illessze be a következő kódot a főablakba. Kiválaszthatja az első sort, lapozhat egészen lefelé, majd használhatja a ctrl-c (kemény) billentyűt, vagy kattintson erre a linkre (magic_wand.pde), nyomja meg a Ctrl + a billentyűt a teljes szöveg kiválasztásához, majd használja a Ctrl billentyűt + c másoláshoz (könnyebb).

Miután beillesztette a kódot, nyomja meg a Start gombot a Feldolgozás ablak bal felső sarkában:

Végül lépjen a webkamera előtt. Most már készen áll a színkövetéssel.

Szerezd meg a nyomkövetési színt

Az első lépés az, hogy beállíthassa a feldolgozás színét. Ehhez mozgassa a pálca hegyét a bal felső sarokban lévő fehér dobozba. Látni fogja a fenti mezőt egy olyan színnel, amely többnyire úgy néz ki, mint a pálca hegye. (További információ a másodpercben.) A szín beállítása után nyomja meg bármelyik gombot.

A jelenetek mögött a Feldolgozás minden egyes webkamerából érkező keretet olvas, és egy csodálatos kis hacket használ a feldolgozó guru Daniel Shiffman feldolgozásával, a kép vízszintes átfordításával, hogy egy természetesebb interakciót hozzon létre a vázlattal. Ellenkező esetben az összes mozgás tükrözött képként jelenik meg, így a pálca jobbra mozgatása balra mozgatja, és fordítva. Mindez a következő kódrészletben történik:

ha (cam.available ()) {cam.read (); // Ez egy aprócska trükk a Processing guru Daniel Shiffman-tól a // -ig a webkamera pushMatrix (); skála (-1,0, 1,0); kép (cam, -cam.width, 0); popMatrix (); kép (cam, 0,0); }

A kép beolvasása után bütyök változó, az átadódik a searchForTargetColor () funkció (a funkciók leírása a 8. fejezetben található) Kezelés a feldolgozással). Ez a funkció megvizsgálja a fehér céltárgyakon belüli képpontokat, és átlagolja a piros, zöld és kék komponenseket, hogy egy olyan színt kapjon, amely a célszínt képviseli. Ez itt történik:

színszerzésTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; a (int i = 0; i <targetSide; i ++) {for (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = célX + i; // x pont a célmező belsejében int y = targetY + j; // y pont a cél dobozon belül // Húzza ki az aktuális pixelszínszínt c = cam.pixels [y * szélesség + x]; r + = piros (c); g + = zöld (c); b + = kék (c); }} targetColor = szín (r / cnt, g / cnt, b / cnt); targetColor; }

Keresse meg a célszínt

Miután megnyomta a billentyűt a cél színének beállításához (ami most már tárolva van) targetColor változó), a vázlat a célszín megszerzésétől a célszín megkereséséhez vált. Ezt a feladatot a searchForTargetColor () funkció, amely minden képpontot beolvas a képben, és összehasonlítja azt a képpel targetColor. Ha a két szín közötti távolság kevesebb, mint 50 egység (vagy bármilyen érték, amit beírt.) colorDist), akkor egy meccsnek tekinthető. (Egy gyors jegyzet a távolságról: ez azt jelenti, hogy az RGB színeket „térként” kezelik, melynek piros tengelye, zöld tengelye és kék tengelye van, a két szín közötti távolság csak az euklideszi távolság az alap Algebra két pontja között .) Ha a képpont megegyezik a célszínnel, akkor hozzáadódik a megfelelő képpontokhoz. Miután minden pixel tesztelése megtörtént, az összes megfelelő szín átlagát találjuk meg, hogy a pálca csúcsához egy átfogó pozíciót találjunk. Mindez itt történik:

void searchForTargetColor () {// Pálcika nullázása wandX = 0; wandY = 0; wandFound = false; // Most keresse meg azokat a képpontokat, amelyek megfelelnek a célszínnek az int numPoints = 0; // Talált pontok száma int sx = 0; // Az összes x koordináta koordinátája összege = 0; // Az összes (y i = 0; i <szélesség; i ++) y koordinátájának összege {int (= j; 0; j <magasság; j ++) {szín pix = cam.pixels [j * szélesség + i] ; // pixel felvétele i, j úszásnál dr = piros (targetColor) - piros (pix); float dg = zöld (targetColor) - zöld (pix); float db = kék (targetColor) - kék (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Ha ez egy mérkőzés, akkor tartsa meg a futó összeget, ha (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Ha megtalálta a célszínt, állítsa be a pálca koordinátáit, ha (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = igaz; }}

Ez az átlagos pozíciókoncepció az, hogy miért olyan fontos, hogy egy külön színt használjunk a csúcson. Ha egy közös színt szeretne választani, mint a fehér, akkor az átlagos pozíciója nemcsak a pálcát, hanem az ajtókeretet, az ingét, egy pár cipőt, vagy bármilyen más véletlenszerű fehér tárgyat tartalmazhat a látómezőben. .

Miután a célhelyet kiszámították, a vázlat aztán létrehoz egy sor sugárzást, amely a pálca hegyétől származik. Ez az drawWand () funkcióval, amely időzítőt használ a sugarak gyors megjelenítéséhez. (Az időzítők a Kezdő lépések könyv 7-11. Példájában találhatók). Ehhez a következő részlet van:

void drawWand (int N, int R) {strokeWeight (6); szélütés (wandColor); sima(); int elapsedTime = millis () - oldTime; float r = térkép (eltelt idő, 0, wandfrekvencia, 0, R); a (int i = 0; i <N; i ++) {úszó lépés = radiánok (360,0 / N); float dx = r * sin (i * lépés) + wandX; float dy = r * cos (i * lépés) + wandY; vonal (wandX + 10 * sin (i * lépés), wandY + 10 * cos (i * lépés), dx, dy); } ha (eltelt idő> wandfrekvencia) {oldTime = millis (); }}

Hajtsa végre a műveletet

Az utolsó lépés a pálca vezérlése a vázlat viselkedésének. Ebben a példában hozzáadtam egy kis kört a képernyő bal felső sarkában, amely megváltoztatja a színeket egy beállított időzítő alapján. Ha a pálca hegyét áthelyezi a körbe, akkor a pálca sugara az új színre vált. ami csak egy kis módosítás az 5-16.

// Beállítja a színköröket néhány új, véletlenszerű színcsökkentő készletreColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; ha (eltelt idő> színesCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = szín (int (véletlenszerű (255)), int (véletlenszerű (255)), int (véletlenszerű (255))); // Véletlenszerű szín}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); ha (d <cR) {wandColor = colorCircleColor; }}

A Codebox következő részletében ezt a példát több, mozgó cél létrehozásával készítjük. Akár játékokat, részecske-rendszereket, vagy pálca-vezérelt, Arduino-meghajtású mágikus show-t írnak (egy jövőbeli hozzászólás témája, de egy kis időt vesz igénybe), ezek az eszközök újra és újra használhatók ahogy tovább megy a Feldolgozással.

Több:
Lásd a Codebox összes részletét

A Maker Shedben:


Első lépések a feldolgozással Ismerje meg a számítógépes programozást a feldolgozással egyszerű módon, amely lehetővé teszi a kódok használatát rajzok, animációk és interaktív grafikák létrehozásához. A programozási kurzusok általában az elméletből indulnak ki, de ez a könyv lehetővé teszi, hogy közvetlenül a kreatív és szórakoztató projektekre ugorjon. Ideális azok számára, akik alapvető programozást akarnak tanulni, és egyszerű bemutatkozásként szolgálnak a programozáshoz szükséges grafikák számára.



Lehet, Hogy Érdekli

DohVinci: Első lépés a Play-Doh 3D nyomtató felé?

DohVinci: Első lépés a Play-Doh 3D nyomtató felé?


Megérteni a tárgyak internetét, gondolj csokoládét

Megérteni a tárgyak internetét, gondolj csokoládét


Vinil játék tervezése Joe Ledbetterrel

Vinil játék tervezése Joe Ledbetterrel


A Belly Button könyv, gyerek tesztelt

A Belly Button könyv, gyerek tesztelt






Legutóbbi Hozzászólások