Le traitement est un outil puissant qui permet la création d'art à travers 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 facilement du code.
Il existe de nombreux projets graphiques et d'animation pour débutants qui utilisent le traitement, 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, à l'aide de la vidéothèque de traitement. En plus de retourner la vidéo en direct, vous apprendrez à la redimensionner et à la colorier, et à la faire suivre le curseur de la souris.
Pour commencer, téléchargez Processing et ouvrez une esquisse vierge. Ce tutoriel est basé sur un système Windows, mais il devrait fonctionner sur n'importe quel ordinateur avec une webcam.
Vous devrez peut-être installer la bibliothèque Processing Video, accessible sous Sketch> Import Library> Add Library . Rechercher une vidéo dans le champ de recherche et installez la bibliothèque de The Processing Foundation .
Une fois installé, vous êtes prêt à partir. Si vous souhaitez ignorer le codage, vous pouvez télécharger le croquis complet. Cependant, il est préférable de le faire vous-même à partir de rien !
Commençons par importer la bibliothèque et créer une configuration une fonction. Entrez ce qui suit dans l'esquisse de traitement vierge :
import processing.video.* ;
Caméra de capture ;
void setup(){
taille(640,480);
cam =nouvelle Capture(this, 640, 480);
cam.start();
}
Après avoir importé la vidéothèque, vous créez une Capture instance appelée cam pour stocker les données de la webcam. Dans configuration , la taille la fonction configure un 640x480 fenêtre de la taille d'un pixel dans laquelle travailler.
La ligne suivante attribue cam à une nouvelle instance de Capture , pour ceci croquis, qui a 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 caméra et de l'allumer ! Pour l'afficher, nous avons besoin d'un tirage une fonction. Entrez ceci sous le code ci-dessus, en dehors des accolades.
annuler draw(){
si (cam.disponible()){
cam.read();
}
image(caméra,0,0);
}
Le tirage la fonction est appelée à chaque image. Cela signifie que plusieurs fois par seconde, si la caméra a des données disponibles vous lisez les données qu'il contient.
Ces données sont ensuite affichées sous forme d'image , à la position 0, 0 , qui se trouve 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 cam 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.
Maintenant que vous avez une image de webcam en direct, manipulons-la. Dans la fonction draw, remplacez image(cam,0,0); avec ces deux lignes de code.
échelle(-1,1);
image(cam,-largeur,0);
Enregistrez et réexécutez l'esquisse. Pouvez-vous voir la différence? En utilisant une échelle négative 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 largeur de la fenêtre pour positionner l'image correctement.
Retourner l'image à l'envers ne nécessite que quelques petites modifications.
échelle(-1,-1);
image(cam,-largeur,-hauteur);
Cette fois, les deux x et y 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 passer de l'un à l'autre.
Au lieu de réécrire votre code à chaque fois, nous pouvons utiliser des chiffres pour les parcourir. Créer un nouvel entier en haut de votre code appelé switcher .
import processing.video.* ;
commutateur int =0 ;
Caméra de capture ;
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 attribuez la valeur 0 . Maintenant, nous pouvons utiliser la logique pour changer ce qui arrive à l'image. Mettez à jour votre dessin méthode pour ressembler à ceci :
void draw(){
si (cam.disponible()){
cam.read();
}
si(commutateur==0){
image(caméra,0,0);
}
sinon si(commutateur ==1){
échelle(-1,1);
image(cam,-largeur,0);
}
sinon si(commutateur ==2){
échelle(-1,-1);
image(cam,-largeur,-hauteur);
}
autre{
println("Switcher =0 à nouveau");
commutateur =0 ;
}
}
Désormais, les trois variantes du code se déclencheront en fonction de la valeur de switcher. S'il ne correspond pas à l'un de nos si ou si autre déclarations, le autre La clause est réinitialisée à 0. La logique est une compétence de débutant importante à apprendre, et vous pouvez en savoir plus à leur sujet et bien plus encore avec un excellent tutoriel de programmation YouTube !
Le traitement 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 le mousePressed fonction en bas de votre script.
void mousePressed(){
commutateur++ ;
}
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 parcourt 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.
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 else if déclaration, et autrement .
else if(switcher ==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 l'image fonction pour créer quatre images de caméra distinctes dans chaque coin de l'écran et les réduire toutes à moitié.
La teinte La fonction ajoute de la couleur à chaque image de la caméra. Les chiffres entre parenthèses sont rouge, vert et bleu (RVB) valeurs. Colorez tous les codes suivants avec la couleur choisie.
Sauvegardez et jouez pour voir le résultat. Essayez de changer les numéros RVB dans chaque teinte fonction pour changer les couleurs !
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 de else partie de votre logique.
else if(switcher==4 ){
image(cam, sourisX, sourisY, largeur/2, hauteur/2);
}
Ici, vous positionnez l'image de votre caméra sur mouseX et sourisY . Celles-ci sont des valeurs de traitement intégrées qui renvoient le pixel sur lequel la souris pointe.
C'est ça! Cinq variantes de la vidéo en direct via le code. Cependant, lorsque vous exécutez le code, vous remarquerez quelques problèmes.
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 résoudre ce problème en ajoutant quelques lignes en haut de la fonction de dessin.
void draw(){
teinte(256,256,256);
arrière-plan(0);
// la fonction de dessin continue normalement ici !
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 parfaitement !
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 !
Si Java n'est pas votre truc, il existe une bibliothèque JavaScript basée sur Processing 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 image :Syda_Productions/Depositphotos