How to draw/Form circle with two points?

Question

I need to draw a circle and i have only two points.Now i need to find center point and radius of the circle? You can form the circle in clock wise direction.

Thanks in advance

Answer 1

Here is a Brute Force approach to the problem.

EDIT

Added a max iterations limit to cut off calculations if the line between the two points is almost straight along x (meaning a radius would be nearing Infinity )

Also animations, because that makes everything better :)

 var canvas = document.body.appendChild(document.createElement("canvas")); var ctx = canvas.getContext("2d"); canvas.width = 1000; canvas.height = 1000; var points = [ { x: parseInt(prompt("x1", "110")), y: parseInt(prompt("y1", "120")), r: 5 }, { x: parseInt(prompt("x2", "110")), y: parseInt(prompt("y2", "60")), r: 5 }, ]; function calculateRemainingPoint(points, x, precision, maxIteration) { if (x === void 0) { x = 0; } if (precision === void 0) { precision = 0.001; } if (maxIteration === void 0) { maxIteration = 100000; } var newPoint = { x: x, y: (points[0].y + points[1].y) / 2, r: 50 }; var d0 = distance(points[0].x, points[0].y, x, newPoint.y); var d1 = distance(points[1].x, points[1].y, x, newPoint.y); var iteration = 0; //Bruteforce approach while (Math.abs(d0 - d1) > precision && iteration < maxIteration) { var oldDiff = Math.abs(d0 - d1); var oldY = newPoint.y; iteration++; newPoint.y += oldDiff / 10; d0 = distance(points[0].x, points[0].y, x, newPoint.y); d1 = distance(points[1].x, points[1].y, x, newPoint.y); var diff_1 = Math.abs(d0 - d1); if (diff_1 > oldDiff) { newPoint.y = oldY - oldDiff / 10; d0 = distance(points[0].x, points[0].y, x, newPoint.y); d1 = distance(points[1].x, points[1].y, x, newPoint.y); } } var diff = (points[0].x + points[1].x) / points[0].x; newPoint.r = d0; return newPoint; } points.push(calculateRemainingPoint(points)); function distance(x1, y1, x2, y2) { var a = x1 - x2; var b = y1 - y2; return Math.sqrt(a * a + b * b); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(-canvas.width, canvas.height / 2); ctx.lineTo(canvas.width, canvas.height / 2); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.moveTo(canvas.width / 2, -canvas.height); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); ctx.closePath(); for (var pointIndex = 0; pointIndex < points.length; pointIndex++) { var point = points[pointIndex]; ctx.beginPath(); ctx.arc(point.x + canvas.width / 2, canvas.height / 2 - point.y, point.r, 0, Math.PI * 2); ctx.arc(point.x + canvas.width / 2, canvas.height / 2 - point.y, 2, 0, Math.PI * 2); ctx.stroke(); ctx.closePath(); } } setInterval(function () { points = points.slice(0, 2); points[Math.floor(Math.random() * points.length) % points.length][Math.random() > 0.5 ? 'x' : 'y'] = Math.random() * canvas.width - canvas.width / 2; setTimeout(function () { points.push(calculateRemainingPoint(points)); requestAnimationFrame(draw); }, 1000 / 60); }, 1000); draw(); 

Answer 2

No that is impossible.

Create two circles with the same radius at centerpoints A + B. At the intersection of these two circles create an circle with the same radius....

Then make the same with an other radius....