Circle Center and Radius Calculator
:root {
–primary-blue: #004a99;
–success-green: #28a745;
–light-background: #f8f9fa;
–card-background: #ffffff;
–border-color: #dee2e6;
–text-color: #343a40;
–muted-text-color: #6c757d;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–light-background);
color: var(–text-color);
margin: 0;
padding: 20px;
line-height: 1.6;
}
.calculator-container {
max-width: 900px;
margin: 30px auto;
background-color: var(–card-background);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid var(–border-color);
}
.calculator-section {
padding: 30px;
box-sizing: border-box;
}
.input-section {
flex: 1;
min-width: 300px;
border-right: 1px solid var(–border-color);
}
.result-section {
flex: 1;
min-width: 300px;
background-color: var(–primary-blue);
color: white;
text-align: center;
}
h1, h2, h3 {
color: var(–primary-blue);
margin-bottom: 20px;
font-weight: 600;
}
h1 {
text-align: center;
font-size: 2.5em;
margin-bottom: 30px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(–text-color);
}
.input-group input[type="number"] {
width: calc(100% – 22px); /* Adjust for padding and border */
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
font-size: 1em;
box-sizing: border-box;
}
.input-group input[type="number"]:focus {
outline: none;
border-color: var(–primary-blue);
box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.2);
}
.button-group {
text-align: center;
margin-top: 30px;
}
button {
background-color: var(–primary-blue);
color: white;
padding: 12px 25px;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #003c7a;
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
#result {
margin-top: 20px;
padding: 20px;
background-color: var(–success-green);
color: white;
border-radius: 4px;
font-size: 1.4em;
font-weight: bold;
min-height: 80px; /* Ensure consistent height */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#result span {
font-size: 0.9em;
font-weight: normal;
color: rgba(255, 255, 255, 0.9);
}
.result-section h2 {
color: white;
margin-bottom: 15px;
}
.result-section .result-value {
font-size: 2.2em;
font-weight: bold;
margin-bottom: 10px;
}
.result-section .result-label {
font-size: 1.1em;
color: rgba(255, 255, 255, 0.9);
}
.article-section {
margin-top: 40px;
background-color: var(–card-background);
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 1px solid var(–border-color);
}
.article-section h2 {
text-align: center;
color: var(–primary-blue);
margin-bottom: 25px;
}
.article-section h3 {
color: var(–primary-blue);
margin-top: 25px;
margin-bottom: 10px;
}
.article-section p {
margin-bottom: 15px;
color: var(–muted-text-color);
}
.formula {
background-color: var(–light-background);
padding: 15px;
border-radius: 4px;
margin-bottom: 15px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95em;
overflow-x: auto;
border: 1px dashed var(–border-color);
color: var(–primary-blue);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.calculator-container {
flex-direction: column;
}
.input-section {
border-right: none;
border-bottom: 1px solid var(–border-color);
}
.result-section {
border-left: none;
}
h1 {
font-size: 2em;
}
button {
font-size: 1em;
}
}
Circle Properties
—
Center (h, k) | Radius (r)
Understanding the Circle Center and Radius Calculator
This calculator helps determine the center coordinates (h, k) and the radius (r) of a circle given three non-collinear points lying on its circumference. This is a fundamental problem in geometry and has applications in various fields, including computer graphics, engineering, and data analysis.
The Mathematical Foundation
A circle is defined as the set of all points equidistant from a fixed point (the center). The standard equation of a circle is:
(x – h)² + (y – k)² = r²
Where:
- (x, y) are coordinates of any point on the circle
- (h, k) are the coordinates of the center
- r is the radius of the circle
Given three points (x₁, y₁), (x₂, y₂), and (x₃, y₃) on the circle, we can substitute these points into the standard equation to form a system of three equations with three unknowns (h, k, and r²). However, solving this directly can be complex. A more straightforward approach uses the property that the perpendicular bisectors of any two chords of a circle intersect at the center of the circle.
Steps to Find the Center (h, k):
- Form Chords: Connect two pairs of points to form chords. For example, chord AB (between points A and B) and chord BC (between points B and C).
- Find Midpoints: Calculate the midpoints of these chords.
Midpoint AB (M₁): ( (x₁ + x₂)/2, (y₁ + y₂)/2 )
Midpoint BC (M₂): ( (x₂ + x₃)/2, (y₂ + y₃)/2 )
- Calculate Slopes of Chords: Find the slopes of the chords.
Slope AB (m₁): (y₂ – y₁) / (x₂ – x₁)
Slope BC (m₂): (y₃ – y₂) / (x₃ – x₂)
*Handle vertical and horizontal chords (infinite or zero slope) as special cases.
- Find Slopes of Perpendicular Bisectors: The slope of a perpendicular bisector is the negative reciprocal of the chord's slope.
Perpendicular Slope AB (m₁'): -1 / m₁
Perpendicular Slope BC (m₂'): -1 / m₂
*If a chord is horizontal (m=0), its bisector is vertical (undefined slope). If a chord is vertical (m=undefined), its bisector is horizontal (slope=0).
- Form Equations of Perpendicular Bisectors: Use the point-slope form (y – y₀ = m(x – x₀)) with the midpoint and perpendicular slope.
Bisector AB: y – M₁y = m₁'(x – M₁x)
Bisector BC: y – M₂y = m₂'(x – M₂x)
- Solve the System of Equations: The intersection point of these two lines is the center (h, k). This involves solving the two linear equations for x (which is h) and y (which is k).
Calculating the Radius (r):
Once the center (h, k) is found, the radius can be calculated as the distance between the center and any of the three given points (xᵢ, yᵢ). The distance formula is:
r = √((xᵢ – h)² + (yᵢ – k)²)
Using the first point (x₁, y₁):
r = √((x₁ – h)² + (y₁ – k)²)
Edge Cases and Considerations:
- Collinear Points: If the three points lie on a straight line, they cannot define a unique circle. The calculator should handle this scenario (e.g., by checking if the slopes of AB and BC are equal).
- Division by Zero: Careful handling of horizontal and vertical lines is necessary to avoid division by zero when calculating slopes and perpendicular slopes.
- Floating-Point Precision: Calculations involving square roots and divisions might introduce minor floating-point errors.
Use Cases:
- Geometry Problems: Solving textbook exercises and geometric proofs.
- Computer Graphics: Defining and manipulating circular shapes, collision detection.
- Engineering & Design: Calculating clearances, fitting components, analyzing circular paths.
- Data Analysis: Identifying circular patterns or clusters in datasets.
- Navigation Systems: Determining location based on signals from multiple sources (though typically using triangulation principles).
function calculateCircle() {
var ax = parseFloat(document.getElementById("pointAx").value);
var ay = parseFloat(document.getElementById("pointAy").value);
var bx = parseFloat(document.getElementById("pointBx").value);
var by = parseFloat(document.getElementById("pointBy").value);
var cx = parseFloat(document.getElementById("pointCx").value);
var cy = parseFloat(document.getElementById("pointCy").value);
var errorMessageDiv = document.getElementById("errorMessage");
errorMessageDiv.textContent = ""; // Clear previous errors
// Input validation
if (isNaN(ax) || isNaN(ay) || isNaN(bx) || isNaN(by) || isNaN(cx) || isNaN(cy)) {
errorMessageDiv.textContent = "Please enter valid numbers for all coordinates.";
return;
}
// Check for collinearity using slopes
var slopeAB = (bx – ax) === 0 ? Infinity : (by – ay) / (bx – ax);
var slopeBC = (cx – bx) === 0 ? Infinity : (cy – by) / (cx – bx);
// Handle vertical lines for slope comparison
var areSlopesEqual = false;
if (slopeAB === Infinity && slopeBC === Infinity) {
areSlopesEqual = true;
} else if (slopeAB !== Infinity && slopeBC !== Infinity) {
areSlopesEqual = Math.abs(slopeAB – slopeBC) < 1e-9; // Use tolerance for float comparison
}
if (areSlopesEqual) {
// Check if points are identical
if (ax === bx && ay === by || bx === cx && by === cy || ax === cx && ay === cy) {
errorMessageDiv.textContent = "At least two points are identical. Please provide three distinct points.";
return;
}
errorMessageDiv.textContent = "The points are collinear and do not define a unique circle.";
return;
}
// Using determinant method for finding center and radius (more robust for edge cases)
// General equation of a circle: x^2 + y^2 + Dx + Ey + F = 0
// The center is (-D/2, -E/2) and radius is sqrt((D/2)^2 + (E/2)^2 – F)
var A = bx – ax;
var B = by – ay;
var C = cx – ax;
var D = cy – ay;
var E = A * (ax + bx) + B * (ay + by);
var F = C * (ax + cx) + D * (ay + cy);
var G = 2 * (A * (cy – by) – B * (cx – bx));
// Check if G is close to zero (points are collinear or nearly collinear)
if (Math.abs(G) < 1e-9) {
errorMessageDiv.textContent = "Points are nearly collinear; cannot form a precise circle.";
return;
}
var centerX = (D * E – B * F) / G;
var centerY = (A * F – C * E) / G;
// Calculate radius using distance from center to point A
var radius = Math.sqrt(Math.pow(ax – centerX, 2) + Math.pow(ay – centerY, 2));
document.querySelector("#result .result-value").innerHTML = `(
${centerX.toFixed(4)}, ${centerY.toFixed(4)}) |
${radius.toFixed(4)}`;
document.querySelector("#result .result-label").innerHTML = `Center (h, k) | Radius (r)`;
}
function clearInputs() {
document.getElementById("pointAx").value = "";
document.getElementById("pointAy").value = "";
document.getElementById("pointBx").value = "";
document.getElementById("pointBy").value = "";
document.getElementById("pointCx").value = "";
document.getElementById("pointCy").value = "";
document.getElementById("errorMessage").textContent = "";
document.querySelector("#result .result-value").innerHTML = "–";
document.querySelector("#result .result-label").innerHTML = `Center (h, k) | Radius (r)`;
}