Published
Edited
Oct 9, 2019
16 stars
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 hyperbolaFarey mapPascals theorem IIIntroduction to tropical geometryrecursive Bézierbézier surfaceparametric surfacesElementary Differential Geometrycircles on lines
stable polygon
Also listed in…
fun
{
const context = DOM.context2d(width, width);
context.translate(width / 2, width / 2);
const [[numCircles, maxIteration, delay]] = values;
let t = 0;
let iterations = 0;
yield context.canvas;
while (true) {
await Promises.delay(delay);
t += 1;
if (t % 40 === 0) iterations = (iterations + 1) % maxIteration;
context.clearRect(-width / 2, -width / 2, width, width);
const circles = drawCircles(numCircles, context);
const points = drawPointsOnCircles(circles, t, context);
drawPolygon(points, iterations, context);
}
}
function drawCircles(n, context) {
const [[numCircles]] = values;
const [[localRadius, globalRadius]] = radi;
const circles = [];
for (let i = 0; i < n; ++i) {
const coords = coordsFromDeg((360 / numCircles) * i, globalRadius);
const c = [...coords, localRadius];
circle(c, context, { fill: false, dash: [5, 10] });
circles.push([i, c]);
}
return circles;
}
function drawPointsOnCircles(circles, t, context) {
const points = [];
for (let [i, c] of circles) {
const p = pointOnCircle(c, pointDeg(i, t));
circle([...p, 3], context);
points.push([i, p]);
}
return points;
}
function pointDeg(i, t) {
return (-1) ** i * Math.sin(i) * (180 / Math.PI) + ((5 * t) % 360);
}
function drawPolygon(points, iterations, context) {
if (iterations === 0) return;
const color = stepColor(iterations);
const lines = [];
for (let [i, p] of points) {
const [_, q] = points[(i + 1) % points.length];
const l = line(p, q, context, {
lineWidth: 1,
color,
lineWidth: 1.5,
dash: [1, 0]
});
lines.push([i, l]);
}
let nextPoints = [];
for (let [i, l] of lines) {
const p = pointOnLine(l, 0.5);
circle([...p, 1], context);
nextPoints.push([i, p]);
}
return drawPolygon(nextPoints, iterations - 1, context);
}
function stepColor(iterations) {
const [[_, maxIteration]] = values;
return `rgba(0, 0, 0,
${1 - iterations / maxIteration})`;
}
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.
