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 linecircle inversionExcircleIntersection 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 mapIntroduction to tropical geometryrecursive Bézierbézier surfaceparametric surfacesElementary Differential Geometrycircles on lines
Pascals theorem II
{
rearrange;
const context = DOM.context2d(width, width);
context.translate(width / 2, width / 2);
drawEllipse(a, b, context);
const points = [
pointOnEllipse(-Math.PI * (basicConfig ? 3 / 4 : randRange(3 / 4, 1))),
pointOnEllipse(Math.PI * (basicConfig ? 1 / 2 : randRange(1 / 4, 3 / 4))),
pointOnEllipse(-Math.PI * (basicConfig ? 1 / 4 : randRange(0, 1 / 4))),
pointOnEllipse(Math.PI * (basicConfig ? 3 / 4 : randRange(3 / 4, 1))),
pointOnEllipse(-Math.PI * (basicConfig ? 1 / 2 : randRange(1 / 4, 3 / 4))),
pointOnEllipse(Math.PI * (basicConfig ? 1 / 4 : randRange(0, 1 / 4)))
];
const lines = [];
for (let i = 0; i < points.length; ++i) {
circle([...points[i], 3], context);
context.fillText("P" + (i + 1), points[i][0] + 10, points[i][1] + 10);
const con = points[(i + 1) % points.length];
const l = line(points[i], con, context);
lines.push(l);
}
const intersections = [];
for (let i = 0; i < 3; ++i) {
const intersection = intersectionLL(lines[i], lines[i + 3]);
circle([...intersection, 3], context, { color: "red" });
intersections.push(intersection);
}
line(intersections[0], intersections[1], context, { color: "red" });
return context.canvas;
}
function randRange(min, max) {
return Math.random() * (max - min) + min;
}
function pointOnEllipse(angle) {
// angle is in radian
const sign = -Math.PI / 2 <= angle && angle <= Math.PI / 2 ? 1 : -1;
const x =
sign *
((a * b) / Math.sqrt(b * b + a * a * Math.tan(angle) * Math.tan(angle)));
const y = x * Math.tan(angle);
return [x, y];
}
function drawEllipse(a, b, context) {
const points = [];
for (let i = 0; i < 2 * Math.PI; i += 0.01) {
points.push([a * Math.cos(i), b * Math.sin(i)]);
}
context.beginPath();
context.moveTo(...points[0]);
for (let point of points.slice(1)) {
context.lineTo(...point);
}
context.stroke();
}
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.
