Home-theater-designers
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 pour 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.
Il existe de nombreux projets de graphisme et d'animation pour débutants qui utilisent Processing, mais il est également capable de manipuler la vidéo en direct.
Aujourd'hui, vous allez créer un diaporama vidéo en direct de différents effets contrôlés par la souris, en utilisant la vidéothèque Processing. 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.
Configuration du projet
Pour commencer, télécharger Traitement et ouvrez une esquisse vierge. Ce tutoriel est basé sur un système Windows, mais il devrait fonctionner sur n'importe quel ordinateur équipé d'une webcam.
Vous devrez peut-être installer la bibliothèque Processing Video, accessible sous Esquisse > Importer une bibliothèque > Ajouter une bibliothèque . Rechercher Vidéo dans la zone de recherche et installez la bibliothèque à partir de La Fondation du traitement .
Une fois installé, vous êtes prêt à partir. Si vous voulez sauter le codage, vous pouvez télécharger le croquis complet . Cependant, il est préférable de le faire vous-même à partir de zéro!
Utilisation d'une webcam avec traitement
Commençons par importer la bibliothèque et créer un mettre en place fonction. Entrez ce qui suit dans l'esquisse de traitement vide :
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
Après avoir importé la vidéothèque, vous créez un Capturer instance appelée Orange pour stocker les données de la webcam. Dans mettre en place , les Taille la fonction met en place un 640x480 fenêtre de la taille d'un pixel dans laquelle travailler.
La ligne suivante attribue Orange à une nouvelle instance de Capturer , pour cette croquis, qui est 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 tout cela 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 fonction. Entrez ceci sous le code ci-dessus, en dehors des accolades.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
Les dessiner la fonction est appelée à chaque frame. Cela signifie que plusieurs fois par seconde, si la caméra a des données disponible tu lire les données de celui-ci.
Ces données sont ensuite affichées sous forme de image , au poste 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 Orange est correctement imprimé à l'écran à chaque image. Si vous rencontrez des problèmes, vérifiez soigneusement votre code. Java a besoin de chaque parenthèse et point-virgule au bon endroit ! Le traitement peut également nécessiter quelques secondes pour accéder à la webcam, donc 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, manipulons-la. Dans la fonction de dessin, remplacez image(came,0,0); avec ces deux lignes de code.
scale(-1,1);
image(cam,-width,0);
Enregistrez et réexécutez l'esquisse. Pouvez-vous voir la différence? En utilisant un négatif escalader 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 correctement l'image.
Retourner l'image à l'envers ne nécessite que quelques petits changements.
scale(-1,-1);
image(cam,-width,-height);
Cette fois, les deux X et et les valeurs sont inversées, renversant l'image de la caméra en direct. Jusqu'à présent, vous avez codé une image normale, une image inversée horizontalement et une image inversée verticalement. Mettons en place un moyen de faire un cycle entre eux.
Faire un 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.*;
int switcher = 0;
Capture cam;
Nous pouvons utiliser la valeur de switcher pour déterminer ce qui arrive à l'image de la caméra. Lorsque l'esquisse démarre, vous lui donnez une valeur de 0 . Maintenant, nous pouvons utiliser la logique pour changer ce qui arrive à l'image. Mettez à jour votre dessiner méthode pour ressembler à ceci:
void draw(){
if (cam.available()){
cam.read();
}
if(switcher==0){
image(cam,0,0);
}
else if(switcher == 1){
scale(-1,1);
image(cam,-width,0);
}
else if(switcher == 2){
scale(-1,-1);
image(cam,-width,-height);
}
else{
println('Switcher = 0 again');
switcher = 0;
}
}
Maintenant, 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 sinon déclarations, le autre clause est réinitialisée à 0. La logique est une compétence importante pour les débutants à apprendre, et vous pouvez en savoir plus à leur sujet et bien plus encore avec un excellent didacticiel de programmation YouTube !
Utilisation de la souris
Le traitement a des méthodes intégrées pour accéder à la souris. Pour détecter quand l'utilisateur clique avec la souris, ajoutez le sourisappuyée fonction au bas de votre script.
annonces apparaissant sur l'écran d'accueil Android
void mousePressed(){
switcher++;
}
Le traitement écoute les clics de souris et interrompt le programme pour exécuter cette méthode lorsqu'il en détecte un. Chaque fois que la méthode est appelée, la valeur de switcher augmente de un. Enregistrez et exécutez votre script.
Désormais, lorsque vous appuyez sur le bouton de la souris, il fait défiler les différentes orientations des vidéos, avant de revenir à l'original. Jusqu'à présent, vous venez de retourner la vidéo, faisons maintenant quelque chose d'un peu plus intéressant.
Ajouter plus d'effets
Maintenant, vous allez coder un effet d'image en direct en quatre couleurs similaire aux célèbres œuvres 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 .
else if(switcher == 3){
tint(256, 0, 0);
image(cam, 0, 0, width/2, height/2);
tint(0, 256, 0);
image(cam, width/2, 0, width/2, height/2);
tint(0, 0, 256);
image(cam, 0, height/2, width/2, height/2);
tint(256, 0, 256);
image(cam, width/2, height/2, width/2, height/2);
}
Ce code utilise le image fonction pour créer quatre images de caméra séparées dans chaque coin de l'écran et pour les rendre toutes de la moitié de la taille.
Les teinte La fonction ajoute de la couleur à chaque image de la caméra. Les nombres 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!
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 partie de votre logique.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
Ici, vous positionnez l'image de votre appareil photo à sourisX et sourisY . Ce sont des valeurs de traitement intégrées qui renvoient le pixel sur lequel la souris pointe.
C'est ça! Cinq variantes de vidéo en direct par code. Cependant, lorsque vous exécutez le code, vous remarquerez quelques problèmes.
Terminer le code
Le code que vous avez créé jusqu'à présent fonctionne, mais vous remarquerez deux problèmes. Premièrement, une fois que la variation en 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 le corriger en ajoutant quelques lignes en haut de la fonction de dessin.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
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 traces. Maintenant, lorsque vous testez le programme, tout fonctionne parfaitement !
Effets webcam : l'art du code
Le traitement est très puissant et vous pouvez l'utiliser pour faire beaucoup de choses. C'est une excellente plateforme pour faire de l'art avec du code, mais elle est tout aussi adaptée pour contrôler des robots !
Si Java n'est pas votre truc, 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 fantastiques animations réactives !
Crédit d'image : Syda_Productions/ Depositphotos
Partager Partager Tweeter E-mail 3 façons de vérifier si un e-mail est réel ou fauxSi vous avez reçu un e-mail qui vous semble un peu douteux, il est toujours préférable de vérifier son authenticité. Voici trois façons de savoir si un e-mail est réel.
Lire la suite Rubriques connexes- La programmation
- Java
- Webcam
- Traitement
- Tutoriels de codage
Ian Buckley est un journaliste indépendant, musicien, interprète et producteur vidéo vivant à Berlin, en Allemagne. Quand il n'écrit pas ou ne monte pas sur scène, il bricole de l'électronique ou du code DIY dans l'espoir de devenir un savant fou.
Plus de Ian BuckleyAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner