29:null 2a:["$","title",null,{"children":"V Plotter Simulator | Christopher Manning | Observable"}] 2f:T45b,draw = function() { // if there are no existing steps; move from the current position if (mutable steps.length == 0) { mutable penXY = [carriage.position.x, carriage.position.y]; console.log("INIT" + carriage.position); } console.log(mutable steps.length + " steps"); step(); function step() { let ms0 = mutable steps[0]; console.log(ms0); if (ms0.substr(0, 2) == "G0") { var gxy = ms0.split(' '); viewof x.value = gxy[1].substr(1, 10); viewof x.dispatchEvent(new CustomEvent("input")); viewof y.value = gxy[2].substr(1, 10); viewof y.dispatchEvent(new CustomEvent("input")); } else if (ms0.substr(0, 2) == "M3") { viewof etch.checked = true; viewof etch.dispatchEvent(new CustomEvent("input")); } else if (ms0.substr(0, 2) == "M4") { viewof etch.checked = false; viewof etch.dispatchEvent(new CustomEvent("input")); } else { console.log(`unknown command ${ms0}`); } mutable steps.shift(); if (mutable steps.length >= 1) { setTimeout(function() { step(); }, 10); } } }30:T2a55,// md`This SVG is from [https://www.christophermanning.org/projects/cta-line-simplification](https://www.christophermanning.org/projects/cta-line-simplification), but any SVG composed of just path elements can be used.` inputSvg = ``31:[] 2d:{"id":"bb78d988b974225d","slug":"v-plotter-simulator","title":"V Plotter Simulator","thumbnail":"7aede2ad02e28e9c3f11eda63f6c8ebb39d178cc7183b87473b98eaa33a634a4","access_level":"public","create_time":"$D2018-05-29T21:04:37.822Z","update_time":"$D2021-01-26T19:27:41.170Z","view_time":null,"first_public_time":"$D2020-04-12T16:39:22.950Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0b7767cf62286989","login":"christophermanning","name":"Christopher Manning","avatar_url":"https://avatars-next.observableusercontent.com/05996dbe8b12a22c7c2cc6718ef99e6ac39f0c97e98e2ca7f5b75dd5e920c8d0","tier":"starter_2024"},"version":1818,"publish_version":1818,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ab80266b6c16115","login":"christophermanning","name":"Christopher Manning","avatar_url":"https://avatars-next.observableusercontent.com/05996dbe8b12a22c7c2cc6718ef99e6ac39f0c97e98e2ca7f5b75dd5e920c8d0","tier":null}],"members":[{"type":"individual","id":"8ab80266b6c16115","login":"christophermanning","name":"Christopher Manning","avatar_url":"https://avatars-next.observableusercontent.com/05996dbe8b12a22c7c2cc6718ef99e6ac39f0c97e98e2ca7f5b75dd5e920c8d0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"V Plotter Simulator","cells":[{"id":454,"value":"md`# V Plotter Simulator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"canvas = {\n Matter.Engine.run(engine);\n Matter.Render.run(renderer);\n renderer.canvas.style = 'background: black;z-index:0;position:absolute;';\n return html`

${renderer.canvas}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1786,"value":"md`## X Position`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"viewof x = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1779,"value":"md`## Y Position`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"viewof y = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1783,"value":"md`## Pen Down`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"viewof etch = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"md`\n## Process\nConvert SVG path curves into lines, transform those lines into G-code, use a line drawing algorithm to generate the incremental pen position between the points, then convert those x and y positions into lengths \"belts\" using the Pythagorean theorem.\n\n## [G-code](https://en.wikipedia.org/wiki/G-code) reference\n - __G0 X123 Y456__ move to 123 456\n - __M3__ put pen down\n - __M4__ pick pen up\n\n## Notes\nThe belts attach to a single point on the carriage so we don't have to solve for torque.\n\n## Entrypoint\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"// this can be replaced with any set of drawing instructions\ndrawNow = {\n var xml = document.createElement('xml');\n xml.innerHTML = inputSvg;\n xml = linearize(xml);\n let paths = [...xml.getElementsByTagName('path')];\n\n penUp();\n\n paths.forEach(path => {\n path.attributes['d'].value\n .substr(2)\n .split('L')\n .forEach(s => {\n let xy = s.trim().split(',');\n move(parseInt(xy[0]), parseInt(xy[1]));\n penDown();\n });\n penUp();\n });\n\n move(0, 0);\n draw();\n\n return paths;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"md`## Methods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"// https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm\nmove = function(x1, y1) {\n if (mutable steps.length == 0) {\n mutable penXY = [carriage.position.x, carriage.position.y];\n console.log(\"INIT\" + mutable penXY);\n }\n\n let ms = mutable steps;\n let mpxy = mutable penXY;\n\n let x0 = mpxy[0];\n let y0 = mpxy[1];\n\n var dx = Math.abs(x1 - x0);\n var sx = x0 < x1 ? 1 : -1;\n var dy = -Math.abs(y1 - y0);\n var sy = y0 < y1 ? 1 : -1;\n var err = dx + dy;\n\n let iter = 0;\n while (true) {\n iter++;\n if (iter > 1000) break;\n\n mutable penXY = [x0, y0];\n ms.push(`G0 X${x0} Y${y0}`);\n\n if (x0 == x1 && y0 == y1) break;\n\n var e2 = 2 * err;\n if (e2 >= dy) {\n err += dy;\n x0 += sx;\n }\n if (e2 <= dx) {\n err += dx;\n y0 += sy;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"penUp = function() {\n mutable steps.push(`M4`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"penDown = function() {\n mutable steps.push(`M3`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"md`## Simulation Objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"leftBelt = {\n const c = Matter.Constraint.create({\n pointA: { x: 50, y: 50 },\n bodyB: carriage,\n length: 450,\n // -x for corners\n pointB: { x: 0, y: -50 },\n stiffness: 1\n });\n Matter.World.add(engine.world, c);\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"rightBelt = {\n const c = Matter.Constraint.create({\n pointA: { x: 800 - 50, y: 50 },\n bodyB: carriage,\n length: 450,\n pointB: { x: 0, y: -50 },\n stiffness: 1\n });\n Matter.World.add(engine.world, c);\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"// https://en.wikipedia.org/wiki/Pythagorean_theorem\nbeltmovers = {\n // to use this for a stepper motor, calculate how many steps move the pen a cm and issue that many steps\n // to the motor to change the length of the belt\n leftBelt.length = Math.sqrt(x * x + y * y);\n // distance from the left motor to the right motor\n const span = rightBelt.pointA.x - leftBelt.pointA.x;\n rightBelt.length = Math.sqrt((span - x) * (span - x) + y * y);\n\n return [leftBelt.length, rightBelt.length];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"carriage = {\n const c = Matter.Bodies.rectangle(300, 400, 50, 100);\n Matter.World.add(engine.world, c);\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"pen = {\n const ctx = canvas.querySelector(\"#drawingcanvas\").getContext('2d');\n const size = 2;\n ctx.fillStyle = 'white';\n\n // after rendering the position of the carriage, draw the point position on the overlay canvas\n return Matter.Events.on(renderer, \"afterRender\", () => {\n var point = carriage.position;\n if (viewof etch.checked) {\n ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"mutable penXY = [300, 300]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"mutable steps = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"md`## Matter.js Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"engine = {\n const e = Matter.Engine.create();\n // increase the gravity so everything isn't so bouncy\n e.world.gravity.scale = .05;\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"renderer = Matter.Render.create({ element: DOM.body, engine: engine })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"// change svg path curves to line segments\nlinearize = require('https://bundle.run/svg-linearize@1.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"Matter = require('matter-js@0.14.2/build/matter.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"