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 ...
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.