Archimedean CirclesNapoleon's theoremThébault's problem IThébault's problem IIJapanese theoremSpiral Similarity Leads to Equilateral TriangleAn Unexpected RhombusAbutting Equilateral Triangles on a LineFractal inspired by Apollonian NetworkSteiner ChainEuler LinegeometryPolygonsSymmediansnine-point circlesimson lineExcircleIntersection of linesMorley triangleButterfly theoremSeven circlesgeometric rational numbersPoincaré hyperbolic diskEquilateral Triangles formed by CircumcentersFermat pointPascal's theoremgeometric inverse of a real numberConcyclic points in incriptible QuadrilateralConcurrence in Equilateral TrianglePolygon triangulationPlatonic solidsrectangular hyperbolastable polygonFarey mapPascals theorem IIIntroduction to tropical geometryrecursive Bézierbézier surfaceparametric surfacesElementary Differential Geometrycircles on lines
circle inversion
{
const [
[numCircle, rad, degOff],
[r, dist],
[showInner, showInverted, showLine, clip]
] = values;
const context = DOM.context2d(width, width);
context.translate(width / 2, width / 2);
context.arc(0, 0, r, 0, Math.PI * 2);
if (clip) {
context.clip();
}
// center point
circle(o, context);
circle([o[0], o[1], r], context, { fill: false });
context.fillText("O", o[0] + 5, o[1] - 5);
const innerCircles = [];
for (let i = 0; i < numCircle; ++i) {
const deg = i * degOff;
const cp = coordsFromDeg(deg, dist, o);
const c = [...cp, rad, deg];
if (showInner) {
circle(c, context, { fill: false, color: "red" });
}
innerCircles.push(c);
}
innerCircles.forEach((c, i) => {
const circleP_ = invertCircle(c, r, context, showLine);
if (showInverted) {
circle(circleP_, context, { fill: false, color: "blue" });
}
});
yield context.canvas;
}
function invertCircle(c, r, context, showLine) {
const deg = c[3];
// distance to center
const d = dist2D(o, c);
// two points on "inner Circle"
const p_11 = coordsFromDeg(deg, d - c[2], o);
const p_12 = coordsFromDeg(deg, d + c[2], o);
if (showLine) {
line(p_11, o, context, { dash: [5, 5], color: "gray" });
}
// invertet points
const p_1 = coordsFromDeg(deg, (r * r) / dist2D(p_11, o), o);
const p_2 = coordsFromDeg(deg, (r * r) / dist2D(p_12, o), o);
const radCircleP_ = dist2D(p_1, p_2) / 2;
const center = middleBetween(p_1, p_2);
return [...center, radCircleP_];
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
