Shear — cisaillement : drag & drop et jeu vidéo

Comme dans la vidéo de J. Speranza (carré 2×2 de sommets (0,0), (2,0), (2,2), (0,2)) : chaque point glisse parallèlement à l'axe, d'une quantité proportionnelle à sa distance à l'axe. Deux points milieux de côtés pilotent la matrice :
M = [[1, 0.00],[0.00, 1]] det = 1.00 aire = 4.00

Exploration drag & drop

Point bleu = milieu du côté gauche → glisser horizontalement règle a₁₂ (shear // axe x).
Point orange = milieu du côté inférieur → glisser verticalement règle a₂₁ (shear // axe y).
La distance de chaque point à son axe dépend de la taille choisie ; l'interface en tient compte pour que le glissement règle directement le coefficient.

Matrice 2×2 éditable

Modifiez directement les 4 coefficients. Les cases a₀₁ et a₁₀ restent reliées aux points bleu/orange ; les cases diagonales étirent (scale) la figure.
Un cisaillement pur garde a₀₀ = a₁₁ = 1. Essayez a₀₀ = 2 pour voir un étirement horizontal.
Dans le jeu : amenez les deux points sur la cible en pointillés avant la fin du temps.

Affichage texte & zoom

28 px
+− zoomer · molette zoom · glisser le fond pour déplacer la vue. Taille des libellés : 10 à 48 px.

Lecture

Aire = |det M| · le point à distance d de l'axe bouge de k×d
Touches : ←→ a₁₂ · ↑↓ a₂₁ · Espace jouer · R zéro.