31:T432,{ let theTriangle, theIncircle, theTangentPoints; let init = (theSvg, points) => { theTriangle = theSvg .append("polygon") .attr("stroke", "gray") .attr("fill", "none"); theIncircle = theSvg .append("circle") .attr("fill", "pink") .attr("stroke", "red"); theTangentPoints = theSvg .selectAll("circle.tpoint") .data([[], [], []]) .join("circle") .attr("class", "tpoint") .attr("fill", "gray") .attr("stroke", "black"); update(theSvg, points); }; let update = (theSvg, [A, B, C]) => { theTriangle.attr("points", `${A} ${B} ${C}`); const [center, radius] = inscribedCircle(A, B, C); theIncircle.attr("cx", center[0]).attr("cy", center[1]).attr("r", radius); const tpoints = [ lineProj(center, A, B), lineProj(center, B, C), lineProj(center, C, A) ]; theTangentPoints .data(tpoints) .join("circle") .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .attr("r", 4); }; return dragPoints({ init, update }); }32:T605,{ let theTriangle, theIncircle, theCircles, theTangentPoints; let circles = [[], [], []]; let init = (theSvg, points) => { theTriangle = theSvg .append("polygon") .attr("stroke", "gray") .attr("fill", "none"); theIncircle = theSvg .append("circle") .attr("fill", "pink") .attr("stroke", "red"); theTangentPoints = theSvg .selectAll("circle.tpoint") .data([[], [], []]) .join("circle") .attr("class", "tpoint") .attr("fill", "gray") .attr("stroke", "black"); theCircles = theSvg .selectAll("circle.main") .data(circles) .join("circle") .attr("class", "main") .attr("stroke", "blue") .attr("fill", "#77f1"); update(theSvg, points); }; let update = (theSvg, [A, B, C]) => { theTriangle.attr("points", `${A} ${B} ${C}`); const [center, radius] = inscribedCircle(A, B, C); theIncircle.attr("cx", center[0]).attr("cy", center[1]).attr("r", radius); const tpoints = [ lineProj(center, A, B), lineProj(center, B, C), lineProj(center, C, A) ]; theTangentPoints .data(tpoints) .join("circle") .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .attr("r", 4); circles = threeTangentCircles(A, B, C); theCircles .data(circles) .join("circle") .attr("cx", ([center, _]) => center[0]) .attr("cy", ([center, _]) => center[1]) .attr("r", ([_, radius]) => radius); }; return dragPoints({ init, update }); }33:T6e9,{ let theTriangle, theAuxPoints, theLines, theCircles; let circles = [[], [], []]; let auxpoints = [[], []]; let lines = [[]]; let init = (theSvg, points) => { theTriangle = theSvg .append("polygon") .attr("stroke", "gray") .attr("fill", "none"); theCircles = theSvg .selectAll("circle.main") .data(circles) .join("circle") .attr("class", "main") .attr("stroke", "blue") .attr("fill", "#77f1"); theLines = theSvg .selectAll("line.aux") .data(lines) .join("line") .attr("class", "aux") .attr("stroke", "green") .attr("stroke-dasharray", "5"); theAuxPoints = theSvg .selectAll("circle.aux") .data(auxpoints) .join("circle") .attr("class", "aux") .attr("stroke", "black") .attr("fill", "green") .attr("r", 4); update(theSvg, points); }; let update = (theSvg, [A, B, C]) => { theTriangle.attr("points", `${A} ${B} ${C}`); circles = threeTangentCircles(A, B, C); theCircles .data(circles) .join("circle") .attr("cx", ([center, _]) => center[0]) .attr("cy", ([center, _]) => center[1]) .attr("r", ([_, radius]) => radius); auxpoints = auxPoints(A, B, ...circles[2]); theAuxPoints .data(auxpoints) .join("circle") .attr("cx", ([x, y]) => x) .attr("cy", ([x, y]) => y); lines = [[lineProj(C, A, B), auxpoints[1]]].map((endpoints) => extendLineSegment(...endpoints, 20) ); theLines .data(lines) .join("line") .attr("x1", ([[x, y], _]) => x) .attr("y1", ([[x, y], _]) => y) .attr("x2", ([_, [x, y]]) => x) .attr("y2", ([_, [x, y]]) => y); }; return dragPoints({ init, update }); }34:Tab1,{ let theTriangle, theAuxPoints, theTangentPoint, theSoddyPoints, theLines, theCircles; let circles = [[], [], []]; let auxpoints = [[], []]; let tanpoints = [[], []]; let lines = [[], []]; let init = (theSvg, points) => { theTriangle = theSvg .append("polygon") .attr("stroke", "gray") .attr("fill", "none"); theCircles = theSvg .selectAll("circle.main") .data(circles) .join("circle") .attr("class", "main") .attr("stroke", "blue") .attr("fill", "#77f1"); theLines = theSvg .selectAll("line.tan") .data(lines) .join("line") .attr("class", "tan") .attr("stroke", "brown") .attr("stroke-dasharray", "5 2"); theAuxPoints = theSvg .selectAll("circle.aux") .data(auxpoints) .join("circle") .attr("class", "aux") .attr("stroke", "black") .attr("fill", "green") .attr("r", 4); theSoddyPoints = theSvg .selectAll("circle.soddy") .data(auxpoints) .join("circle") .attr("class", "soddy") .attr("stroke", "black") .attr("fill", "orange") .attr("r", 4); theTangentPoint = theSvg .append("circle") .attr("class", "tangent") .attr("stroke", "none") .attr("fill", "black") .attr("r", 4); update(theSvg, points); }; let update = (theSvg, [A, B, C]) => { theTriangle.attr("points", `${A} ${B} ${C}`); circles = threeTangentCircles(A, B, C); theCircles .data(circles) .join("circle") .attr("cx", ([center, _]) => center[0]) .attr("cy", ([center, _]) => center[1]) .attr("r", ([_, radius]) => radius); auxpoints = auxPoints(A, B, ...circles[2]); theAuxPoints .data(auxpoints) .join("circle") .attr("cx", ([x, y]) => x) .attr("cy", ([x, y]) => y); const [[_, rA], [__, rB], [___, rC]] = circles; const tanPoint = vec2.lerp([], A, B, rA / (rA + rB)); const soddyPoints = [ circleLineIntersection(tanPoint, auxpoints[0], C, rC)[1], circleLineIntersection(tanPoint, auxpoints[1], C, rC)[0] ]; theSoddyPoints .data(soddyPoints) .join("circle") .attr("cx", ([x, y]) => x) .attr("cy", ([x, y]) => y); lines = [ [tanPoint, soddyPoints[0]], [tanPoint, auxpoints[1]] ].map((endpoints) => extendLineSegment(...endpoints, 20)); theLines .data(lines) .join("line") .attr("x1", ([[x, y], _]) => x) .attr("y1", ([[x, y], _]) => y) .attr("x2", ([_, [x, y]]) => x) .attr("y2", ([_, [x, y]]) => y); theTangentPoint.attr("cx", tanPoint[0]).attr("cy", tanPoint[1]); }; return dragPoints({ init, update }); }35:T710,{ let theTriangle, theSoddyPoints, theCircles, theSoddyCircles; let circles = [[], [], []]; let soddyPoints = [[], [], [], [], [], []]; let soddycircles = [[], []]; let init = (theSvg, points) => { theTriangle = theSvg .append("polygon") .attr("stroke", "gray") .attr("fill", "none"); theCircles = theSvg .selectAll("circle.main") .data(circles) .join("circle") .attr("class", "main") .attr("stroke", "blue") .attr("fill", "#77f1"); theSoddyPoints = theSvg .selectAll("circle.tangent") .data(soddyPoints) .join("circle") .attr("class", "tangent") .attr("stroke", "black") .attr("fill", "orange") .attr("r", 4); theSoddyCircles = theSvg .selectAll("circle.soddy") .data(soddyPoints) .join("circle") .attr("class", "soddy") .attr("stroke", "orange") .attr("fill", "none"); update(theSvg, points); }; let update = (theSvg, [A, B, C]) => { theTriangle.attr("points", `${A} ${B} ${C}`); circles = threeTangentCircles(A, B, C); theCircles .data(circles) .join("circle") .attr("cx", ([center, _]) => center[0]) .attr("cy", ([center, _]) => center[1]) .attr("r", ([_, radius]) => radius); const [innerCircle, outerCircle, innerPoints, outerPoints] = soddyCircles( ...circles ); theSoddyCircles .data([innerCircle, outerCircle]) .join("circle") .attr("cx", ([center, _]) => center[0]) .attr("cy", ([center, _]) => center[1]) .attr("r", ([_, radius]) => radius); theSoddyPoints .data(innerPoints.concat(outerPoints)) .join("circle") .attr("cx", ([x, y]) => x) .attr("cy", ([x, y]) => y); }; return dragPoints({ init, update }); }36:T400,{ const width = defaultOptions.width; const height = width / defaultOptions.aspect; const canvas = htl.html`