Avec les briques 1 et 2 – de cette série – nous avons exploré la création de canevas “responsive” puis l’utilisation de “GRAPHICS” pour dessiner des rectangles sur des graphics, ou canevas virtuels. Cette fois ci nous allons dessiner des polygones avec des vertex à la place des rectangles. Un des polygones sera creux pour voir comment ça se passe. Nous obtiendrons ainsi quelque chose comme ça :

Des polygones, dont un creux, qui s’ajustent automatiquement à la taille de l’écran

J’ai fait ce sketch sur openProcessing.org, en p5.js :

Le script est intéressant pour son utilisation de beginShape et beginContour.

la fonction ajustPolygon(index, ep, w, h) crée les polygones (quadrilatères) 1 à 4 en calculant les coordonnées des extrémités (vertex) des 4 segments qui les constituent. Le polygone d’index 4, celui qui est représenté en bas à gauche, est “percé” d’un polygone à trois segments (un triangle). Ici les vertex sont donnés dans le sens des aiguille d’une montre si l’on veut juste indiquer un contour sans “percer” mais dans le sens inverse si l’on veut évider ou “percer”.

La fonction ajustImage(txt, ratio) a déjà été vue dans la “brique” 1 (un canevas “responsive”) . L’utilisation de Graphics, une sorte de calque, a été abordé dans la “brique” 2 dédiée au graphics. .

L’ensemble des fichiers composant ce sketch est accessible sur mon depôt GitHub, dans le répertoire vertex ajustes – 2020 05 10. On peut aussi exécuter le code directement sur GitHub via cette url.

Et maintenant ?

Et voilà nous avons une troisième brique ! Les autres briques sont et seront publiées dans cette même série, .

Mon prochain objectif est de découper des images grâce à des graphics. Pour celà, il va me falloir maîtriser trois nouvelles briques au moins : charger des images prédéfinie, récupérer des images par une API ou via l’utilisateur, appliquer un masque de découpe à une image.

0 0 vote
Article Rating
0
Would love your thoughts, please comment.x
()
x