Processing – 1 / Pixels et couleurs | PipixPipix

Télécharger Processing

Utilisation de l’interface

Ne pas hésiter à recopier les extraits de code dans Processing pour les essayer

Les pixels

Les écrans de nos ordinateurs, télévisions et téléphones ne sont pas composé d’un seul bloc lumineux projetant des images. Ils sont en fait formés d’une grille de minuscules segments rectangulaires que l’on appelle pixel. Le pixel est l’unité la plus petite de l’écran, et par conséquent la plus petite chose qu’il peut afficher.

Les pixels sont organisés sur deux axes, nommés par convention X (pour la largeur) et Y (pour la hauteur).  Lorsque l’on exécute du code dans Processing, il est traité puis affiché dans une fenêtre appelée « canvas ». Un ordinateur est capable de réaliser des calculs très rapidement, mais n’en reste pas moins stupide. En programmation rien ne se fait « automatiquement », le développeur doit transmettre à la machine chaque action qu’il souhaite réaliser, elle ne les devinera jamais par elle même. Si l’on souhaite mettre en place un « canvas » pour que Processing puisse y afficher de contenu, il faut lui indiquer de la manière suivante :

void setup() {
  size(600, 400);
}

Je reviendrais dans le prochain chapitre sur ce que veut dire « void setup() », concentrons nous pour le moment sur la déclaration « size(600, 400) ». Cette ligne peut être décomposée en deux grandes parties. La première, « size() », est une fonction. C’est un morceau de code fourni par Processing, qui lui permet de créer un canvas. Processing possède beaucoup de fonctions spécifiques à la création graphique, qui vont nous permettre de tracer des formes simples, manipuler le canvas ou réaliser des opérations mathématiques. Toutes ces fonctions sont listées dans la documentation en ligne de Processing, nous les verrons très prochainement. Une fonction peut prendre des paramètres, c’est la deuxième partie de la ligne. Ici la fonction « size(600, 400) » prend deux paramètres : 600 et 400. Ils sont séparés par une virgule et correspondent respectivement à la largeur et à la hauteur du canvas. La ligne se termine par un point virgule qui permet de délimiter cette instruction de la prochaine. Pour plus de lisibilité, on utilisera également toujours un retour à la ligne après chaque nouvelle instruction. Cette première ligne de code veut donc dire : « créé un canvas de 600 pixels de large et 400 pixels de haut ».

Revenons à nos pixels. Comme expliqué précédement, les pixels sont organisés en grille. Dans notre cas, cette grille fait à présent 600 pixels de large et 400 pixels de haut. Cette grille commence en haut à gauche de l’écran et se termine en bas à droite. Le pixel en haut à gauche du canvas possède donc les coordonnées (0, 0), celui en bas à droite de l’écran (599, 399). Si  l’on place des points aux coordonnées suivantes : Rouge : (0, 0)  Bleu : (2, 1) Jaune : (4, 4) Vert : (9, 4), et que l’on zoom sur la grille, le résultat sera celui-ci :

Dans Processing il est possible de reproduire le même exemple avec le code suivant :

void setup() {
  size(600, 400);
  
  point(0, 0);
  point(2, 1);
  point(4, 4);
  point(9, 4);
}

En exécutant le code et en plissant un peu les yeux, vous pourrez remarquer les pixels en haut à gauche du canvas !

Revenons rapidement sur le code que nous venons d’écrire. Les quatre lignes exécutent la même action. Il s’agit à nouveau d’une fonction intégrée à Processing. Elle permet de dessiner un point et prend deux paramètres, une coordonnée X et une coordonnée Y. Nous venons ainsi de dire : « trace un point aux coordonnées x = 0 et y = 0 puis trace un point aux coordonnées x = 2 et y = 1 puis trace un point, etc. »

Les couleurs

Le pixel est lui même divisé en trois parties qui lui permettent d’afficher soit du rouge, du vert ou du bleu. Ces trois couleurs permettent cinq combinaisons supplémentaires par synthèse additive.

  • vert + bleu = cyan
  • rouge + bleu = magenta
  • rouge + vert = jaune
  • rouge + vert + bleu = blanc
  • pas de couleur = noir

Le reste des couleurs est obtenu en diminuant ou augmentant individuellement la luminosité du rouge, du vert ou du bleu. La luminosité peut prendre 256 valeurs différentes, allant de 0 (éteint, pas de luminosité), à 255 (allumé, luminosité au maximum). Pour résumer, nous avons trois couleurs par pixel (rouge, vert, bleu), et chacun possède 256 valeurs de luminosité possible (de 0 à 255). Cela représente au final 256*256*256 = 16 777 216 couleurs possibles par pixel ! 🌈

Dans Processing on écrira rgb(255, 0, 0) pour parler de la couleur rouge. « rgb » étant l’acronyme de « red green blue » en anglais (rouge, bleu, vert). On indique ainsi à Processing que le rouge prendra une luminosité de 255, le vert de 0 et le bleu de 0. Une couleur uniquement composée de rouge, sans vert ni bleu. La couleur cyan (vert + bleu) quant à elle s’écrira rgb(0, 255, 255). Plus subtile, la couleur mauve s’écrira rgb(100, 60, 160). Il est évidement impossible de connaitre les références de toutes les couleurs, il existe un outil dédié à cet effet dans Processing accessible depuis le menu « Outils » -> « Sélecteur de couleur ».

Partager