I’m trying to do a function to detect intersections between two circles. If yes it scores true, otherwise it scores false, but I think I got lost so it does not display what I want. If anyone can help me please . Thank you Surely I have incorrectly coded in javascript if there is a person who knows the answer I am all ears
JavaScript
x
83
83
1
function AreCirclesIntersecting(c0,c1) {
2
3
x0 = c0['center']['x'];
4
y0 = c0['center']['y'];
5
r0 = c0['center']['r'];
6
x1 = c1['center']['x'];
7
y1 = c1['center']['y'];
8
r1 = c1['center']['r'];
9
10
11
var a, dx, dy, d, h, rx, ry;
12
var x2, y2;
13
14
/* dx and dy are the vertical and horizontal distances between
15
* the circle centers.
16
*/
17
dx = x1 - x0;
18
dy = y1 - y0;
19
20
/* Determine the straight-line distance between the centers. */
21
d = Math.sqrt((dy*dy) + (dx*dx));
22
23
/* Check for solvability. */
24
if (d > (r0 + r1)) {
25
/* no solution. circles do not intersect. */
26
return false;
27
}
28
if (d < Math.abs(r0 - r1)) {
29
/* no solution. one circle is contained in the other */
30
return false;
31
}
32
33
/* 'point 2' is the point where the line through the circle
34
* intersection points crosses the line between the circle
35
* centers.
36
*/
37
38
/* Determine the distance from point 0 to point 2. */
39
a = ((r0*r0) - (r1*r1) + (d*d)) / (2.0 * d) ;
40
41
/* Determine the coordinates of point 2. */
42
x2 = x0 + (dx * a/d);
43
y2 = y0 + (dy * a/d);
44
45
/* Determine the distance from point 2 to either of the
46
* intersection points.
47
*/
48
h = Math.sqrt((r0*r0) - (a*a));
49
50
/* Now determine the offsets of the intersection points from
51
* point 2.
52
*/
53
rx = -dy * (h/d);
54
ry = dx * (h/d);
55
56
/* Determine the absolute intersection points. */
57
var xi = x2 + rx;
58
var xi_prime = x2 - rx;
59
var yi = y2 + ry;
60
var yi_prime = y2 - ry;
61
62
return [xi, xi_prime, yi, yi_prime];
63
64
}
65
66
const circles = [
67
{center: {x: 10.0, y: 10.0}, radius: 5.0},
68
{center: {x: 20.0, y: 20.0}, radius: 15.0},
69
{center: {x: 20.0, y: 10.0}, radius: 5.0},
70
{center: {x: 20.0, y: 25.0}, radius: 7.5},
71
];
72
73
const q7_result1 = AreCirclesIntersecting(circles[0], circles[1]);
74
console.log(q7_result1); // Expected output: true
75
76
const q7_result2 = AreCirclesIntersecting(circles[0], circles[2]);
77
console.log(q7_result2); // Expected output: true
78
79
const q7_result3 = AreCirclesIntersecting(circles[1], circles[3]);
80
console.log(q7_result3); // Expected output: false
81
82
const q7_result4 = AreCirclesIntersecting(circles[2], circles[3]);
83
console.log(q7_result4); // Expected output: false
Advertisement
Answer
Javascript natively offers a hypothenus function,
useful here to calculate the distance between 2 points on a 2 D system
JavaScript
1
45
45
1
const circles =
2
[ { center: { x: 10.0, y: 10.0 } , radius: 5.0 }
3
, { center: { x: 20.0, y: 20.0 } , radius: 15.0 }
4
, { center: { x: 20.0, y: 10.0 } , radius: 5.0 }
5
, { center: { x: 20.0, y: 25.0 } , radius: 7.5 }
6
]
7
8
function AreCirclesIntersecting(c0,c1)
9
{
10
let delta_x = Math.abs(c0.center.x - c1.center.x)
11
, delta_y = Math.abs(c0.center.y - c1.center.y)
12
, dist = Math.hypot(delta_x, delta_y)
13
, out = (dist > (c0.radius + c1.radius) )
14
, c0_in_c1 = !out && ( c1.radius > (c0.radius + dist ))
15
, c1_in_c0 = !out && ( c0.radius > (c1.radius + dist ))
16
;
17
return !(out || c0_in_c1 || c1_in_c0)
18
}
19
20
function testing (name, expected, indx_a, indx_b )
21
{
22
let test = AreCirclesIntersecting(circles[indx_a], circles[indx_b])
23
, divTest = document.createElement('div')
24
, c0 = circles[indx_a]
25
, c1 = circles[indx_b]
26
;
27
divTest.className = 'test'
28
divTest.innerHTML = `
29
<p>
30
<strong>${name}</strong> <br>
31
${JSON.stringify(circles[indx_a]) } green <br>
32
${JSON.stringify(circles[indx_b]) } red <br><br>
33
expected: ${expected}<br>result:<strong>${test}</strong><br>sucess: ${(expected===test)? '✅':'❌'}
34
</p>
35
<svg viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg" width="200" heigth="160">
36
<circle cx="${c0.center.x}" cy="${c0.center.y}" r="${c0.radius}" fill="none" stroke="green"/>
37
<circle cx="${c1.center.x}" cy="${c1.center.y}" r="${c1.radius}" fill="none" stroke="red"/>
38
</svg>`
39
document.body.appendChild(divTest)
40
}
41
42
testing('q7_result1',true, 0,1)
43
testing('q7_result2',true, 0,2)
44
testing('q7_result3',false,1,3)
45
testing('q7_result4',false,2,3)
JavaScript
1
12
12
1
body {
2
font-family: Arial, Helvetica, sans-serif;
3
font-size: 14px;
4
}
5
div.test {
6
display : inline-block;
7
margin : .5em;
8
border : 1px solid grey;
9
padding : 1em;
10
width : 400px;
11
}
12
div.test p { margin: .3em; }