Ajouter un effet de loupe paramétrable

Bonjour à tous,

Les défis GD m’intéressent. Cela n’est plus un secret.
Ainsi, aujourd’hui je vous propose de jeter un oeil sur le résultat de ma dernière élucubration graphique: l’ajout d’un effet de loupe sur une image.

Première étape: Réflexion sur le verre d’une loupe.

Lorsqu’on regarde une image, notre regard est perpendiculaire au plan de l’image. Un plan en coupe de la situation pourrait être celui-ci:

Vue en coupe d'une loupe sphérique

A tout point de la sphère ‘pS’ correspond donc un point ‘pT’ sur le plan « diamétrique » de cette même sphère. Le point ‘pT’ correspond au point de la texture à appliquer en lieu et place du l’image du point ‘pS’ perçue par notre oeil.

Deuxième étape: Quels sont les paramètres à retenir?

Ce n’est pas tout de trouver le filon pour appliquer notre effet de loupe, il faut également se demander quels sont les paramètres dont dépend notre effet.
Il y a déjà les paramètres directes de la sphère: son centre et son rayon.
Mais on peut également appliquer une petite transformation de notre hémisphère.

Troisième étape: Le code

Nous en arrivons donc au code:

  1. /*  Donne un effet de loupe sur une image centré en (cx, cy) et de rayon r */

Quatrième étape: La visualisation

Effet de loupe animé

Cinquième étape: L’utilisation de la fonction loupe()

  1. span class= »st0″>’effets’

Ce code applique un effet de loupe centré en (200, 200) avec un rayon de 100 pixels et une hauteur de 50% par rapport une hémisphère normale.

Tags: , , , , ,