30:T7a1,ellipse = { const r = 1; const spacing = 4; const offset = 2; const colors = [["red", "black"], ["blue", "yellow"]]; return svg``; // Loop through both sweep-flag and large-arc-flag 0 and 1, each with its own color. function loopdiloop() { let svg = ""; colors.forEach((row, rowIndex) => { row.forEach((paint, colIndex) => { svg += g(rowIndex, colIndex, paint); }); }); return svg; } // Add a colored in each (row, col) position. function g(row, col, color) { let svg = ""; svg += arc(row, col, r, color); svg += circles(r); svg += dots(r); svg += ""; return svg; } // Set the origin at (row, col) so each g() his its own little space. function transform(row, col) { return ( 'transform="translate(' + `${offset + spacing * row},` + `${offset + spacing * col}` + ')"' ); } // Dot both the radi and the endpoint of the closing line. function dots(r) { return dot(0, "hotpink") + dot(r, "lime"); } // Draw a little dot. function dot(p, color) { return ``; } // Draw a colored quarter circle with radius r, start at (0, 0), and end at (r, r). function arc(size, clockwise, e, color) { return ` `; } // Draw two circle guides with radius r to show the circle as a whole. function circles(r) { return ` ${circle(r, 0)} ${circle(0, r)} `; } // Draw a dashed circle at (cx, cy) and radius r. function circle(cx, cy) { return ``; } }31:T490,// arc({x, y, r, ang1, ang2}) // appends a counterclockwise arc of a circle to the current path, // possibly preceded by a straight line segment. // (x, y): center, // r: radius // ang1: angle of a vector from (x, y) of length r to the first endpoint of the arc // ang2: angle of a vector from (x, y) of length r to the second endpoint of the arc // // if ((turns = ang2 - ang1) >= 1), draw a full cricle // (rather than an arc starting at nothing) // a circle is drawn by drawing two complementary half-circles arcy = ({ x = 0, y = 0, r = 1, turn1 = 0, turn2 = 1/2, tilt = 1, large = 0, sweep = 1, closed = false, } = {}) => { const {sin, cos} = Math; const a1 = turn1 * tau; const a2 = turn2 * tau; const rx = r * cos(a1); const ry = r * sin(a1); large = (turn2 < .5 ? large : 1 - large); y = r * sin(a1 + a2); x = r * cos(a1 + a2); const initial = closed ? `M${x} ${y}L0 0L${rx} ${ry}` : ""; return (turn2 < 1) ? `${initial}M${rx} ${ry}A${r} ${r} ${tilt} ${large} ${sweep} ${x} ${y}M0 0${closed ? "z" : ""}` : `M${-r} ${0}A${r} ${r} ${tilt} ${large} ${sweep} ${r} 0A${r} ${r} ${tilt} ${large} ${sweep} ${-r} 0` }32:[] 2e:{"title":"Ellipse","cells":[{"id":0,"value":"md`# Ellipse`","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"md`\n## Sweep & Direction\n* Loop through all four combinations of \\`large-arc-flag\\` and \\`sweep-flag\\` to show its effect.\n* Because everything is oriented along the \\`x == y\\` diagonal and each ellipse is in fact an arc, the arc's parameters are greatly simplified.\n\nSee [MDN » SVG » Paths » Arcs](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"viewof f = Inputs.range([0, 1], {label: \"Aperture\", step: 0.01, value: 0.8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1216,"value":"quadrant = (x, y, f, scale, angle, color) => ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"{\n const viewBox = `-${w / 2} -${h / 2} ${w} ${h}`;\n const dot = ([x = 0, y = 0], r = 3, fill = \"magenta\") =>\n ``\n const mid = ({x: endPointX / 2, y: endPointY / 2})\n const end = ({x: endPointX, y: endPointY})\n\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2503,"value":"* the two magenta ellipses are mirror images of each other—flipped along the line formed from the start → end points;\n* **four possible arcs** can get you from start to finish—four distinct segments or paths;\n* for a given x-radius ${tex`r_x`} and y-radius ${tex`r_y`}, there are two ellipses that can connect any two points as long as they're within the radius of the ellipse;\n* the **path** taken is controlled by two flags:\n * **large** flag selects between the ***long*** and ***short*** path that can be taken to connect the points;\n * **sweep** flag selects between moving at positive or negative angles at the start and essentially picks which of the two ellipses will be traveled around.","pinned":false,"hidden":false,"mode":"md"},{"id":1461,"value":"viewof showArc = Inputs.radio([\"visible\", \"hidden\"], {label: \"Arc\", value: \"visible\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1612,"value":"viewof sweep = Inputs.radio(\n new Map([[\"clockwise\", 1], [\"counterclockwise\", 0]]), \n {label: \"sweep\", value: 1, disabled: showArc === \"hidden\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2479,"value":"viewof large = Inputs.radio(\n new Map([[\"short\", 0], [\"long\", 1]]), \n {label: \"large\", value: 0, disabled: showArc === \"hidden\"}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof rx = Inputs.range([0, w], {label: tex`r_x`, step: 1, value: 144})","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof ry = Inputs.range([0, w], {label: tex`r_y`, step: 1, value: 72})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2617,"value":"viewof startPointX = Inputs.range([-w/2, w/2], {label: tex`x_\\text{start}`, step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2623,"value":"viewof startPointY = Inputs.range([-w/2, w/2], {label: tex`y_\\text{start}`, step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof endPointX = Inputs.range([-w/2, w/2], {label: tex`x_\\text{end}`, step: 1, value: -70})","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof endPointY = Inputs.range([-h/2, h/2], {label: tex`y_\\text{end}`, step: .1, value: -144})","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof xAxisRotation = Inputs.range([0,180], {label: tex`\\alpha _\\text{x-axis}`, step: 1, value: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"## Arc using path arc","pinned":false,"hidden":false,"mode":"md"},{"id":1781,"value":"{\n const {sin, cos} = Math;\n const w = ww;\n \n const a1 = turn1 * tau;\n const a2 = turn2 * tau;\n \n const sketch = d3.create(\"svg\")\n .attr(\"width\", w)\n .attr(\"height\", w)\n .attr(\"viewBox\", [-w/2, -w/2, w, w])\n .style(\"background-color\", \"black\")\n ;\n sketch\n .append(\"path\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", µ(3))\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"fill\", \"gold\")\n .attr(\"d\", d)\n ;\n sketch\n .append(\"circle\").attr(\"r\", µ(1)).attr(\"fill\", \"red\")\n .attr(\"cx\", r * cos(a1))\n .attr(\"cy\", r * sin(a1))\n ;\n sketch\n .append(\"circle\")\n .attr(\"r\", µ(1))\n .attr(\"fill\", \"green\")\n .attr(\"cx\", r * cos(a1 + a2))\n .attr(\"cy\", r * sin(a1 + a2))\n ;\n sketch\n .append(\"circle\")\n .attr(\"r\", µ(1))\n .attr(\"fill\", \"cyan\")\n ;\n return sketch.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1916,"value":"viewof turn1 = Inputs.range([0,1], {label: \"turn 1\", value: 0, step: .01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1928,"value":"viewof turn2 = Inputs.range([0,2], {label: \"turn 2\", value: 2/3, step: .005})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1951,"value":"viewof r = Inputs.range([0,ww], {label: \"r\", value: www/2, step: .1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"d = arcy({r, turn1, turn2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1459,"value":"arc = ({sweep, large}) => `M${startPointX} ${startPointY}A${rx} ${ry} ${xAxisRotation} ${large} ${sweep} ${endPointX} ${endPointY}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1678,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1878,"value":"www = ww/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"ww = M(6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"M = (n = 1) => n * 36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2186,"value":"m = (n = 1) => 9 * n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"µ = (n = 1) => n * 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"rad = r => 2 * Math.PI * r","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"deg = n => fix(360 * n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"tau = Math.PI * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2196,"value":"random = (min = 0, max = 1) => {\n // min = Math.ceil(min);\n // max = Math.floor(max);\n return (min + Math.random() * (max - min)); //The maximum is inclusive and the minimum is inclusive\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"p = n => `${(100 * n).toFixed(1)}%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"fix = (x, p = 2) => x.toFixed(p)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"w = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"crosshair = (show) => \nshow\n? ``\n: \"\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}