Au lieu d'utiliser la fonction image pour afficher la vidéo, il est possible de la "reconstruire" totalement en utilisant les données extraites grâce à la méthode loadPixels. L'idée étant de travailler sur l'aspect artistique des choses.

Voici un exemple de ce qu'il est possible de réaliser :

En observant attentivement la "vidéo" ci-dessus, vous remarquerez qu'elle est uniquement composée de disques noirs (créé avec la fonction ellipse) de rayon plus au moins grand. Plus le pixel de la vidéo d'origine est "foncé" et plus le disque à un rayon important.

Comme déjà évoqué plus haut, nous n'utilisons pas la fonction image comme dans l'activité précédente. Il est donc inutile d'utiliser la fonction updatePixels qui permet de mettre à jour les pixels d'une image préalablement affichée. Pour obtenir le tableau de pixels (tableau dénommé pixels), il sera nécessaire d'utiliser la méthode update sur l'objet maVideo. Nous aurons ce genre de programme :

var maVideo;
var largeur=320;
var hauteur=240;
var index=0;
var step=8
function setup() {
	createCanvas(largeur,hauteur);
	maVideo=createVideo("fingers.webm");
	maVideo.hide();
	maVideo.loop();
	noStroke();
	fill(0);
}

function draw() {
	background(255);
	maVideo.loadPixels();
    //À partir de cette ligne il est possible d'utiliser le tableau de pixels : maVideo.pixels[]
	/*Le code est à compléter à partir d'ici
    /+++++++++++++++++
    /+++++++++++++++++
    /+++++++++++++++++
    /+++++++++++++++++
    /+++++++++++++++++
    /+++++++++++++++++
}
        

Vu que nous n'affichons pas d'image dans la canvas à l'aide de la fonction image, nous travaillons directement sur les données issues de la vidéo "fingers.webm", voilà pourquoi nous écrivons maVideo.loadPixels() à la place de l'habituel loadPixels() et maVideo.pixels[] à la place du non moins habituel pixels[].

Tout cela est un peu complexe, mais en résumé, vous utiliserez loadPixels(), pixels[] et updatePixels si vous utilisez la fonction image. Dans le cas où vous n'utilisez pas la fonction image, vous utiliserez maVideo.loadPixels() et maVideo.pixels[].

Tous les pixels de la vidéo d'origine ne sont pas utilisés, ici j'utilise un pixel tous les 8 pixels (d'où la variable step=8). Le premier disque correspond au pixel n°0, le deuxième disque correspond au pixel n°8, le troisième disque correspond au pixel n°16...

N'oubliez pas que le tableau maVideo.pixels[] est composé de 4 grandeurs pour chaque pixel (canal rouge, canal vert, canal bleu, canal alpha). La variable index correspond à l'indice d'un élément du tableau maVideo.pixels[] :

• le canal rouge du pixel n°0 (coordonnées x=0, y=0) est donné par maVideo.pixels[0] (index=0)
• le canal vert du pixel n°0 (coordonnées x=0, y=0) est donné par maVideo.pixels[1] (index=1)
• le canal bleu du pixel n°0 (coordonnées x=0, y=0) est donné par maVideo.pixels[2] (index=2)
• le canal alpha du pixel n°0 (coordonnées x=0, y=0) est donné par maVideo.pixels[3] (index=3)
• le canal rouge du pixel n°1 (coordonnées x=1, y=0) est donné par maVideo.pixels[4] (index=4)
• ......

À faire vous-même 2.1

Déterminer la relation reliant index, x (coordonnée x du pixel), y (coordonnée y du pixel) et largeur (largeur de la vidéo d'origine).

---

À faire vous-même 2.2

En vous aidant de ce qui vient d'être expliqué, créez un programme permettant d'obtenir la "vidéo" ci-dessus.

N'oubliez pas que vous pouvez utiliser le flux vidéo d'une webcam à la place de la vidéo proposée.

Cette activité est particulièrement difficile, n'hésitez pas à procéder étape par étape et à poser des questions.

---