Comment créer des effets de webcam incroyables en utilisant Java et le traitement
Le traitement est un outil puissant qui permet de créer de l’art à travers le code. C’est une combinaison de bibliothèques Java pour travailler avec des graphiques et un environnement de développement intégré (IDE) qui vous permet d’écrire et d’exécuter facilement du code.
Il existe de nombreux projets de graphisme et d’animation pour débutants utilisant le traitement, mais il est également capable de traiter la vidéo en temps réel.
Aujourd’hui, vous allez utiliser la vidéothèque Processing pour créer un diaporama vidéo en temps réel avec différents effets contrôlés par la souris. En plus de retourner la vidéo en direct, vous apprendrez à la redimensionner et à la colorer, et à la faire suivre le curseur de la souris.
Paramètres du projet
Tout d’abord, téléchargez Processing et ouvrez une esquisse vierge. Ce tutoriel est basé sur Windows, mais il devrait fonctionner sur n’importe quel ordinateur avec une webcam.
Vous devrez peut-être installer la bibliothèque de vidéos de traitement, accessible à l’adresse Esquisse > Importer une bibliothèque > Ajouter une bibliothèque. chercher vidéo dans le champ de recherche, puis à partir de s’occuper des fondations.
Une fois installé, vous êtes prêt à partir. Si vous souhaitez ignorer le codage, vous pouvez télécharger le croquis complet. Cependant, il vaut mieux le faire soi-même à partir de rien !
Utilisation d’une webcam avec traitement
Commençons par importer la bibliothèque, puis créons un d’installation Caractéristiques. Entrez ce qui suit dans l’esquisse de processus vierge :
import handle.video.* ;
caméra de capture ;
void set() {
taille(640,480);
cam = nouvelle Capture(this, 640, 480);
cam.start();
}
Faire une vidéo du jour
Après avoir importé la vidéothèque, créez un Capturer appel d’instance came Stockez les données des webcams.exister d’installationcette Taille fonction définit un 640×480 Les fenêtres de la taille d’un pixel fonctionnent.
affectation de ligne suivante came à une nouvelle instance Capturerpour cette Dessinez, de la même taille que la fenêtre, puis dites à la caméra de s’allumer cam.start().
Ne vous inquiétez pas si vous ne comprenez pas chaque partie pendant un certain temps. En bref, nous avons demandé à Processing de créer une fenêtre, de trouver notre caméra et de l’ouvrir !Pour l’afficher, nous avons besoin d’un La peinture Caractéristiques. Sous le code ci-dessus, entrez ceci en dehors des accolades.
void draw() {
si (cam.disponible()) {
cam.read();
}
image(came, 0, 0);
}
cette La peinture La fonction est appelée à chaque image. Cela signifie plusieurs fois par seconde, si La caméra a des données utilisable tu lis données obtenues à partir de celui-ci.
Ces données sont ensuite affichées sous la forme imageen emplacement 0, 0qui est le coin supérieur 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 came Chaque image est imprimée correctement à l’écran. Si vous rencontrez des problèmes, vérifiez soigneusement votre code. Java doit mettre chaque parenthèse et point-virgule au bon endroit ! Le processus peut également prendre quelques secondes pour accéder à la webcam, donc si vous pensez que cela ne fonctionne pas, attendez quelques secondes après le démarrage du script.
Retourner l’image
Maintenant que vous avez une image de webcam en direct, travaillons dessus.Dans la fonction plot, remplacez image(came, 0, 0); Utilisez ces deux lignes de code.
échelle(-1,1);
image(came, largeur, 0);
Enregistrez et réexécutez l’esquisse. Pouvez-vous voir la différence?en utilisant le négatif échelle valeur, tout X Les valeurs (pixels horizontaux) sont maintenant inversées.Pour cette raison, nous devons utiliser la valeur négative de la fenêtre largeur Positionnez l’image correctement.
L’inversion de l’image ne nécessite que quelques petites modifications.
échelle(-1, -1);
image(caméra, -largeur, -hauteur);
Cette fois, les deux X et oui Les valeurs sont inversées, inversant l’image de la caméra en direct. Jusqu’à présent, vous avez écrit des images normales, des images inversées horizontalement et des images inversées verticalement. Mettons en place une méthode pour passer de l’un à l’autre.
fais le cycle
Au lieu de réécrire le code à chaque fois, nous pouvons les parcourir en utilisant des nombres.créer un nouveau entier appeler en haut de votre code commutateur.
import handle.video.* ;
commutateur int = 0 ;
caméra de capture ;
Nous pouvons utiliser la valeur du commutateur pour déterminer ce qui arrive à l’image de la caméra.Lorsque l’esquisse démarre, vous lui donnez une valeur 0Maintenant, nous pouvons utiliser la logique pour modifier le changement d’image.mettre à jour votre La peinture La méthode ressemble à ceci :
void draw() {
si (cam.disponible()) {
cam.read();
}
si (commutateur == 0) {
image(came, 0, 0);
}
sinon si (commutateur == 1) {
échelle(-1,1);
image(came, largeur, 0);
}
sinon si (commutateur == 2) {
échelle(-1, -1);
image(caméra, -largeur, -hauteur);
}
autre {
println(« Switcher = 0 à nouveau »);
commutateur = 0 ;
}
}
Désormais, les trois variantes du code se déclencheront en fonction de la valeur du commutateur.S’il ne correspond pas à l’un de nos si ou alors si autre déclaration, autre la clause est remise à 0. La logique est une compétence importante à apprendre pour les débutants, et vous pouvez en apprendre davantage à leur sujet grâce à d’excellents didacticiels de programmation YouTube !
utiliser la souris
Handle a des méthodes intégrées pour accéder à la souris.Pour détecter le moment où l’utilisateur clique sur la souris, ajoutez souris vers le bas fonction en bas du script.
annuler la souris vers le bas () {
commutateur++ ;
}
Le traitement écoute les clics de souris et interrompt le programme pour exécuter cette méthode lorsqu’un clic de souris est détecté. Chaque fois que la méthode est appelée, la valeur de switcher est incrémentée de 1. Enregistrez et exécutez votre script.
Maintenant, lorsque vous appuyez sur le bouton de la souris, il parcourt les différentes orientations de la vidéo avant de revenir à l’état d’origine. Jusqu’à présent, vous venez de retourner la vidéo, faisons maintenant quelque chose d’un peu plus intéressant.
Ajouter plus d’effets
Vous allez maintenant programmer un effet d’image en direct à quatre couleurs similaire à la célèbre œuvre d’art 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 (commutateur == 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(caméra, largeur/2, hauteur/2, largeur/2, hauteur/2);
}
Ce code utilise image La fonction crée quatre images de caméra distinctes à chaque coin de l’écran et les réduit toutes de moitié.
cette coloration Fonction pour ajouter de la couleur à chaque image de la caméra.Les chiffres entre parenthèses sont Rouge, vert et bleu (RVB) valeurs. Colorie tout le code ci-dessous avec la couleur de ton choix.
Sauvegardez et jouez pour voir le résultat.Essayez de changer les numéros RVB dans chaque coloration Fonction pour changer de couleur !
faites-le suivre la souris
Enfin, faisons en sorte que l’image en direct suive la position de la souris en utilisant les fonctions utiles de la bibliothèque de traitement.ajouter ceci ci-dessus autre partie de votre logique.
sinon si (commutateur == 4) {
image(cam, sourisX, sourisY, largeur/2, hauteur/2);
}
Ici, vous positionnez l’image de la caméra à sourisX et souris YCe sont des valeurs de traitement intégrées qui renvoient le pixel sur lequel pointe la souris.
C’est ça! Cinq variantes de vidéo en direct via le code. Cependant, lorsque vous exécutez le code, vous remarquerez quelques problèmes.
code complet
Le code que vous avez créé jusqu’à présent fonctionne, mais vous remarquerez deux problèmes. Premièrement, une fois que le changement de quatre couleurs se produit, tout ce qui suit est violet. Deuxièmement, il laisse des traces lorsque vous déplacez la vidéo avec la souris. Vous pouvez y remédier en ajoutant quelques lignes en haut de la fonction plot.
void draw() {
Teinte (256, 256, 256);
arrière-plan(0);
Au début de chaque image, ce code réinitialise la couleur de teinte au blanc et ajoute une couleur d’arrière-plan noire pour empêcher la vidéo de laisser des traînées. Maintenant, lorsque vous testez le programme, tout fonctionne !
Effets de webcam : l’art du code
Le traitement est très puissant et vous pouvez en faire beaucoup. C’est une excellente plateforme pour faire de l’art avec du code, mais c’est aussi génial pour contrôler des robots !
Si vous n’aimez pas Java, il existe une bibliothèque JavaScript basée sur le traitement appelée p5.js. Il est basé sur un navigateur et même les débutants peuvent l’utiliser pour créer de superbes animations réactives !
Crédit image : Syda_Productions/Depositphotos
A propos de l’auteur
