Étape 8: Notions de base - intervention de l’utilisateur
Maintenant, la formule suivante rendra une place suite à la souris et de couleur après la position x . Il s’agit d’une forme simple d’interaction avec l’utilisateur.
Note : Pour profiter de l’interactivité, suivre http://www.openprocessing.org/sketch/138963
Formule
WIDTH = 250; RATIO = 1; X_MIN = -20; X_MAX = 20; Y_MIN = -20; Y_MAX = 20; MOUSE_MOVE = true; // (a) color hsb(x, y) { float d = dist(u, v, mouseX, mouseY) / WIDTH * 10; // (b) float shift = mouseX / WIDTH; // (c) float bright = (1/d) * 255; // (d) float hue = shift * 255; // (e) return color(hue, 255, bright); // (f) } Explication
- (a) réglage MOUSE_MOVE true assurera pour redessiner lors de tout déplacement de la souris.
- (b) nous calculer la distance du pixel actuel à la souris. Au lieu de x et y, u et v sont utilisés, car ils représentent les coordonnées du pixel. Largeur est utilisée pour normaliser et être indépendant de la taille du canevas réelles. La valeur 10 contrôle la taille de la tache.
- (c) le changement de couleur est proportionnel à la position horizontale de souris mouseX. Largeur est utilisée pour ce quart de travail varie entre 0 et 1.
- (d) la luminosité sera maximale sous la souris et tendra à zéro pour les pixels de la souris.
- (e) pour la teinte, nous mettre à l’échelle les décalages de couleurs, comprise entre 0 et 255.
- (f) nous créons la couleur du pixel en utilisant la teinte calculée, la luminosité et une saturation maximale (255, pour des couleurs fortes).
Notes :
- Dessiner à plat simple formes suivant la souris, MathVision est beaucoup moins efficace que les primitives graphiques habituelles de Processing.js. C’est parce que MathVision recalcule chaque pixel (application de la formule à chacun) pour chaque nouveau dessin de la toile.
- En revanche, les effets, tels que le halo que vous pouvez voir ici, sont très facilement obtenus.
