Traitement d'image avec p5js


p5jsimg

Image au format numérique:

Les images numériques sont constituées d'un ensemble de points appelés Pixels (Picture element). Une image est donc représentée par une matrice de pixels.

pixel

La couleur de chaque pixel est défini à partir des 3 composantes de couleurs élémentaires que sont le Rouge, le Vert et le Bleu.

zoomPixel

Chaque composante est codée sur 1 octet ce qui correspond à 256 nuances (de 0 la plus foncée à 255 la plus claire).
Ce qui permet de coder 256 x 256 x 256 = 16 777 216 (16 millions de couleurs).

Ces 3 composantes sont représentées le plus souvent par les sigles RVB (en français) et RGB (en anglais Red/Green/Bleue) et sont codées en héxadécimal.

Suivre ce lien pour mieux comprendre les composantes RGB ...

Un fichier image contient la taille de l'image (largeur et hauteur) ainsi que les valeurs des composantes RGB de chaque pixels.

Une image chargée (loadImage) dans la mémoire de l'ordinateur comporte pour chaque pixel, en plus des composantes RGB, une composante alpha notée A, qui représent la transparence du pixel et qui est utilisée lors de l'affichage de l'image à l'écran pour gérer les superpositions. (une valeur de 0 correspond à une transparence maximale et une valeur de 255 à pas de transparence).

Lorsque l'on manipule une image avec un langage de programmation chaque pixel est donc représenté par les 4 composantes RGBA.

Celles-ci sont stockées dans un tableau linéaire (appelé raster) comme représenté ci-dessous :

raster

Pour bien comprendre comment parcourir tous les pixels d'une image (parcours linéaire) :forimage1 animation

Autre exemple de parcours :forimage2 animation

Travail à réaliser :

Afficher les 3 composantes RGB d'une image, comme sur l'exemple ci-dessous :

imgRGB

Ressources à disposition :


CC BY NC SA  ( Christophe Béasse - Octobre 2017 )