Jeffrey Cross
Jeffrey Cross

Codebox: Créer une baguette magique

Le suivi des couleurs est une technique simple mais puissante pour créer de nouvelles façons amusantes d'interagir avec les logiciels. En utilisant une webcam comme capteur, un programme est «formé» pour localiser une couleur spécifique sur un type de pointeur physique. Le pointeur coloré est associé à une coordonnée (x, y) lorsqu’il est déplacé. Fait en temps réel, cela vous permet d'utiliser le pointeur comme une souris, ouvrant toutes sortes de possibilités intéressantes. Cet article de Codebox vous explique comment utiliser Processing et la webcam de votre ordinateur (pour cet exemple, j’ai utilisé la caméra iSight intégrée de mon MacBook) pour créer une «baguette magique» virtuelle capable de changer les couleurs, comme ceci:

Bien que l'exemple en lui-même soit simple, le code est un élément constitutif de plusieurs projets que j'explorerai plus tard dans cette série.

Mettre en place le traitement

Avant de vous lancer dans ce projet, prenons quelques minutes et examinons un peu le traitement. Premièrement, si vous êtes complètement nouveau dans le programme, vous devriez passer un peu de temps à apprendre la langue sur Processing.org ou en vous procurant une copie de Getting Started with Processing, écrit par Ben Fry et Casey Reas, les co-créateurs de la langue de traitement. Bien que je vous signale du matériel d’appui et des références tout au long du processus, vous risquez d’être très frustré à moins de disposer de bases élémentaires dans le système. Donc, si vous ne l’avez pas déjà fait, téléchargez Processing pour votre plate-forme et installez-le.

Faire une "baguette"

Une fois que le traitement est configuré et que l'esquisse est en cours d'exécution, vous devez créer une "baguette magique". (J'ai mis la baguette magique entre guillemets, car vous pouvez vraiment utiliser n'importe quel objet avec une couleur distinctive.) Instructables propose de nombreux exemples vraiment intéressants. ceci, comme "Fabrique une baguette Harry Potter géniale avec une feuille de papier et de la colle pour pistolet à colle". L’élément clé, du moins du point de vue de Processing, est que la baguette a une couleur distinctive à son extrémité. Comme solution rapide et sale, j’ai enroulé une note Post-it orange Day-Glo autour du bout d’une baguette. Pas exactement Harry Potter, mais ça fait le travail.

Commencer l'esquisse

Une fois que votre baguette est prête, vous pouvez essayer le croquis. Commencez le traitement, puis collez le code suivant dans la fenêtre principale. Vous pouvez soit mettre en surbrillance la première ligne, faire défiler tout le chemin puis utiliser ctrl-c (difficile), ou vous pouvez cliquer sur ce lien (magic_wand.pde), appuyer sur Ctrl + a pour sélectionner tout le texte, puis utiliser Ctrl + c pour le copier (plus facile).

Une fois que vous avez collé le code, appuyez sur le bouton de démarrage situé dans le coin supérieur gauche de la fenêtre Traitement, comme suit:

Enfin, placez-vous devant votre webcam. Vous êtes maintenant prêt à jouer avec le suivi des couleurs.

Acquérir la couleur de suivi

La première étape consiste à définir la couleur que le traitement va suivre. Pour ce faire, déplacez le bout de la baguette dans la case blanche située dans le coin supérieur gauche. Vous verrez que la case ci-dessus prend une couleur qui ressemble le plus souvent au bout de votre baguette. (Plus d'informations à ce sujet dans une seconde.) Une fois la couleur définie, appuyez sur n'importe quelle touche.

Dans les coulisses, Processing lit chaque image provenant de la webcam et utilise un formidable petit bidouillage du gourou Processing, Daniel Shiffman, en retournant l'image horizontalement pour créer une interaction plus naturelle avec l'esquisse. Sinon, tous vos mouvements apparaissent sous la forme d'une image en miroir, de sorte que déplacer la baguette vers la droite apparaît comme la déplacer vers la gauche, et inversement. Tout cela se passe dans l'extrait de code suivant:

if (cam.available ()) {cam.read (); // C'est un petit truc du gourou du traitement, Daniel Shiffman, pour // rétablir l'effet de miroir sur vos mouvements dans la webcam pushMatrix (); échelle (-1,0, 1,0); image (cam, -cam.width, 0); popMatrix (); image (came, 0,0); }

Après que l'image soit lue dans came variable, il est passé à la searchForTargetColor () fonction (les fonctions sont décrites au chapitre 8 de Débuter avec le traitement). Cette fonction analyse les pixels à l'intérieur de la zone d'acquisition cible blanche et effectue la moyenne de leurs composants rouge, vert et bleu afin de créer une couleur globale qui représente la couleur cible. Cela se passe ici:

couleur acquérirTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0; for (int i = 0; i <targetSide; i ++) {for (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = cibleX + i; // x point à l'intérieur de la zone cible int y = targetY + j; // Point y dans la zone cible // Extrait la couleur de pixel actuelle c = cam.pixels [y * width + x]; r + = rouge (c); g + = vert (c); b + = bleu (c); }} targetColor = color (r / cnt, g / cnt, b / cnt); renvoyer targetColor; }

Rechercher la couleur cible

Lorsque vous appuyez sur une touche pour définir la couleur de la cible (qui est maintenant stockée dans couleur cible variable), l’esquisse passe de l’acquisition de la couleur cible à la recherche de la couleur cible. Ce travail est fait par le searchForTargetColor () fonction, qui balaye chaque pixel de l’image et la compare à la couleur cible. Si la distance entre les deux couleurs est inférieure à 50 unités (ou quelle que soit la valeur définie dans colorDist), alors c’est considéré comme un match. (Une note rapide sur la distance: cela signifie que vous traitez les couleurs RVB comme un «espace» comportant un axe rouge, un axe vert et un axe bleu; la distance entre deux couleurs est simplement la distance euclidienne entre deux points de l'algèbre de base. .) Si le pixel correspond à la couleur cible, il est ajouté à un total cumulé de pixels correspondants. Une fois que chaque pixel a été testé, nous trouvons ensuite la moyenne de toutes les couleurs correspondantes pour déterminer la position globale du bout de la baguette. Tout cela se passe ici:

void searchForTargetColor () {// Réinitialisation de la baguette wandX = 0; wandY = 0; wandFound = false; // Maintenant, recherchez les pixels qui correspondent à la couleur cible int numPoints = 0; // Nombre de points trouvés int sx = 0; // Somme de toutes les coordonnées x trouvées int sy = 0; // Somme de toutes les coordonnées y trouvées pour (int i = 0; i <largeur; i ++) {pour (int j = 0; j <hauteur; j ++) {couleur pix = cam.pixels [j * largeur + i] ; // Capture de pixel en i, j float dr = red (targetColor) - red (pix); float dg = green (targetColor) - vert (pix); float db = blue (targetColor) - blue (pix); float d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // S'il s'agit d'une correspondance, conservez un total cumulé if (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Si nous avons trouvé la couleur cible, définissez les coordonnées de la baguette si (numPoints> 0) {wandX = sx / numPoints; wandY = sy / numPoints; wandFound = true; }}

Ce concept de position moyenne explique pourquoi il est si important d’utiliser une couleur distincte sur la pointe. Si vous choisissez une couleur commune, telle que le blanc, votre position moyenne pourrait inclure non seulement la baguette magique, mais également le cadre de la porte, votre chemise, une paire de chaussures ou tout autre objet blanc aléatoire se trouvant dans le champ de vision. .

Une fois que la position de la cible a été calculée, l’esquisse crée une série de rayons émanant de la pointe de la baguette. Ceci est traité dans le drawWand () fonction, qui utilise une minuterie pour contrôler la rapidité avec laquelle les rayons émergent. (Les minuteries sont traitées dans l'exemple 7-11 du manuel de démarrage). Voici l'extrait pour cela:

void drawWand (int N, int R) {strokeWeight (6); accident vasculaire cérébral (wandColor); lisse(); int elapsedTime = millis () - oldTime; float r = map (temps écoulé, 0, wandFrequency, 0, R); pour (int i = 0; i <N; i ++) {pas de flottant = radians (360,0 / N); float dx = r * sin (i * pas) + wandX; float dy = r * cos (i * étape) + wandY; ligne (wandX + 10 * sin (i * pas), wandY + 10 * cos (i * pas), dx, dy); } if (elapsedTime> wandFrequency) {oldTime = millis (); }}

Effectuer une action

La dernière étape consiste à utiliser la baguette pour contrôler le comportement de l’esquisse. Dans cet exemple, j’ai ajouté un petit cercle dans le coin supérieur gauche de l’écran, qui modifie les couleurs en fonction d’une minuterie que vous pouvez définir. Si vous déplacez la pointe de la baguette dans le cercle, le rayon de la baguette changera de couleur. ce qui n’est qu’une légère modification de l’Exemple 5-16 de Mise en route:

// Définit le cercle de couleur sur une nouvelle couleur aléatoire void setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; if (elapsedTime> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = color (int (random (255)), int (random (255)), int (random (255))); // couleur aléatoire}} void testControlBounds () {float d = dist (wandX, wandY, cX, cY); if (d <cR) {wandColor = colorCircleColor; }}

Dans le prochain épisode de Codebox, nous allons nous appuyer sur cet exemple en créant plusieurs cibles mobiles. Que vous écriviez des jeux, des systèmes de particules ou un spectacle magique contrôlé par une baguette (alimenté par Arduino) (sujet d'un prochain message, il faudra un peu pour y arriver), voici des outils que vous utiliserez encore et encore à mesure que vous avancez avec Processing.

Plus:
Voir tous les versements de Codebox

Dans le hangar de fabricant:


Premiers pas avec Processing Apprenez à programmer en toute simplicité avec Processing, un langage simple qui vous permet d'utiliser du code pour créer des dessins, des animations et des graphiques interactifs. Les cours de programmation commencent généralement par la théorie, mais ce livre vous permet de vous lancer directement dans des projets créatifs et amusants. Idéal pour tous ceux qui souhaitent apprendre la programmation de base, il constitue une simple introduction au graphisme pour les personnes ayant quelques compétences en programmation.

Part

Laisser Un Commentaire