Jeffrey Cross
Jeffrey Cross

Kódová schránka: Vytvořte kouzelnou hůlku

Sledování barev je jednoduchá, ale výkonná technika pro vytváření zábavných nových způsobů interakce se softwarem. Pomocí webové kamery jako senzoru je program „vyškolen“, aby našel konkrétní barvu na nějakém fyzickém ukazateli. Barevný ukazatel je mapován na souřadnici (x, y), jak se pohybuje kolem. V reálném čase to umožňuje použití ukazatele jako myši, otevírání nejrůznějších zajímavých možností. Tato instalace Codebox ukazuje, jak používat Zpracování a webovou kameru vašeho počítače (pro tento příklad jsem použil vestavěnou kameru iSight v systému MacBook), abych vytvořil virtuální „kouzelnou hůlku“, která může měnit barvy na cue, jako je tato:

I když je příklad sám o sobě jednoduchý, kód je stavebním kamenem pro různé projekty, které budu zkoumat později v této sérii.

Nastavení Zpracování

Než začnete skákat do tohoto projektu, vezměte si pár minut a trochu si přečtěte Zpracování. Za prvé, pokud jste zcela nový program, měli byste strávit nějaký čas učením se jazyka na Processing.org nebo popadnutím kopie Začínáme se zpracováním, kterou napsali Ben Fry a Casey Reas, spolutvůrci jazyk zpracování. Zatímco budu poukazovat na podpůrný materiál a odkazy, budete pravděpodobně velmi frustrováni, pokud nebudete mít v systému nějaké základní uzemnění. Pokud jste tak ještě neučinili, stáhněte si Zpracování pro svou platformu a nainstalujte jej.

Udělat „hůlku“

Jakmile je Zpracování nastaveno a skica je spuštěna, budete muset vytvořit „hůlku“ (vložím hůlku do uvozovek, protože můžete použít jakýkoliv objekt s výraznou barvou.) Instruktážní materiály mají spoustu opravdu skvělých příkladů tohle, jako „Udělejte hůlku Harryho Pottera z listu papíru a lepidla na lepidlo“. Klíčovým prvkem, přinejmenším z hlediska zpracování, je to, že hůlka má na špičce výraznou barvu. Jako rychlé a špinavé řešení jsem zabalil Day-Glo oranžovou Post-it Note kolem konce hůlky. Ne přesně Harryho Pottera, ale to udělá.

Spusťte náčrt

Jakmile je vaše hůlka připravena, můžete zkusit skicu. Spusťte zpracování a vložte následující kód do hlavního okna. Můžete buď zvýraznit první řádek, posunout celou cestu dolů a pak použít ctrl-c (hard), nebo můžete kliknout na tento odkaz (magic_wand.pde), stisknutím Ctrl + a vybrat celý text a pak použít Ctrl + c jej zkopírovat (jednodušší).

Jakmile vložíte kód, stiskněte tlačítko Start v levém horním rohu okna Zpracování:

Konečně, krok před webovou kameru. Nyní jste připraveni hrát se sledováním barev.

Získat barvu sledování

Prvním krokem je nastavení barvy, kterou bude Zpracování sledovat. Chcete-li to provést, přesuňte špičku hůlky do bílého pole v horním levém rohu. Zobrazí se rámeček nad ním, který vypadá jako špička hůlky. (Více o tom za sekundu.) Jakmile je barva nastavena, stiskněte libovolnou klávesu.

Za zákulisí, zpracování je čtení každý snímek přichází z webové kamery, a pomocí nádherné malý hack zpracováním guru Daniel Shiffman, obracející obraz horizontálně vytvořit přirozenější interakce s náčrtu. V opačném případě se všechny vaše pohyby zobrazí jako zrcadlový obraz, takže přesunutí hůlky doprava se zobrazí jako přesunutí doleva a naopak. To vše se děje v následujícím fragmentu kódu:

if (cam.available ()) {cam.read (); // Toto je nify malý trik od Processing guru Daniela Shiffmana k // revese efektu zrcadlového obrazu na tvých pohybech v webcam pushMatrix (); měřítko (-1,0, 1,0); obrázek (cam, -cam.width, 0); popMatrix (); obrázek (cam, 0,0); }

Po načtení obrázku vačka proměnná, je předána searchForTargetColor () funkce (funkce jsou popsány v kapitole 8. t Začínáme se zpracováním). Tato funkce skenuje pixely uvnitř bílého cílového akvizičního rámečku a průměruje jejich červené, zelené a modré komponenty tak, aby přišly k celkové barvě, která představuje cílovou barvu. To se děje zde:

barva gainTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; pro (int i = 0; i <targetSide; i ++) {pro (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = targetX + i; // x bod uvnitř cílového pole int y = targetY + j; // bod y uvnitř cílového pole // Vytáhněte aktuální barvu barev pixelů c = cam.pixels [y * width + x]; r + = červená (c); g + = zelená (c); b + = modrá (c); }} targetColor = barva (r / cnt, g / cnt, b / cnt); return targetColor; }

Vyhledejte cílovou barvu

Jakmile stisknete klávesu pro nastavení barvy cíle (která je nyní uložena v targetColor proměnná), skica přepne režimy od získání cílové barvy k hledání cílové barvy. Tuto práci provádí searchForTargetColor () funkce, která snímá každý pixel v obraze a porovnává ji s targetColor. Pokud je vzdálenost mezi oběma barvami menší než 50 jednotek (nebo jakákoliv hodnota, kterou jste nastavili) colorDist), pak je to považováno za zápas. (Rychlá poznámka o vzdálenosti: to znamená, že s barvami RGB se zachází jako s „prostorem“, který má červenou osu, zelenou osu a modrou osu, vzdálenost mezi dvěma barvami je pouze euklidovská vzdálenost mezi dvěma body ze základní algebry .) Pokud pixel odpovídal cílové barvě, přidá se do běžícího součtu odpovídajících pixelů. Jakmile byl každý pixel otestován, pak zjistíme, že průměr všech odpovídajících barev má celkovou polohu pro špičku hůlky. To vše se děje zde:

void searchForTargetColor () {// Reset wand wandX = 0; wandY = 0; wandFound = false; // Nyní hledejte pixely, které odpovídají cílové barvě int numPoints = 0; // Počet nalezených bodů int sx = 0; // Součet všech x souřadnic nalezených int sy = 0; // Součet všech souřadnic y nalezených pro (int i = 0; i <width; i ++) {pro (int j = 0; j <height; j ++) {color pix = cam.pixels [j * width + i] ; // Grab pixel na i, j float dr = red (targetColor) - červený (pix); float dg = zelená (targetColor) - zelená (pix); float db = blue (targetColor) - modrá (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Pokud je to shoda, ponechte běžící součet, pokud (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Pokud jsme našli cílovou barvu, nastavte souřadnice hůlky (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = true; }}

Tento koncept průměrné polohy je důvod, proč je tak důležité používat na špičce výraznou barvu. Pokud byste měli vybrat běžnou barvu, jako je bílá, pak by vaše průměrná pozice mohla zahrnovat nejen hůlku, ale rám dveří, košili, boty nebo jakýkoli jiný náhodný bílý předmět, který se nacházel v zorném poli. .

Jakmile bylo místo cíle vypočítáno, skica pak vytvoří řadu paprsků, které vycházejí ze špičky hůlky. To je řešeno v drawWand () funkce, která používá časovač ke kontrole, jak rychle se paprsky objevují. (Časovače jsou popsány v příkladu 7-11 knihy Začínáme). Zde je úryvek:

void drawWand (int N, int R) {tahWeight (6); mrtvice (wandColor); hladký(); int elapsedTime = millis () - oldTime; float r = mapa (elapsedTime, 0, wandFrequency, 0, R); pro (int i = 0; i <N; i ++) {float step = radians (360.0 / N); float dx = r * sin (krok i *) + wandX; float dy = r * cos (i * krok) + wandY; řádek (wandX + 10 * sin (krok i *), wandY + 10 * cos (krok i *), dx, dy); } if (elapsedTime> wandFrequency) {oldTime = millis (); }}

Proveďte akci

Posledním krokem je použití hůlky, která řídí chování skici. V tomto příkladu jsem v levém horním rohu obrazovky přidal malý kruh, který mění barvy na základě časovače, který můžete nastavit. Pokud posunete špičku hůlky do kruhu, paprsek hůlky přepne na novou barvu. což je jen nepatrná modifikace příkladu 5-16 z Začínáme:

// Nastaví barevný kruh na novou náhodnou barvu void setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; if (elapsedTime> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = color (int (náhodný (255)), int (náhodný (255)), int (náhodný (255))); // Náhodné barvy}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); pokud (d <cR) {wandColor = colorCircleColor; }}

V další instalaci Codeboxu budeme stavět na tomto příkladu vytvořením více pohyblivých cílů. Ať už píšete hry, částicové systémy nebo kouzelnou show řízenou Ardouinem (předmět budoucího příspěvku, ale bude to trvat trochu déle), jedná se o nástroje, které budete používat znovu a znovu jak jdete dále s Processing.

Více:
Zobrazit všechny splátky Codebox

V hale Maker:


Začínáme se zpracováním Naučte se programování počítače jednoduchým způsobem pomocí zpracování, což je jednoduchý jazyk, který umožňuje používat kód pro vytváření výkresů, animací a interaktivní grafiky. Kurzy programování obvykle začínají teorií, ale tato kniha vám umožňuje skočit přímo do kreativních a zábavných projektů. Je ideální pro každého, kdo se chce naučit základní programování a slouží jako jednoduchý úvod do grafiky pro lidi s některými programovacími dovednostmi.

Podíl

Zanechat Komentář