Avant de pouvoir travailler sur ces activités, il est nécessaire d'avoir étudié :
Pour des raisons que je n'aborderai ici, il est nécessaire d'utiliser le navigateur Firefox de chez Mozilla pour tester les exemples proposés dans ces activités.
N.B. Il est possible d'utiliser une autre vidéo que celle proposée ci-dessus (fingers.webm), cependant attention à 3 choses :
Complétez le fichier "index.html" avec le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Les images avec p5.js</title>
<script src="p5.min.js"></script>
<script src="p5.dom.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Ce fichier ne sera plus modifié dans la suite de ces activités. A chaque fois que vous aurez à créer un nouvel exemple, il vous suffira de "copier-coller" le dossier "vid_0" (en modifiant le nom).
Saisissez, testez et analysez ce code :
script.js
var maVideo;
function setup() {
maVideo=createVideo("fingers.webm");
maVideo.loop();
}
function draw() {
}
Le programme ci-dessus ne présente aucune difficulté : nous créons un objet maVideo à l'aide de la fonction createVideo. La méthode loop permet de jouer la vidéo en boucle.
Saisissez, testez et analysez ce code :
script.js
var maVideo;
function setup() {
createCanvas(800,600);
maVideo=createVideo("fingers.webm");
maVideo.loop();
maVideo.hide();
}
function draw() {
background(255);
image(maVideo);
}
En testant cet exemple, vous avez dû vous rendre compte que l'on obtient le même résultat que dans le "À faire vous-même 1.4". Pourtant il y a une énorme différence : la vidéo est maintenant jouée dans un canvas.
Une vidéo n'est qu'une suite d'images fixes qui défilent à grande vitesse (environ 30 images par seconde). Comme vous l'avez peut-être remarqué, dans la fonction draw, nous utilisons la fonction image. Cette fonction image prend en paramètre l'objet "vidéo" maVideo. Cet objet maVideo va "fournir" à la fonction image une succession d'images fixes (les images qui composent la vidéo "fingers.webm"). À chaque exécution de la fonction draw, l'objet maVideo fournira une nouvelle image à la fonction image. Dans notre canvas nous aurons donc une succession d'images fixes qui, parce qu'elles défilent rapidement (la fonction draw est exécutée plusieurs dizaines de fois par seconde), donneront "l'illusion" du mouvement.
On peut se poser la question : quel est l'intérêt de cette méthode puisqu'elle donne exactement le même résultat que dans le "À faire vous-même 1.4" ? La réponse est simple : comme nous avons une succession d'images, nous allons pouvoir appliquer ce que nous avons appris dans les activités consacrées au traitement des images avec p5.js (voir ici).
Dernière chose, la méthode hide appliquée à l'objet maVideo permet de ne pas afficher la vidéo une deuxième fois, en dehors du canvas.
Tout ce que nous allons faire dans la suite peut aussi être fait, non pas avec une vidéo pré-enregistrée, mais avec le flux vidéo en provenance d'une webcam (vidéo en "direct"). Si vous disposez d'une webcam, saisissez, testez et analysez ce code :
var maVideo;
function setup() {
createCanvas(800,600);
maVideo=createCapture();
maVideo.hide();
}
function draw() {
background(255);
image(maVideo);
}
Comme vous pouvez le constater la différence est minime par rapport au programme proposé dans le "À faire vous-même 1.4" : nous remplaçons le createVideo par createCapture (cette fonction ne prend aucun paramètre), nous supprimons la ligne maVideo.loop() devenue inutile (vidéo en "direct").
En vous inspirant de ce vous avez appris dans les activités consacrées au traitement des images avec p5.js (voir ici), créez un programme permettant d'obtenir ceci (on pourra utiliser un filtre) :
N'oubliez pas que vous pouvez utiliser le flux vidéo d'une webcam à la place de la vidéo proposée.
En vous inspirant de ce vous avez appris dans les activités consacrées au traitement des images avec p5.js (voir ici), créez un programme permettant d'obtenir ceci (les pixels "sombres" (canaux rouge, vert et bleu inférieurs à 50) ont été remplacés par des pixels rouges) :