2d:null 2e:["$","title",null,{"children":"An Easier-to-Use Sine Bar | Jacob Rus | Observable"}] 33:T418,top_animation = { let angle = 35; let height = .06 * angle; const gaugeblocks = svg``; const sinebarshape = svg``; const table = svg``; const svgelem = svg` `; animate(svgelem, invalidation, (time) => { const angle = Math.sin(time / 1500)*25 + 25; const height = .06 * angle; gaugeblocks.setAttribute('height', height); gaugeblocks.setAttribute('y', `${-.75 - height}`); sinebarshape.setAttribute('transform', `rotate(${-angle})`); table.setAttribute('y', `${-1 - height}`); }); return html`

${svgelem}

`; }34:T944,md` ## Introduction A machinist [recently came to /r/math][reddit topic] wondering about the design of the hunk of metal in this photograph: Fancy sine bar

He said that it was a tool called a “[sine bar][]”, but that this was a special version which did not require any understanding of trigonometry or specialized lookup tables to use. I wanted to help understand how this tool was designed, and create a new design using the same idea which would match the machinist’s preferences and be as effective as possible. Not knowing anything about machining, I turned to the web to figure out what in the world a sine bar is and how this one might work. It turns out to be a machine-shop analog of a protractor, used for setting and measuring angles with high precision. (Or we might call it a [goniometer][].) Instead of measuring the angle directly as an arclength of a circle, we set up a right triangle with known hypotenuse and measure the [sine][] of the angle instead, then convert between sine and angle measure using a [printed lookup table][sine bar table]. We can set the height using [gauge blocks][], which can match a specified height to one ten-thousandth of an inch. Assuming that everything in our setup was machined precisely and is is in good condition, a sine bar can thus be used to construct angles to [arcminute][] precision or better, much more precise than any typical protractor. Here’s a little animation of a standard sine bar seen from the side. Notice that the sine of the angle between the surface of the bar and the table is the height of the gauge blocks divided by the distance between the bottom contact points of the two cylindrical rollers, which is the same as the fixed distance between the rollers’ centers. [reddit topic]: https://reddit.com/r/math/bksang/ [sine bar]: https://en.wikipedia.org/wiki/Sine_bar [goniometer]: https://en.wikipedia.org/wiki/Goniometer [sine]: https://en.wikipedia.org/wiki/Sine [sine bar table]: https://archive.org/details/in.ernet.dli.2015.278569/page/n991 [gauge blocks]: https://en.wikipedia.org/wiki/Gauge_block [arcminute]: https://en.wikipedia.org/wiki/Minute_and_second_of_arc `35:T596,{ let angle = 35; let height = 4 * Math.sin(Math.PI/180 * angle); const gaugeblocks = svg``; const sinebarshape = svg` `; const table = svg``; const group = svg` ${gaugeblocks} ${table} `; const svgelem = svg` `; animate(svgelem, invalidation, (time) => { const angle = Math.sin(time / 1500)*25 + 25; const height = 4 * Math.sin(Math.PI/180 * angle); gaugeblocks.setAttribute('height', height); gaugeblocks.setAttribute('y', `${-.25 - height}`); table.setAttribute('y', `${-.5 - height}`); sinebarshape.setAttribute('transform', `rotate(${-angle})`); // group.setAttribute('transform', `rotate(${angle})`); }); return html`

${svgelem}

`; }36:T53d,{ const divwidth = Math.min(width, 800) const ytwidth = width > 500 ? (width / 2) - 2 : Math.min(width, 400); const ytheight = ytwidth * 5/8; return md` Here are a pair of videos introducing the basic idea and demonstrating some applications (feel free to skip the videos; they are not essential to understand what follows):

${youtube('ojjdRRXjK68', ytwidth, ytheight)} ${youtube('RMmSsQj6S6s', ytwidth, ytheight)}

Here are another two videos. The first describes and discusses gauge blocks in detail. The second recommends setting the height of the sine bar with adjustable [parallels][] measured with [calipers][] – instead of using gauge blocks – for fast but still reasonably high precision work:

${youtube('oJEbSlXkwn0', ytwidth, ytheight)} ${youtube('rNm2dW9zhWs', ytwidth, ytheight)}

Unlike a standard sine bar, which rests on two circles, the one in the picture up top has only one circular bump on the left but the right bump is a special curve which has been carefully designed so that height of the gauge blocks will vary proportionally with angle measure. [parallels]: https://en.wikipedia.org/wiki/Parallels_(engineering) [calipers]: https://en.wikipedia.org/wiki/Calipers ` }37:T41c,{ let angle = 35; let height = .06 * angle; const gaugeblocks = svg``; const sinebarshape = svg``; const table = svg``; const group = svg` ${gaugeblocks} ${table} `; const svgelem = svg` `; animate(svgelem, invalidation, (time) => { const angle = Math.sin(time / 1500)*25 + 25; const height = .06 * angle; gaugeblocks.setAttribute('height', height); gaugeblocks.setAttribute('y', `${-.75 - height}`); table.setAttribute('y', `${-1 - height}`); group.setAttribute('transform', `rotate(${angle})`); }); return html`

${svgelem}

`; }38:T877,{ const {sin, cos, PI} = Math; const r = 3/4; const k = 0.06 * 180 / PI; let angle = diagram_angle; let t = Math.PI/180*angle; let height = .06 * angle; const sinebarshape = svg``; const tables = svg` ${[...Array(90).keys()].map(a => { const y = -.75 - 0.06 * a; return svg``}) } `; const gblocus = svg``; const clocus = svg``; const radius = svg``; const square = svg``; const gaugeblocks = svg``; const table = svg``; const origin = svg``; const righttouch = svg``; const svgelem = svg` `; return html`

${svgelem}

`; }39:T544,md` The way to compute our envelope (the fancy curve ${$`f`}) is to first express each of the table lines as an [implicit curve][] ${$`T(x, y, \theta) = 0`}. Then the envelope consists of the points also satisfying ${$`\tfrac{\partial}{\partial \theta}T(x, y, \theta) = 0`}. Intuitively, these are the points along our lines which remain fixed as the angle varies infinitessimally. [implicit curve]: https://en.wikipedia.org/wiki/Implicit_curve In our case: ${$$`\begin{aligned} T(x, y, \theta) &= x \sin \theta - y \cos \theta - r - k\theta = 0 \\ \frac{\partial}{\partial \theta}T(x, y, \theta) &= x \cos \theta + y \sin \theta - k = 0 \end{aligned} `} We can solve this system of equations to find parametric equations for points ${$`(x_f, y_f)`} lying along our curve: ${$$`\begin{aligned} x_f(\theta) &= k\cos \theta + r \sin \theta + k\theta \sin \theta \\ y_f(\theta) &= k\sin \theta - r \cos \theta - k\theta \cos \theta \\ \end{aligned} `} We could also write this using a [complex number][] ${$`z = x + yi`}: ${$$`z_f(\theta) = (k - (r + k\theta)i) e^{\theta i}`} This is somewhat similar to the circle’s [involute][]: ${$$`z_\mathrm{involute}(\theta) = - (r + r\theta)i e^{\theta i}`} [complex number]: https://en.wikipedia.org/wiki/Complex_number [involute]: https://en.wikipedia.org/wiki/Involute#Involutes_of_a_circle `3a:T7d9,md` ## Other details After deciding on a sine bar with about ${$`3.44''`} between bumps, there were still several other design choices to make, optimizing several competing criteria: * The radius of the circle on the left should be as large as possible to improve precision. * The height of the top surface of the bar should be as low to the table as possible, to make it usable in a wider variety of contexts. * The bar should support an angle of slightly past ${$`45^\circ`}. * There should be at least ${$`0.125''`} of clearance to the right of the contact point for the gauge blocks to fit under the left circle. * The bar should be as sturdy as possible: not be too skinny at its narrowest point, and as tall as possible all the way along. * There should be a lip on the right to hold the work securely in a square corner. * The bottom should have a flat section for potential upside-down uses. I tried mocking up a variety of designs, but my best effort to meet these constraints resulted in a circle of radius ${$`0.75''`}, with the top surface passing through the center of the circle, and a ${$`0.25''`} tall lip at the right. The top surface of the bar extends past the center of the circle ${$`0.5''`} to the left and ${$`4.5''`} to the right, ${$`5''`} wide in total. The whole bar fits within a ${$`1''`} high by ${$`5.61''`} wide rectangle. This is a ${$`3`} times larger radius than the ${$`0.25''`} radius circle of the bar pictured in the introduction, so for a given quality of machining this design should be about 3 times as precise, while the main surface is lower to the table (${$`0.75''`} vs. ${$`0.85''`}), making the tool more versatile. It supports approximately the same maximum angle of a bit past ${$`50^\circ`}. Someone willing to compromise further on the height and place the surface higher above the table or make the bar narrower could alter the design to use a larger radius (anything up to maybe ${$`2''`}), or support steeper angles up to ${$`60^\circ`} or beyond. `3b:T17bf,desmos_graph_data = { const r = String.raw; return { "version":7, "graph": { "viewport": { "xmin":-1.9253134060123074, "ymin":-4.784552457958927, "xmax":10.71652269849308, "ymax":5.459694040519576 } }, "randomSeed": "6dc6e6caa75436524b8090c7cae2b4e6", "expressions": { "list": [ { "type":"expression", "id":"14", "color":"#2d70b3", "latex": r`\phi=0.1`, "hidden":true, "slider": { "hardMin":true, "hardMax":true, "animationPeriod":11428.57142857143, "loopMode":"LOOP_FORWARD", "min":"0", "max": r`\frac{\pi}{3}` } }, { "type":"folder", "id":"25", "title":"parameters", "collapsed":true }, { "type":"text", "id":"26", "folderId":"25", "text":"r = radius, k = distance per radian" }, { "type":"expression", "id":"12", "folderId":"25", "color":"#2d70b3", "latex": r`\left(k,-r\right)`, "dragMode":"XY" }, { "type":"expression", "id":"11", "folderId":"25", "color":"#c74440", "latex": r`r=1`, "hidden":true, "slider": { "hardMin":true, "hardMax":true, "min":"0", "max":"5" } }, { "type":"expression", "id":"9", "folderId":"25", "color":"#6042a6", "latex": r`k=5.7295779513`, "slider": { "hardMin":true, "hardMax":true, "min":"0.1" } }, { "type":"folder", "id":"21", "title":"tabletop lines", "collapsed":true }, { "type":"expression", "id":"6", "folderId":"21", "color":"#c74440", "latex": r`\phi_i=\left[0,.04...\frac{2\pi}{3}\right]`, "hidden":true, "slider": { "hardMin":true, "hardMax":true, "min":"0", "max":"30" } }, { "type":"expression", "id":"8", "folderId":"21", "color":"#c96", "latex": r`x\sin\phi_i\ -y\cos\phi_i=r+k\phi_i` }, { "type":"folder", "id":"23", "title":"circle", "collapsed":true }, { "type":"expression", "id":"19", "folderId":"23", "color":"#2d70b3", "latex": r`x^2+y^2\le\ r^2` }, { "type":"expression", "id":"1", "folderId":"23", "color":"#000000", "latex": r`x^2+y^2=\ r^2` }, { "type":"folder", "id":"30", "title":"curves", "collapsed":true }, { "type":"expression", "id":"3", "folderId":"30", "color":"#2d70b3", "latex": r`\left(\left(r+kt\right)\sin t,-\left(r+kt\right)\cos t\right)`, "parametricDomain": { "max": r`\pi`, "min":"" }, "fill":false, "dragMode":"NONE", "domain":{ "min":"0", "max": r`\pi` } }, { "type":"expression", "id":"10", "folderId":"30", "color":"#2d70b3", "latex": r`\left(\left(r+kt\right)\sin t+k\cos t,-\left(r+kt\right)\cos t\ +k\sin t\right)`, "parametricDomain": { "max": r`\pi`, "min":"" }, "fill":true, "domain": { "min":"0", "max":"\pi" } }, { "type":"folder", "id":"28", "title":"specific distance / angle", "collapsed":true }, { "type":"expression", "id":"18", "folderId":"28", "color":"#000000", "latex": r`\left(t\sin\phi,-t\cos\phi\right)`, "parametricDomain":{ "max": r`\left(r+k\phi\right)`, "min":"r" }, "domain":{ "min":"r", "max": r`\left(r+k\phi\right)` } }, { "type":"expression", "id":"13", "folderId":"28", "color":"#000000", "latex": r`x\sin\phi\ -y\cos\phi=r+k\phi` }, { "type":"expression", "id":"17", "folderId":"28", "color":"#000000", "latex": r`\left(\left[r,\left(r+k\phi\right)\right]\sin\phi,-\left[r,\left(r+k\phi\right)\right]\cos\phi\right)`, "pointStyle":"OPEN", "dragMode":"NONE" }, { "type":"expression", "id":"32", "folderId":"28", "color":"#000000", "latex": r`\left(r\sin\phi+k\phi\sin\phi+k\cos\phi,\ k\sin\phi-k\phi\cos\phi-r\cos\phi\right)`, "pointStyle":"OPEN", "dragMode":"NONE" }, { "type":"expression", "id":"33", "folderId":"28", "color":"#000000", "latex": r`\left(\left(r+\frac{k\phi}{2}\right)\sin\phi,-\left(r+\frac{k\phi}{2}\right)\cos\phi\right)`, "showLabel":true, "label":"height", "hidden":true, "pointStyle":"OPEN", "dragMode":"NONE", "labelOrientation":"left" }, { "type":"expression", "id":"34", "folderId":"28", "color":"#000000", "latex": r`\left(r\sin\phi+k\phi\sin\phi+\frac{k\cos\phi}{2},\ \frac{k\sin\phi}{2}-k\phi\cos\phi-r\cos\phi\right)`, "showLabel":true, "label":"table", "hidden":true, "labelOrientation":"below" } ] } }; }3c:T448,sinebar = { const {sin, cos, csc, cot, sec, asin, acos, PI} = Math; const k = 0.06 * 180 / PI; // 0.06 inches per degree const r = 3/4; // radius const envelope_curve = (t) => [+(r + k*t)*sin(t) + k*cos(t), -(r + k*t)*cos(t) + k*sin(t)]; const circle = (cx) => (t) => [cx + r*sin(t), -r*cos(t)]; const left = -1/2, waist = -3/8, bottom = -5/8, lipy = 1/4, lipx = 4 + 1/2, a = bisect((t) => envelope_curve(t)[1] - lipy, 0, 2), // max angle sa = sin(a), ca = cos(a), g = r * ca / sa + waist / sa, h = (waist - bottom) / ca, b = asin(left/r), c = -acos(-bottom/r); return [ moveto(left, 0), lineto(left, -r*cos(b)), parametric_path(circle(0), [b, 0]), parametric_path(circle(0), [0, a]), lineto(r*sa + g*ca, -r*ca + g*sa), lineto(r*sa + g*ca + h*sa, bottom), lineto(k+r*sin(c), bottom), parametric_path(circle(k), [c, 0]), parametric_path(envelope_curve, [0, a]), lineto(lipx, lipy), lineto(lipx, 0), lineto(left, 0), `Z`, ].join("\n").replace(/\n/g, ""); }3d:[] 31:{"id":"911181514711a208","slug":"sinebar","title":"An Easier-to-Use Sine Bar","thumbnail":"755de522873fd28292a68a9fe3d61193d5cdcfdd0dedf8899e5ba48adeb6d8df","access_level":"public","create_time":"$D2019-05-08T09:05:40.848Z","update_time":"$D2021-02-16T01:28:43.884Z","view_time":null,"first_public_time":"$D2019-05-11T00:53:29.483Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"9b8a8e177a49059a","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":"starter_2024"},"version":1201,"publish_version":1201,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null}],"members":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"936bb5e9815c44d2","slug":"explorables","title":"Explorables","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"An Easier-to-Use Sine Bar","cells":[{"id":0,"value":"md`# An Easier-to-Use Sine Bar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`\n## Computing the curve\n\nWe can find the shape of the curve on the right side of our tool using differential calculus.\nFirst we set up a rectangular coordinate system ${$`(x, y)`} where the tool stays fixed, with the origin placed at the center of the circle on the left; let that circle have radius ${$`r`}.\nThis leaves the surface of the table as as a line which rotates and moves as we change the height of the gauge blocks.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`\nThe perpendicular segment from the origin to the table has length ${$`x \\sin \\theta - y \\cos \\theta`}. This is made up of two parts, the radius of the circle (in green below) of length ${$`r`}, and the perpendicular segment from the circle to the table (in blue below).\nWe want this latter segment’s length to vary [proportionally][] with ${$`\\theta`}, the measure of the angle in radians, for some proportionality constant ${$`k`}.\nSo the coordinates of points on the table (in brown below) can be found by setting:\n\n${$$`x \\sin \\theta - y \\cos \\theta = r + k\\theta`}\n\nThen the curved shape of the right bump of our tool is the [envelope][] of the family of straight lines representing the table surface at varying angle.\n\n [proportionally]: https://en.wikipedia.org/wiki/Proportionality_(mathematics)\n [envelope]: https://en.wikipedia.org/wiki/Envelope_(mathematics)\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"viewof diagram_angle = slider({\n value: 30,\n min: 0, \n max: 60, \n step: \"any\", \n format: v => `${('00' + (v | 0)).slice(-2)}°${('00' + (((v % 1) * 60) | 0)).slice(-2)}′`,\n description: \"Angle in degrees\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"md`\nOur envelope curve turns out to maintain a constant distance ${$`k`} along the table between the point directly under the circle on the left, and the point of contact on the curve on the right.\nWe can set this distance to whatever number we prefer, but for practical use in an American machine shop, ${$`0.001`} inches per [arcminute][] seems convenient.\nThat makes ${$`0.06''`} per degree, or ${$`2.7''`} for a ${$`45^\\circ`} angle.\nTo find ${$`k`} we must convert to radians; in our example, ${$`k = 0.06 \\times 180/\\pi \\approx ${(0.06*180/Math.PI).toFixed(3)}''`}.\n\nA metric machine shop might prefer a tool with ${$`0.02`} or ${$`0.025`} or ${$`0.04`} millimeters per arcminute. (Or if using decimal fractions of degrees, perhaps ${$`1.5`} or ${$`2`} mm per degree.)\n\n [arcminute]: https://en.wikipedia.org/wiki/Minute_and_second_of_arc\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"md`Here’s an outline of our tool using an ${$`0.125''`} grid:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"md`\nFor comparison here is the reverse-engineered mystery sine bar from the image up top, drawn at the same scale, but with a ${$`0.1''`} grid.\nThe two bumps are closer together because this one is ${$`0.05''`} per degree instead of the ${$`0.06''`} we used.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"md`And for completeness, here’s our normal sine bar with ${$`4''`} between rollers. (The most common size in American machine shops is ${$`5''`}, but other sizes are also seen.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"svg`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"Physical_realization = md`\n## Physical realization\n\nUpdate: The Practical Machinist forum participant [kenton cut a physical copy][forum post] of this sine bar “out of a 3/8 [inches thick] chunk of mystery steel”, and says “it seemed to be dead nuts on at a resolution of 5 arc minutes. Which is more than accurate enough for the type of work I usually do.”\n\n [forum post]: https://www.practicalmachinist.com/vb/general/s-363939/index3.html#post3357997\n\n $\"Physical$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"md`\n## Shout-out to Desmos\n\nTo solve this problem, [Desmos](https://www.desmos.com/calculator/pnyumtpk9u) was a big help. I made a couple of interactive graphs – [one](https://www.desmos.com/calculator/metu8a7gzs), [two](https://www.desmos.com/calculator/pnyumtpk9u) – to understand the behavior of the family of table lines and to visualize the resulting envelope curve.\n\nCreating graphs in Desmos takes quite a bit less work than drawing everything with my own code, and the interactivity and animation are great.\n\nUpdate: here’s one of those graphs inline. Try pressing the play button next to ${$`\\phi`}, and try dragging the blue dot.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"{\n const key = \"dcb31709b452b1cf9dc26972add0fda6\"; // demo API key\n const url = `https://www.desmos.com/api/v1.3/calculator.js?apiKey=${key}`;\n const Desmos = await require(url).catch(() => window.Desmos);\n \n const height = 500;\n const view = html`

`;\n const calculator = Desmos.GraphingCalculator(view);\n invalidation.then(() => calculator.destroy()); // clean up if we re-render this cell\n calculator.setState(desmos_graph_data)\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"mystery_sinebar = {\n const {sin, cos, csc, cot, sec, asin, acos, PI} = Math;\n const k = 0.05 * 180 / PI; // 0.06 inches per degree\n const r = 1/4; // radius\n const envelope_curve = (t) => \n [+(r + k*t)*sin(t) + k*cos(t),\n -(r + k*t)*cos(t) + k*sin(t)];\n const circle = (cx) =>\n (t) => [cx + r*sin(t), -r*cos(t)];\n\n const\n left = -.25,\n right = 4,\n top = 0.6,\n liph = 0.1,\n lipw = 0.1,\n a = bisect((t) => envelope_curve(t)[0] - right, 0, 2); // max angle\n \n return [\n moveto(left, top),\n lineto(left, 0),\n parametric_path(circle(0), [-PI/2, 0]),\n parametric_path(circle(0), [0, PI/2]),\n lineto(k-r, 0),\n parametric_path(circle(k), [-PI/2, 0]),\n parametric_path(envelope_curve, [0, a]),\n lineto(4,top+liph),\n lineto(4-lipw,top+liph),\n lineto(4-lipw,top),\n lineto(left, top),\n `Z`\n ].join(\"\\n\").replace(/\\n/g, \"\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"moveto = (x, y) =>\n `M${round(x,output_digits)},${round(y,output_digits)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"lineto = (x, y) =>\n `L${round(x,output_digits)},${round(y,output_digits)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"parametric_path = function (f, interval) {\n const bezpts = bezeval(f, interval, [-100, 100, -100, 100], tolerance);\n return bezpts_to_svgpath(bezpts, output_digits);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"output_digits = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"tolerance = 1e-6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"bisect = (f, t0, t1, tolerance=null, max_iterations=1000) => {\n if (t1 < t0) [t0, t1] = [t1, t0];\n for (let i = 0; i < max_iterations; i++) {\n let midpoint = 0.5*(t0 + t1);\n if ((f(midpoint) == 0) || (0.5*(t1 - t0) < tolerance)) {\n return midpoint;\n }\n if (sgn(f(midpoint)) == sgn(f(t0))) t0 = midpoint;\n else t1 = midpoint;\n }\n throw new Error(\"Max iterations exceeded.\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"sgn = (x) => (x > 0) - (x < 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"round = (x, d) => (+x).toFixed(d).replace(/\\.?0+$/,'')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"bezpts_to_svgpath = {\n const r = (x, d) => (+x).toFixed(d).replace(/\\.?0+$/,'') // round\n \n return function bezpts_to_svgpath(pts, digits) {\n const d = (digits == null) ? 4 : digits;\n const output = [];\n let x = 1/0, y = 1/0, n = pts.length;\n for (let i = 0; i < n; i += 8) {\n // if (Math.abs(pts[i] - x) + Math.abs(pts[i+1] - y) > 1e-12)\n // output.push(`M${r(pts[i],d)},${r(pts[i+1],d)}`);\n output.push(\n `C${r(pts[i+2],d)},${r(pts[i+3],d)},` +\n `${r(pts[i+4],d)},${r(pts[i+5],d)},` +\n `${r(pts[i+6],d)},${r(pts[i+7],d)}`);\n x = pts[i+6], y = pts[i+7];\n }\n return output.join('\\n');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"youtube = (id, width, height) =>\n html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"import {bezeval} from '@jrus/bezplot'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {cadd, csub, cmul, cinv, cdiv, clog, cexp, imag, cabs, phase, conj} from '@jrus/complex'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"import {math_css, $, $$, thumbnail_daemon, animate} with {$css as $css} from \"@jrus/misc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$$css = html`${math_css}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 32:"$31:body"