Javascript et trigonométrie

**neosqualls** · 05/06/2015, 22h24

Bonsoir à tous,

Je tente de développer en javascript le calcul des coordonnées des deux points d'une tangente commune à deux cercles. Je suis absolument nul en math, je me suis donc aidé de se site : http://www.lucidarme.me/?p=2199

J'ai reproduit les formules :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
var RA = 100;
var RB = 100;
 
var X_A = 400;
var Y_A = 200;
 
var X_B = 700;
var Y_B = 200;
 
 
var D  = Math.sqrt(((X_B - X_A) * (X_B - X_A)) + ((Y_B - Y_A) * (Y_B - Y_A)));
var L  = Math.sqrt((D * D) - ((RA - RB) * (RA - RB)));
var R  = Math.sqrt((L*L) + (RB * RB));
var S  = Math.sqrt((D + RA + R) * (D + RA - R) * (D - RA + R) * (-D + RA + R)) / 4;
 
x1 = ((X_A + X_B) / 2) + (((X_B - X_A) - ((RA * RA) - (R * R))) / (2 * (D * D))) + ((2 * ((Y_A - Y_B) / (D * D))) * S);
y1 = ((Y_A + Y_B) / 2) + (((Y_B - Y_A) - ((RA * RA) - (R * R))) / (2 * (D * D))) + ((2 * ((X_A - X_B) / (D * D))) * S);
 
 
 
var D  = Math.sqrt(((X_B - X_A) * (X_B - X_A)) + ((Y_B - Y_A) * (Y_B - Y_A)));
var L  = Math.sqrt((D * D) - ((RB - RA) * (RB - RA)));
var R  = Math.sqrt((L*L) + (RA * RA));
var S  = Math.sqrt((D + RB + R) * (D + RB - R) * (D - RB + R) * (-D + RB + R)) / 4;
 
x2 = ((X_B + X_A) / 2) + (((X_A - X_B) - ((RB * RB) - (R * R))) / (2 * (D * D))) + ((2 * ((Y_B - Y_A) / (D * D))) * S);
y2 = ((Y_B + Y_A) / 2) + (((Y_A - Y_B) - ((RB * RB) - (R * R))) / (2 * (D * D))) + ((2 * ((X_B - X_A) / (D * D))) * S);

Malheureusement je n'arrive à rien. Les deux points se retrouvent l'un au dessus de l'autre entre les deux cercles. Je désespère de trouver la solution !

Merci d'avance !

**01001111** · 21/06/2015, 03h18

Bonjour,
j'ai réécrit ton javascript:

voici une démo complète html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE HTML>
<html>
	<head>
	</head>
	<body style="margin:0;">
		<canvas id="circles" width="1000" height="1000"></canvas>
	</body>
	<script type="text/javascript">
                var Ca=[300,300,100];
                var Cb=[700,300,200];
                var c=document.getElementById("circles");
                var ctx=c.getContext("2d");
                ctx.beginPath();
                ctx.arc(Ca[0],Ca[1],Ca[2],0,Math.PI*2,true); // Cercle a
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(Cb[0],Cb[1],Cb[2],0,Math.PI*2,true); // Cercle b
                ctx.stroke();
                if (Math.pow(Math.sqrt(Math.pow(Cb[0]-Ca[0],2)+Math.pow(Cb[1]-Ca[1],2)),2)>Math.pow(Ca[2]-Cb[2],2)) {
                        var PlusMinus=[1,-1];
                        var D=Math.sqrt(Math.pow(Cb[0]-Ca[0],2)+Math.pow(Cb[1]-Ca[1],2));
                        for (j=0; j<PlusMinus.length; j++) {
                                var L=Math.sqrt(Math.pow(D,2)-Math.pow(Ca[2]+PlusMinus[j]*Cb[2],2));
                                var R1=Math.sqrt(Math.pow(L,2)+Math.pow(Cb[2],2));
                                var sigma1=.25*Math.sqrt((D+Ca[2]+R1)*(D+Ca[2]-R1)*(D-Ca[2]+R1)*(-D+Ca[2]+R1));
                                var R2=Math.sqrt(Math.pow(L,2)+Math.pow(Ca[2],2));
                                var sigma2=.25*Math.sqrt((D+Cb[2]+R2)*(D+Cb[2]-R2)*(D-Cb[2]+R2)*(-D+Cb[2]+R2));
                                console.log(D,L,R1,R2,sigma1,sigma2);
                                var x1,y1,x2,y2;
                                for (i=0; i<PlusMinus.length; i++) {
                                        x1=(Ca[0]+Cb[0])/2+((Cb[0]-Ca[0])*(Math.pow(Ca[2],2)-Math.pow(R1,2)))/(2*Math.pow(D,2))+PlusMinus[i]*2*((Ca[1]-Cb[1])/Math.pow(D,2))*sigma1;
                                        y1=(Ca[1]+Cb[1])/2+((Cb[1]-Ca[1])*(Math.pow(Ca[2],2)-Math.pow(R1,2)))/(2*Math.pow(D,2))+PlusMinus[i]*2*((Ca[0]-Cb[0])/Math.pow(D,2))*sigma1;
                                        x2=(Ca[0]+Cb[0])/2+((Ca[0]-Cb[0])*(Math.pow(Cb[2],2)-Math.pow(R2,2)))/(2*Math.pow(D,2))+PlusMinus[i]*PlusMinus[j]*2*((Cb[1]-Ca[1])/Math.pow(D,2))*sigma2;
                                        y2=(Ca[1]+Cb[1])/2+((Ca[1]-Cb[1])*(Math.pow(Cb[2],2)-Math.pow(R2,2)))/(2*Math.pow(D,2))+PlusMinus[i]*PlusMinus[j]*2*((Cb[0]-Ca[0])/Math.pow(D,2))*sigma2;
                                        ctx.beginPath();
                                        ctx.moveTo(x1,y1);
                                        ctx.lineTo(x2,y2);
                                        console.log(x1,y1,x2,y2);
                                        ctx.stroke();
                                }
                        }
                } else {
                        alert("les cercles sont inclus l'un dans l'autre");
                }
        </script>
</html>

tu n'avais pas pris en compte les itérations +- à faire, de plus dans celles-ci il y avait une erreur sur ta source, enfin de mon point de vue, pour les resultats de x2 et y2 il fallait écrire -+ au lieu de +- d'où le PlusMinus[i]*PlusMinus[j] que j'ai écrit et qui diffère de la page que tu as vue.

Javascript et trigonométrie

JavaScript

Discussions similaires

Partager

Partager