1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Rétro-C. Surfaces h = f(x,y) au trait

Rétro-C. Surfaces h = f(x,y) au trait

Soyez le premier à donner votre avis sur cette source.

Vue 2 942 fois - Téléchargée 386 fois

Télécharger le projet
Commenter

Description

Bonjour,

Voici une autre utilisation de la scène 3D décrite dans les articles Javascript/Graphique "Rétro": la représentation de surfaces dont la "hauteur" est définie par une fonction à deux variables f(x,y).

Comme exemple, je prends la fonction: f(x,y) = sin(r)/r, avec r = √(x²+y²), dont voici le code Javascript: 
function Fxy(len) {
  this.H=new Float32Array(len); // heightmap
  this.U=new Float32Array(len); this.V=new Float32Array(len);
}
Fxy.prototype.SetHmap=function(nX,nY,p2) {
  if ((nX+1)*(nY+1)>this.H.length) return; // too big
  this.nX=nX; this.nY=nY;
  for (var y=-nY,m=0; y<=nY; y+=2) {
    var yy=y*y;
    for (var x=-nX; x<=nX; x+=2) {
      var r=p2*Math.sqrt(x*x+y*y);
      this.H[m++]=(r>0.00000000001)?Math.sin(r)/r:1;
    }
  }
};
Fxy.prototype.SetPersp=function(D,az,ax,p1) {// 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);
  var xx=ca,xy=-sa,yx=cb*sa,yy=cb*ca,yz=sb,zx=sb*sa,zy=sb*ca,zz=-cb;
  for (var y=-this.nY,m=0; y<=this.nY; y+=2) // y->z, h->y
    for (var x=-this.nX; x<=this.nX; x+=2,++m) {
      var h=p1*this.H[m],q=D/(D+yx*x+yy*y+yz*h);
      this.U[m]=q*(xx*x+xy*y); this.V[m]=q*(zx*x+zy*y+zz*h);
    }
};
Fxy.prototype.Draw=function(ctx,G,u0,v0,dil) {
  if (G&1) for (var y=0,m=0; y<=this.nY; ++y) {
    ctx.beginPath(); ctx.moveTo(u0+dil*this.U[m],v0+dil*this.V[m++]);
    for (var x=1; x<=this.nX; ++x)
      ctx.lineTo(u0+dil*this.U[m],v0+dil*this.V[m++]);
    ctx.stroke();
  }
  if (G&2) for (var x=0,m; x<=this.nX; ++x) {
    ctx.beginPath(); ctx.moveTo(u0+dil*this.U[m=x],v0+dil*this.V[m]);
    for (var y=1; y<=this.nY; ++y)
      ctx.lineTo(u0+dil*this.U[m+=this.nX+1],v0+dil*this.V[m]);
    ctx.stroke();
  }
};

Téléchargez le Zip, puis double-cliquez sur Fxy.html !
Vous êtes invités à adapter la boucle interne de SetHmap(nX,nY,p1,p2) {...} à une autre fonction de votre choix.

Paramétrage de la surface:
- nX, nY: dimensions de la grille.
- G: 1,2 = lignes parallèles à l'axe X,Y; 3 = les deux.
- Prm1: Amplitude (hauteur).
- Prm2: Rayon (r = √(x²+y²)).
- ↔: Rotation autour de l'axe verticale.
- ↕: Inclinaison.
- ¤: position de l'œil.
- Bouton de la souris: Move.
- Roulette de la souris: Zoom

Tous ces paramètres agissent instantanément !

Améliorations:
Le dessin simple au trait ne permet pas toujours de "bien voir" la forme 3D de la surface.
Prochainement, j'essayerai de parfaire la représentation au trait avec la méthode depthcue ou avec l'algorithme des lignes d'horizon.


«CodeS-SourceS» Rétro-A: Scène et perspective
«CodeS-SourceS» Rétro-AA: Scène et axonométrie
«CodeS-SourceS» Rétro-B: Les solides de Platon au trait
«Lycée Carnot» Fonctions à deux variables.


Merci d'avance pour vos éventuelles suggestions, critiques ou corrections.

Bonne lecture ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (William VOIROL)