3e:null 3f:["$","title",null,{"children":"Comparing arcs and lines in G-Code | Austin Whittier | Observable"}] 45:T44f,{ const { machineCtx, output } = createMachineCtx(); const canvasCtx = DOM.context2d(width, height, window.devicePixelRatio); // Use machine profile to transform from machine coords to screen canvasCtx.setTransform( 2 * ((machineProfile.xAxis * width) / machineProfile.width), 0, 0, 2 * ((machineProfile.yAxis * height) / machineProfile.height), width * 2, 0 ); previewCurve(canvasCtx); const arcs = curve.arcs(arcTolerance); machineCtx.beginPath(); canvasCtx.lineWidth = 0.5; canvasCtx.beginPath(); arcs.forEach(arc => { const p1 = curve.compute(arc.interval.start); const p2 = curve.compute(arc.interval.end); const ccw = arcIsCCW2(arc); const startAngle = !ccw ? arc.s : arc.e; const endAngle = !ccw ? arc.e : arc.s; canvasCtx.arc(arc.x, arc.y, arc.r, startAngle, endAngle, ccw); machineCtx.arc(arc.x, arc.y, arc.r, startAngle, endAngle, !ccw); }); machineCtx.stroke(); canvasCtx.stroke(); return html`

${canvasCtx.canvas}

${output.join('\n')}

`; }46:T469,{ const canvasCtx = DOM.context2d(width, height, window.devicePixelRatio); // Use machine profile to transform from machine coords to screen canvasCtx.setTransform( 2 * ((machineProfile.xAxis * width) / machineProfile.width), 0, 0, 2 * ((machineProfile.yAxis * height) / machineProfile.height), width * 2, 0 ); canvasCtx.lineWidth = 4; canvasCtx.globalCompositeOperation = 'multiply'; canvasCtx.strokeStyle = 'blue'; canvasCtx.beginPath(); for (let i = 0; i <= subdivisions2; i++) { const t = i / subdivisions2; const { x, y } = curve.compute(t); canvasCtx.lineTo(x, y); } canvasCtx.stroke(); const arcs = curve.arcs(arcTolerance2); canvasCtx.strokeStyle = 'red'; canvasCtx.beginPath(); arcs.forEach(arc => { const p1 = curve.compute(arc.interval.start); const p2 = curve.compute(arc.interval.end); const ccw = arcIsCCW2(arc); const startAngle = !ccw ? arc.s : arc.e; const endAngle = !ccw ? arc.e : arc.s; canvasCtx.arc(arc.x, arc.y, arc.r, startAngle, endAngle, ccw); }); canvasCtx.stroke(); return canvasCtx.canvas; }47:[] 43:{"id":"9d681f63d11e2cc6","slug":"comparing-arcs-and-lines-in-g-code","title":"Comparing arcs and lines in G-Code","thumbnail":"f5e4a5b4c9a1e7d5e6ac4922335ee0ab5eaccaca0afb311693142e97fdbb469a","access_level":"public","create_time":"$D2020-05-09T19:37:10.135Z","update_time":"$D2020-08-14T05:08:24.111Z","view_time":null,"first_public_time":"$D2020-05-15T22:44:41.849Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d03f0e4f0b69bd97","login":"awhitty","name":"Austin Whittier","avatar_url":"https://avatars-next.observableusercontent.com/8fe94f897411f0ca1a171f84532a98f5670d2a2cdc3d30a918894fdd24db40c0","tier":"starter_2024","bio":""},"version":608,"publish_version":608,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a27c1c116e001e2","login":"awhitty","name":"Austin Whittier","avatar_url":"https://avatars-next.observableusercontent.com/8fe94f897411f0ca1a171f84532a98f5670d2a2cdc3d30a918894fdd24db40c0","tier":null,"bio":""}],"members":[{"type":"individual","id":"2a27c1c116e001e2","login":"awhitty","name":"Austin Whittier","avatar_url":"https://avatars-next.observableusercontent.com/8fe94f897411f0ca1a171f84532a98f5670d2a2cdc3d30a918894fdd24db40c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6bc97f631e74267c","slug":"cnc","title":"CNC","owner":{"id":"d03f0e4f0b69bd97","login":"awhitty","name":"Austin Whittier"}},"type":"notebook","body":{"titling":"auto","title":"Comparing arcs and lines in G-Code","cells":[{"id":0,"value":"md`# Comparing arcs and lines in G-Code\n\nHere's a brief notebook I used in place of actual CAM software to compare how Grbl handles circular arcs approximating a Bézier curve versus linear interpolation along the curve. \n\nFor my goals, I found no difference between the two approaches, but I have limited tools for measuring these things. I wrote a few more findings up in [@awhitty/approximating-bezier-curves-for-cnc](https://observablehq.com/@awhitty/approximating-bezier-curves-for-cnc).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"md`# Arcs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"viewof arcTolerance = slider({\n min: 0.001,\n max: 10,\n value: 1,\n title: 'Arc tolerance'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`# Lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"viewof subdivisions = slider({\n min: 1,\n max: 100,\n value: 50,\n step: 1,\n title: 'Subdivisions'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"{\n const { machineCtx, output } = createMachineCtx();\n\n const canvasCtx = DOM.context2d(width, height, window.devicePixelRatio);\n\n // Use machine profile to transform from machine coords to screen\n canvasCtx.setTransform(\n 2 * ((machineProfile.xAxis * width) / machineProfile.width),\n 0,\n 0,\n 2 * ((machineProfile.yAxis * height) / machineProfile.height),\n width * 2,\n 0\n );\n\n previewCurve(canvasCtx);\n\n canvasCtx.beginPath();\n machineCtx.beginPath();\n for (let i = 0; i <= subdivisions; i++) {\n const t = i / subdivisions;\n const { x, y } = curve.compute(t);\n canvasCtx.lineTo(x, y);\n machineCtx.lineTo(x, y);\n }\n canvasCtx.stroke();\n machineCtx.stroke();\n\n return html`\n

\n ${canvasCtx.canvas}\n

${output.join('\\n')}

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"viewof arcTolerance2 = slider({\n min: 0.001,\n max: 10,\n value: 1,\n title: 'Arc tolerance'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"viewof subdivisions2 = slider({\n min: 1,\n max: 100,\n value: 50,\n step: 1,\n title: 'Subdivisions'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"machineProfile = ({\n xAxis: 1,\n yAxis: -1,\n width: 385,\n height: 280\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"height = (machineProfile.height / machineProfile.width) * width // aspect ratio * width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"curve = new Bezier(\n { x: -40, y: -40 },\n { x: -200, y: -100 },\n { x: -300, y: -20 },\n { x: -300, y: -200 }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"function createMachineCtx() {\n const output = [];\n const driver = new Gcanvas.GcodeDriver({\n write: function(cmd) {\n output.push(cmd);\n }\n });\n\n const machineCtx = new Gcanvas(driver);\n\n machineCtx.feed = 1000;\n\n return { machineCtx, output };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"function createCanvasCtx() {\n const canvasCtx = DOM.context2d(width, height, window.devicePixelRatio);\n\n // Use machine profile to transform from machine coords to screen\n canvasCtx.setTransform(\n 2 * ((machineProfile.xAxis * width) / machineProfile.width),\n 0,\n 0,\n 2 * ((machineProfile.yAxis * height) / machineProfile.height),\n width * 2,\n 0\n );\n\n return canvasCtx;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"function arcIsCCW2(arc) {\n const start = curve.compute(arc.interval.start);\n const center = curve.compute((arc.interval.start + arc.interval.end) / 2);\n const end = curve.compute(arc.interval.end);\n const c =\n (start.x - center.x) * (end.y - center.y) -\n (start.y - center.y) * (end.x - center.x);\n return c > 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"function arcIsCCW(arc) {\n const start = pointOnCircle(arc.x, arc.y, arc.r, arc.s);\n const center = { x: arc.x, y: arc.y };\n const end = pointOnCircle(arc.x, arc.y, arc.r, arc.e);\n const c =\n (start.x - center.x) * (end.y - center.y) -\n (start.y - center.y) * (end.x - center.x);\n return c > 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"function pointOnCircle(x, y, r, angle) {\n return {\n x: x + Math.cos(angle) * r,\n y: y + Math.sin(angle) * r\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"function previewCurve(ctx) {\n ctx.beginPath();\n ctx.strokeStyle = 'red';\n ctx.lineWidth = 4;\n ctx.globalAlpha = 0.2;\n ctx.moveTo(curve.points[0].x, curve.points[0].y);\n ctx.bezierCurveTo(\n curve.points[1].x,\n curve.points[1].y,\n curve.points[2].x,\n curve.points[2].y,\n curve.points[3].x,\n curve.points[3].y\n );\n ctx.stroke();\n ctx.strokeStyle = 'black';\n ctx.lineWidth = 1;\n ctx.globalAlpha = 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"Bezier = require('https://bundle.run/bezier-js@2.6.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"// Used wzrd.in after a lotta fiddling with other CDNs due to package.json missing `module`\nGcanvas = require('https://wzrd.in/standalone/gcanvas@latest')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"