Les points.

Nous avons pu voir dans la leçon précédente comment utiliser le système de coordonnées et tracer des lignes. Les lignes sont très pratiques pour dessiner rapidement des contours. Intéressons nous maintenant à un autre type de construction graphique en processing : le point.

Nous avons appris en mathématique qu'un point est ... ponctuel. Dit autrement, sa position a une précision infinie, et sa dimension est nulle. Il est déjà différent du point que nous utilisons lorsque nous faisons des figures. Celui ci n'a que la précision de notre vision et il a la largeur de notre pointe de crayon ou de stylo.

En informatique, graphiquement, un point c'est un pixel. Pour se représenter un pixel, il faut voir l'écran de l'ordinateur ou une image comme étant composé de petit rectangles élémentaires, comme une grille. En pratique, pour se représenter les pixels de l'écran, on peut utiliser une feuille de papiers millimétré ou une feuille à petits carreaux. Ces carreaux nous permettent de compter les coordonnées.

Par exemple, sur la figure ci contre, deux pixels sont coloriés en noir :

  • le pixel de coordonnées (4,5)
  • le pixel de coordonnées (7,1)

pour dessiner un point en processing, la syntaxe est simplissime. On utilise la fonction point en passant en argument les deux coordonnées. Ici par exemple, pour placer ces deux points, le code serait

function draw() {
  point(4,5);
  point(7,1);
}

Nous allons par exemple dessiner une flèche qui pointe vers le bas à droite. Sur l'image à droite, nous avons dessiné pixel par pixel la flèche. On voit que le premier point commence sur la ligne 0, à l'abscisse 4. Ses coordonnées sont donc (4,0). Le second point a lui pour coordonnées (5,1).

Cette flèche a un total de 14 points qui sont nécessaires pour la dessiner. C'est peu sur la surface d'un écran, par contre cela semble bien long quand il faut le dessiner soit même.

Il est important de noter que l'on utilisera assez rarement si ce n'est très rarement les points tout seul. Ils seront utilisés surtout au sein de fonctions pour créer des formes complexes, ou dans le cas de traitement d'image automatisés point par point. on utilisera aussi beaucoup les points avec les fonctions de transformation.

Éditeur
À faire vous même

Le fantôme de Pac Man

Vous pouvez réaliser, point par point le fantôme de Pac Man comme dans l'image ci contre.

On peut en placer plusieurs en utilisant les transformations, ainsi que les boucles et les tableaux.