Retro-AA: Scène et axonométrie

Description

Série d'articles graphiques "retro".

Bonjour,

L'axonométrie (projection axonométrique, projection parallèle) s'utilise principalement en dessin technique et en architecture.
Elle a la particularité de conserver le parallélisme des droites, et correspond approximativement à une perspective centrale (ou conique) où l'œil est placé très loin (comme par exemple avec un téléobjectif très puissant).

La programmation de l'axonométrie est plus simple que celle de la perspective:
function Axono(az,ax) {// az,ax: en degrés (°)
  var rz=az*0.01745329252,rx=ax*-0.01745329252; // en rad
  var sa=Math.sin(rz),ca=Math.cos(rz),sb=Math.sin(rx),cb=Math.cos(rx);
  this.xx=ca; this.xy=-sa;
  this.zx=sb*sa; this.zy=sb*ca; this.zz=cb;
}

//  Projection (x,y,z) --> (U,V) avec p = new Axono(...):
//
//  U = x' = p.xx*x + p.xy*y;
//  V = z' = p.zx*x + p.zy*y + p.zz*z;

En fait, après la rotation et le basculement, on laisse simplement tomber une des coordonnées (ici y').

Le code proposé ici est une adaptation de celui de l'article Retro-A: Scène et perspective.

Remarque: Sur l'image de capture, il n'est pas aisé de voir que les bords opposés du damier sont vraiment parallèles !

Testé avec les dernières versions des navigateurs:
Chrome, Firefox, Opera, Safari

Liens:
Coordonnées cartésiennes , Matrice de rotation
Perspective axonométrique
Retro-A: Scène et perspective
Slider bar (barre de défilement, curseur) horizontal et vertical
Canvas: Move et Zoom avec la Souris

Bonne lecture ...

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.