Comment créer d'incroyables effets de webcam avec Java et le traitement

Added 2019-03-20

Le traitement est un outil puissant qui permet la création d’art par le code. C'est la combinaison d'une bibliothèque Java permettant de travailler avec des graphiques et d'un environnement de développement intégré (IDE) qui vous permet d'écrire et d'exécuter du code facilement.

De nombreux projets pour débutants graphiques et d'animation utilisent le traitement, mais il est également capable de manipuler la vidéo en direct.

Aujourd'hui, vous allez réaliser un diaporama vidéo en direct de différents effets contrôlés par la souris, à l'aide de la bibliothèque vidéo Processing. En plus de retourner la vidéo en direct, vous apprendrez à la redimensionner, la colorier et à la faire suivre le curseur de la souris.

Configuration du projet

Pour commencer, télécharger Traitement  et ouvrez un croquis vierge. Ce didacticiel est basé sur un système Windows, mais il devrait fonctionner sur n’importe quel ordinateur doté d’une webcam.

Vous devrez peut-être installer la bibliothèque Processing Video, accessible sous Esquisse>  Bibliothèque d'importation>  Ajouter une bibliothèque . Rechercher Vidéo  dans la zone de recherche et installez la bibliothèque à partir de La base de traitement .

Une fois installé, vous êtes prêt à partir. Si vous voulez ignorer le codage, vous pouvez télécharger le croquis complet . Il est toutefois préférable de le fabriquer soi-même à partir de rien!

Utiliser une webcam avec traitement

Commençons par importer la bibliothèque et créer un installer  une fonction. Entrez les informations suivantes dans l'esquisse de traitement vide:

import processing.video. *;

Capture cam;

void setup(){
  taille (640 480);
  cam = nouvelle capture (this, 640, 480);
  cam.start ();
}

Après avoir importé la vidéothèque, vous créez un Capturer  instance appelée came  pour stocker les données de la webcam. Dans installer , la Taille  fonction met en place un 640 × 480  Fenêtre de taille pixel pour travailler.

La ligne suivante affecte came  à une nouvelle instance de Capturer , pour ce  esquisse, de la même taille que la fenêtre, avant de dire à la caméra de s’allumer avec cam.start () .

Ne vous inquiétez pas si vous ne comprenez pas toutes les parties pour le moment. En bref, nous avons demandé à Processing de créer une fenêtre, de trouver notre appareil photo et de l'allumer! Pour l'afficher nous avons besoin d'un dessiner  une fonction. Entrez ceci sous le code ci-dessus, en dehors des accolades.

void draw () {
  if (cam.available ()) {
    cam.read ();
  }
  image (came, 0,0);
}

le dessiner  la fonction s'appelle chaque image. Cela signifie que plusieurs fois par seconde, si  la caméra a des données disponible  vous lis  les données de celui-ci.

Ces données sont ensuite affichées sous forme de image , à la position 0, 0 , qui est en haut à gauche de la fenêtre.

Enregistrez votre croquis et appuyez sur le bouton de lecture en haut de l'écran.

Succès! Les données stockées par came  est correctement imprimé à l'écran chaque image. Si vous rencontrez des problèmes, vérifiez soigneusement votre code. Java a besoin de tous les crochets et points-virgules au bon endroit! Le traitement peut également nécessiter quelques secondes pour accéder à la webcam. Si vous pensez que cela ne fonctionne pas, attendez quelques secondes après le lancement du script.

Retourner l'image

Maintenant que vous avez une image webcam en direct, laissez-la manipuler. Dans la fonction draw, remplacez image (came, 0,0);  avec ces deux lignes de code.

échelle (-1,1);
image (cam, -width, 0);

Enregistrez et réexécutez l'esquisse. Pouvez-vous voir la différence? En utilisant un négatif échelle  valeur, tous les X  les valeurs (les pixels horizontaux) sont maintenant inversées. Pour cette raison, nous devons utiliser la valeur négative de la fenêtre largeur  pour positionner l'image correctement.

Inverser l'image ne nécessite que quelques modifications mineures.

échelle (-1, -1);
image (cam, -width, -height);

Cette fois, les deux X  et y  les valeurs sont inversées, ce qui retourne l'image de la caméra en direct. Jusqu'ici, vous avez codé une image normale, une image inversée horizontalement et une image inversée verticalement. Mettons en place un moyen de passer d’un cycle à l’autre.

Faire le cycle

Au lieu de réécrire votre code à chaque fois, nous pouvons utiliser des nombres pour les parcourir. Créer un nouveau entier  en haut de votre code appelé commutateur .

import processing.video. *;

commutateur int = 0;
Capture cam;

Nous pouvons utiliser la valeur de switcher pour déterminer l’évolution de l’image de la caméra. Lorsque l’esquisse commence, vous lui attribuez une valeur de 0 . Nous pouvons maintenant utiliser la logique pour changer le sort de l’image. Mettez à jour votre dessiner  méthode pour ressembler à ceci:

void draw () {
  if (cam.available ()) {
    cam.read ();
  }

  si (sélecteur == 0) {
    image (came, 0,0);
  }
  sinon si (sélecteur == 1) {
    échelle (-1,1);
    image (cam, -width, 0);
  }
  sinon si (sélecteur == 2) {
    échelle (-1, -1);
    image (cam, -width, -height);
  }
  autre{
    println ("Switcher = 0 again");
    commutateur = 0;
  }
}

Utiliser la souris

Le traitement comporte des méthodes intégrées pour accéder à la souris. Pour détecter le moment où l'utilisateur clique sur la souris, ajoutez le mousePressed  fonctionne au bas de votre script.

void mousePressed () {
  commutateur ++;
}

Le traitement écoute tous les clics de souris et interrompt le programme pour qu'il exécute cette méthode lorsqu'il en détecte une. Chaque fois que la méthode est appelée, la valeur de switcher augmente d’une unité. Enregistrez et exécutez votre script.

À présent, lorsque vous appuyez sur le bouton de la souris, les différentes orientations des vidéos sont passées en revue avant de revenir à l'original. Jusqu’à présent, vous venez d’inverser la vidéo, faisons maintenant quelque chose d’un peu plus intéressant.

Ajouter plus d'effets

Vous allez maintenant coder un effet d'image en direct quadrichromie semblable aux œuvres d'art célèbres d'Andy Warhol. Ajouter plus d'effets est aussi simple que d'ajouter une autre clause à la logique. Ajoutez ceci à votre script entre le dernier sinon si  déclaration, et autre .

sinon si (sélecteur == 3) {
  teinte (256, 0, 0);
  image (came, 0, 0, largeur / 2, hauteur / 2);

  teinte (0, 256, 0);
  image (came, largeur / 2, 0, largeur / 2, hauteur / 2);

  teinte (0, 0, 256);
  image (came, 0, hauteur / 2, largeur / 2, hauteur / 2);

  teinte (256, 0, 256);
  image (came, largeur / 2, hauteur / 2, largeur / 2, hauteur / 2);
}

Ce code utilise le image  fonction pour créer quatre images de caméra distinctes dans chaque coin de l’écran et les rendre toutes demi-dimensionnées.

le teinte  Cette fonction ajoute de la couleur à chaque image de la caméra. Les chiffres entre parenthèses sont rouge, vert et bleu (RVB)  valeurs. Teinte colore tout le code suivant avec la couleur choisie.

Enregistrez et jouez pour voir le résultat. Essayez de changer les numéros RVB dans chaque teinte  fonction pour changer les couleurs!

Le faire suivre la souris

Enfin, faisons en sorte que l’image en direct suive la position de la souris à l’aide des fonctions utiles de la bibliothèque de traitement. Ajoutez ceci au-dessus du autre  une partie de votre logique.

sinon si (sélecteur == 4) {
  image (cam, mouseX, mouseY, width / 2, height / 2);
}

Ici, vous positionnez l’image de votre appareil photo à mouseX  et souris . Celles-ci sont intégrées dans les valeurs de traitement qui renvoient le pixel pointé par la souris.

C'est tout! Cinq variations de la vidéo en direct par le code. Toutefois, lorsque vous exécutez le code, vous remarquerez quelques problèmes.

Finition du code

Le code que vous avez créé jusqu’à présent fonctionne, mais vous remarquerez deux problèmes. Tout d’abord, une fois que la variation à quatre couleurs apparaît, tout est ensuite teinté de violet. Deuxièmement, lorsque vous déplacez la vidéo avec la souris, cela laisse une trace. Vous pouvez résoudre ce problème en ajoutant quelques lignes en haut de la fonction de dessin.

void draw () {
  teinte (256,256,256);
  fond (0);

  // La fonction draw continue normalement ici!

Au début de chaque image, ce code réinitialise la couleur de teinte en blanc et ajoute une couleur d'arrière-plan noire pour arrêter la vidéo laissant des traces. Maintenant, lorsque vous testez le programme, tout fonctionne parfaitement!

Effets Webcame: Art From Code

Le traitement est très puissant, et vous pouvez l'utiliser pour faire beaucoup de choses. C’est une excellente plate-forme pour créer de l’art avec du code, mais elle convient également au contrôle de robots. !

Comment rédiger une animation de robot sensible à la voix dans p5.js Vous voulez que vos enfants s'intéressent à la programmation? Montrez-leur ce guide pour construire une tête de robot animée réactive et réceptrice. Read Article

Crédit d'image: Syda_Productions / Depositphotos