31:T473,md`# Ellipse and elliptical arc conversion Drawing ellipses in SVG is pretty easy with the [\`\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse) element. But things might get complicated when you want to draw only a part of an ellipse, let's say between a start angle ${tex`\theta_1`} and an end angle ${tex`\theta_2`}. You'll have to use a \`\` element with an *arc* instead. While the \`\` element is an SVG basic shape, based on a center coordinate, and both their x and y radius, [*arcs* in SVG paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs) are defined in terms of start and end points on an elliptical curve. This so-called *endpoint parameterization* has the advantage to be consistent with other path segment notations and permits a path syntax in which all path commands end in the coordinates of the new "current point". The question is now: How to convert between these two formats? After searching the web for a while I found the needed conversion formulas in the SVG-specification: https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes ---`32:T6b5,{ const svg = d3.select(DOM.svg(width, height)); const plot = svg.append("g") .attr("transform", `translate(${width / 2} ${height / 2}) scale(1 -1)`); plot.append("ellipse") .attr("transform", `rotate(${deg(ellipse.phi)} ${ellipse.cx} ${ellipse.cy})`) .attr("cx", ellipse.cx) .attr("cy", ellipse.cy) .attr("rx", ellipse.rx) .attr("ry", ellipse.ry) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-dasharray", "4 4"); if (pie.delta) { const { x1, y1, x2, y2, fa, fs } = getEndpointParameters( ellipse.cx, ellipse.cy, ellipse.rx, ellipse.ry, ellipse.phi, pie.start, pie.delta ); const { cx, cy, theta, dTheta } = getCenterParameters( x1, y1, x2, y2, fa, fs, ellipse.rx, ellipse.ry, ellipse.phi ); const p1 = getEllipsePointForAngle(cx, cy, ellipse.rx, ellipse.ry, ellipse.phi, theta); const p2 = getEllipsePointForAngle(cx, cy, ellipse.rx, ellipse.ry, ellipse.phi, theta + dTheta); plot.append("path") .attr("d", `M ${cx} ${cy} L ${x1} ${y1} A ${ellipse.rx} ${ellipse.ry} ${deg(ellipse.phi)} ${fa} ${fs} ${x2} ${y2} Z`) .attr("fill", "none") .attr("stroke", "black"); plot.append("circle") .attr("cx", p1[0]) .attr("cy", p1[1]) .attr("r", 3) .attr("fill", "red"); plot.append("circle") .attr("cx", p2[0]) .attr("cy", p2[1]) .attr("r", 3) .attr("fill", "green"); plot.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 3) .attr("fill", "black"); } return svg.node() }33:T59a,function getCenterParameters(x1, y1, x2, y2, fa, fs, rx, ry, phi) { const { abs, sin, cos, sqrt } = Math; const pow = n => Math.pow(n, 2); const sinphi = sin(phi), cosphi = cos(phi); // Step 1: simplify through translation/rotation const x = cosphi * (x1 - x2) / 2 + sinphi * (y1 - y2) / 2, y = -sinphi * (x1 - x2) / 2 + cosphi * (y1 - y2) / 2; const px = pow(x), py = pow(y), prx = pow(rx), pry = pow(ry); // correct of out-of-range radii const L = px / prx + py / pry; if (L > 1) { rx = sqrt(L) * abs(rx); ry = sqrt(L) * abs(ry); } else { rx = abs(rx); ry = abs(ry); } // Step 2 + 3: compute center const sign = fa === fs ? -1 : 1; const M = sqrt((prx * pry - prx * py - pry * px) / (prx * py + pry * px)) * sign; const _cx = M * (rx * y) / ry, _cy = M * (-ry * x) / rx; const cx = cosphi * _cx - sinphi * _cy + (x1 + x2) / 2, cy = sinphi * _cx + cosphi * _cy + (y1 + y2) / 2; // Step 4: compute θ and dθ const theta = vectorAngle( [1, 0], [(x - _cx) / rx, (y - _cy) / ry] ); let _dTheta = deg(vectorAngle( [(x - _cx) / rx, (y - _cy) / ry], [(-x - _cx) / rx, (-y - _cy) / ry] )) % 360; if (fs === 0 && _dTheta > 0) _dTheta -= 360; if (fs === 1 && _dTheta < 0) _dTheta += 360; return { cx, cy, theta, dTheta: rad(_dTheta) }; }34:[] 2f:{"title":"Ellipse and elliptical arc conversion","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"viewof pie = {\n const form = html`\n `\n\n form.oninput = () => form.value = {\n start: rad(form.theta1.valueAsNumber),\n delta: rad(form.theta2.valueAsNumber) - rad(form.theta1.valueAsNumber)\n };\n form.oninput();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"viewof ellipse = {\n const form = html`\n `\n\n form.oninput = () => form.value = {\n cx: form.cx.valueAsNumber,\n cy: form.cy.valueAsNumber,\n rx: form.rx.valueAsNumber,\n ry: form.ry.valueAsNumber,\n phi: rad(form.phi.valueAsNumber)\n };\n form.oninput();\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"function getEndpointParameters(cx, cy, rx, ry, phi, theta, dTheta) {\n \n const [x1, y1] = getEllipsePointForAngle(cx, cy, rx, ry, phi, theta);\n const [x2, y2] = getEllipsePointForAngle(cx, cy, rx, ry, phi, theta + dTheta);\n \n const fa = Math.abs(dTheta) > Math.PI ? 1 : 0;\n const fs = dTheta > 0 ? 1 : 0;\n \n return { x1, y1, x2, y2, fa, fs }\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"function getEllipsePointForAngle(cx, cy, rx, ry, phi, theta) {\n const { abs, sin, cos } = Math;\n \n const M = abs(rx) * cos(theta),\n N = abs(ry) * sin(theta); \n \n return [\n cx + cos(phi) * M - sin(phi) * N,\n cy + sin(phi) * M + cos(phi) * N\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"function vectorAngle ([ux, uy], [vx, vy]) {\n const { acos, sqrt } = Math;\n const sign = ux * vy - uy * vx < 0 ? -1 : 1,\n ua = sqrt(ux * ux + uy * uy),\n va = sqrt(vx * vx + vy * vy),\n dot = ux * vx + uy * vy;\n\n return sign * acos(dot / (ua * va));\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"deg = function(rad) { return rad * 180 / Math.PI }","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"function rad(deg) { return deg * Math.PI / 180 }","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"pow = function(n) { return Math.pow(n, 2); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}