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