/*-------------* *-------------*
| | | 0 |
| | | | |
| 0 --> width | | | |
| | | v |
| | | height |
*-------------* *-------------*/
Programme tes propres effets vidéos
Avec cet atelier, tu pourras réaliser des capture vidéo en direct avec des effets avancés.
- Introduction
- Les coordonnées
- Les caméras
- Les calques
- Les fonctions
- Les variables
- Les filtres de détourage
- Les filtres d'arrière plan
- Les filtres post processing
Introduction
Pour commencer rends-toi dans la page advanced du code source, trouve la ligne boolean advanced = false ;
et remplace false par true.
Programme ensuite tes effets en plaçant des lignes de code dans la fonction advanced(), entre les crochets.
Utilise la documentation ci-dessous pour t'aider, tu y trouveras chacune des fonctions que tu peux utiliser avec des instructions.
Les coordonnées
Dans cet atelier nous allons adresser des coordonnées à nos fonction en nombre de pixels.
Les valeure maximales de large et de haut dépendent de l'écran que tu utilise, ils correspondent respectivement aux variables width et height.
Pour placer quelque chose proportionellement à ton écran il est donc conseillé de faire un petit calcul comme dans cet exemple.
//place une image au centre de l'écran
imageMode(CENTER);
image( cameras[ 0 ] , width * 0.5 , height * 0.5 );Les caméras
Dans cet atelier, tu peux utiliser plusieurs caméras si tu le souhaite. Pour t'adresser à une caméra tu va devoir spécifier de laquelle il s'agit comme dans cet exemple.
Correspond à la première caméra. Retournera une erreur si aucune caméra n'est branchée.<
image( cameras[ 0 ] , 0 , 0 , width , height );Correspond à la deuxième caméra. Retournera une erreur si une deuxième caméra n'est pas branchée.
image( cameras[ 1 ] , 0 , 0 , width , height );Correspond à la troisème caméra. Retournera une erreur si une troisème caméra n'est pas branchée.
image( cameras[ 2 ] , 0 , 0 , width , height );Les calques
Les calques permettent d'isoler certaines partie de ton effet vidéo pour leur appliquer des opérations individuellement. Voici les calques qui sont à ta disposition.
Correspond au premier calque. Si aucune image n'y a été placée, le calque sera invisible.
image( hackLayer[ O ] , 0 , 0 , width , height );Correspond au deuxième calque. Si aucune image n'y a été placée, le calque sera invisible.
image( hackLayer[ 1 ] , 0 , 0 , width , height );Correspond au troisième calque. Si aucune image n'y a été placée, le calque sera invisible.
image( hackLayer[ 2 ] , 0 , 0 , width , height );Correspond au quatrième calque. Si aucune image n'y a été placée, le calque sera invisible.
image( hackLayer[ 3 ] , 0 , 0 , width , height );Pour écrire sur un calque, il suffit de spécifier le calque en question avant d'appeller une fonction.
Avant d'écrire sur un calque il est nécessaire d'appeller la fonction beginDraw(), puis endDraw() à la fin des opération et avant d'utiliser le rendu du claque ailleurs.
/* affiche le rendu de la première caméra
détourée sur le rendu de la deuxième caméra */
hackLayer[ 0 ].beginDraw();
hackLayer[ 0 ].image( cameras[ 0 ] , 0 , 0 , width , height );
hackLayer[ 0 ].filter( clippingRVB );
hackLayer[ 0 ].endDraw();
image( cameras[ 1 ] , 0 , 0 , width , height );
image( hackLayer[ 0 ] , 0 , 0 , width , height );
Les fonctions
Voici quelques fonctions utiles qui pourront te servir
Affiche une image à l'écran. Remplace img par l'image que tu souhaite afficher,
x et y par les coordonnées horizontales et verticales où tu souhaites afficher l'image,
puis w et h par la largeur et la hauteur de l'image en pixels.
image( cameras[ 0 ] , 0 , 0 , width , height );Décale toutes les coordonnées suivantes du programme.
Remplace x et y par le décalage vertical puis horizontal que tu souhaites.
translate( width * 0.5 , height * 0.5 ); Effectue une rotation sur toutes les coordonnées suivantes du programme.
Remplace r par la rotation que tu souhaite en radiant (de 0 à deux fois PI).
rotate( PI ); Change l'échelle de toutes les images suivantes dans le programme.
Remplace s par l'échelle que tu veux donner (1 pour l'échelle un, 2 pour le double, 0.5 pour la moitié).
scale( s ); Ouvre une matrice.
Les fonction précédé de pushMatrix() et suivient de popMatrix() n'affectent pas le reste du programe.
La fonction pushMatrix() doit nécessairement être suivie de la fonction popMatrix() plus tard dans le programme.
pushMatrix( );
translate( width * 0.5 , height * 0.5 );
rotate( inc * PI );
image( cameras[ 1 ] , 0 , 0 , width , height );
popMatrix( ); Ferme une matrice.
Les fonction précédé de pushMatrix() et suivient de popMatrix() n'affectent pas le reste du programe.
La fonction popMatrix() doit nécessairement être précédée de la fonction puskMatrix() plus tôt dans le programme.
pushMatrix( );
translate( width * 0.5 , height * 0.5 );
rotate( inc * PI );
image( cameras[ 1 ] , 0 , 0 , width , height );
popMatrix( );Permet d'initialiser l'écriture d'un calque.
La fonction beginDraw() doit nécessairement être suivie de la fonction endDraw() plus tard dans le programme.
hackLayer[ 0 ].beginDraw();
hackLayer[ 0 ].image( cameras[ 0 ] , 0 , 0 , width , height );
hackLayer[ 0 ].endDraw();Permet de mettre fin à l'écriture d'un calque.
La fonction endDraw() doit nécessairement être précédée de la fonction beginDraw() plus tôt dans le programme.
hackLayer[ 0 ].beginDraw();
hackLayer[ 0 ].image( cameras[ 0 ] , 0 , 0 , width , height );
hackLayer[ 0 ].endDraw();Cette fonction permet de changer les couleurs des filtres d'arrière-plan.
Remplace c par un chiffre compris entre 0 et 46 pour paramétrer la rotation de l'image.
setColor( 6 );Cette fonction permet de changer le nombre de couleurs des filtres d'arrière plan.
Remplace a par un chiffre compris entre 0 et 4 pour changer le nombre de couleur.
setColorNumber( 4 );Cette fonction permet de changer la vitesse de ton effet.
Remplace s par un chiffre compris entre 0 et 1 pour paramétrer la vitesse.
setSpeed( 0.8 );Cette fonction permet de changer l'amplitude des filtres d'arrière plan.
Remplace a par un chiffre compris entre 0 et 1 pour paramétrer l'amplitude'.
setAmplitude( 0.8 );Cette fonction permet d'appliquer un filtre sur ton effet.
Remplace f par le nom de l'effet que tu souhaite appliquer. Tu trouvera plus bas un descriptif de chacun des effets.
filter( zigzag );Les variables
Voici quelques variables utiles qui pourront te servir
Correspond à la largeur de l'écran
image( cameras[ 0 ] , 0 , 0 , width , height );Correspond à la hauteur de l'écran
image( cameras[ 0 ] , 0 , 0 , width , height );Évolue de façon continue en partant de 0.
rotate( time );Évolue alternativement de 0 à 1.
rotate(sinus);Évolue alternativement de 1 à 0.
rotate(cosinus);Correspond à la position horizontale de la souris relativement à la taille de l'écran, de 0 à 1.
scale( cursorX );Correspond à la position verticale de la souris relativement à la taille de l'écran, de 0 à 1.
scale( cursorY );Correspond au nombre PI.
rotate( PI );Les filtres de détourage
Les filtres de détourages permettent de traiter une image avant de l'afficher dans le programme. Il est préférable de les utiliser dans un calque pour ensuite affiché l'image traité plus tard.
Détoure une silhouette en comparant les valeur de rouge, de vert et de bleu de chaque pixel avec celles des pixels de l'image d'arrière plan.
filter(clippingRGB);Détoure une silhouette en comparant la teinte de chaque pixel avec celle des pixels de l'image d'arrière plan. Recommandé pour les fonds vert.
filter(clippingHSB);Arrondi le contour d'une silhouette détouré. Permet aussi de masquer les imperfections du détourage.
filter(round);Adouci les contour d'une silhouette et évite l'effet d'aliasing.
filter(smooth);Les filtres d'arrière plan
Les filtres d'arrière plans créent un effet visiuel qui occupe tout l'image.
Pour les utiliser, appelle la fonction filter() et met le nom du filtre que tu souhaite utiliser entre les parenthèses.
N'oublie pas de place ton filtre dans ton code avant les fonctions jam, sinon il les effacera en s'affichant par dessus.
Crée une image d'arrière-plan avec un effet de couleur.
filter(psycho);Crée une image d'arrière-plan avec un effet de couleur.
filter(zigzag);Crée une image d'arrière-plan avec un effet de couleur.
filter(circle);Les filtres post processing
Les filtres post processing modifient les images en leur appliquant un léger changement. Chaque filtre effectue un effet différent et l'applique sur ce qui a été lu plus tôt dans le programme. Cet exemple crée un effet de grain sur l'image.
Corrige l'effet d'aliasing et masque les pixels apparents.
filter(antialiasing);Décale les tons rouges et verts, pour un effet vintage.
filter(rgbOffset);Crée un tramage horizontal sur l'image.
filter(fuzz);Crée un balayage vertical aléatoire sur l'image.
filter(glitch);Crée une surbrillance des couleurs les plus lumineuses.
filter(bloom);Crée un effet de grain sur l'image.
filter(grain);