2c:null 2d:["$","title",null,{"children":"Woodgrain Overlay | Jasper Tran O'Leary | Observable"}] 32:T41c,socket = { socketResetDummy; const url = serverUrl; const protocol = "tss"; let socket = new WebSocket(url, protocol); socket.addEventListener("close", () => { mutable socketState = "closed"; }); socket.addEventListener("message", (event) => { // Note: .text() yields a promise that Observable waits on event.data.text().then((jsonText) => { let message = JSON.parse(jsonText); mutable latestMessage = message; if (message.type === "tssInstructions") { mutable receivedInstructions = message.data.slice(); } else if (message.type === "tssEnvelope") { mutable receivedEnvelopeDimensions = message.data; } else if (message.type === "tssMachineParams") { mutable machineState = message.data; } else if (message.type === "tssSelection") { mutable tssSelection = message.data.selection; } }); }); socket.addEventListener("open", () => { mutable socketState = "open"; }); invalidation.then(() => { socket.close(); }); return socket; }33:Ta1c,basicTss = (instructions, machineParams, paperScope) => { let parse = (thunksSoFar, restOfInsts, simulatedState) => { if (restOfInsts.length === 0) { return thunksSoFar; } let currInst = restOfInsts[0]; mutable test = instructions; let tokens = currInst.split(",").map((token) => token.trim()); let opcode = tokens[0]; if ( opcode === "M2" || opcode === "J2" || opcode === "M3" || opcode === "J3" ) { let parsedX = parseFloat(tokens[1]) * UPSCALE; let parsedY = parseFloat(tokens[2]) * UPSCALE; let newX = isNaN(parsedX) ? simulatedState.toolPosition.x : parsedX; let newY = isNaN(parsedY) ? simulatedState.toolPosition.y : parsedY; let currThunk = (homography) => { let transFromCoords = homography.transform( simulatedState.toolPosition.x, simulatedState.toolPosition.y ); let fromPt = new paperScope.Point( transFromCoords[0], transFromCoords[1] ); let transToCoords = homography.transform(newX, newY); let toPt = new paperScope.Point(transToCoords[0], transToCoords[1]); let pathWidth = (machineState.endMill && machineState.endMill.diameter * UPSCALE) || 1; let pathRectangle = new drawToolpathRectangle( fromPt, toPt, pathWidth, simulatedState.toolPosition.z, paperScope ); }; let newSimulatedState = { spindleOn: simulatedState.spindleOn, toolPosition: { x: newX, y: newY, z: simulatedState.toolPosition.z } }; let newThunks = thunksSoFar.concat(currThunk); return parse(newThunks, restOfInsts.slice(1), newSimulatedState); } if (opcode === "MZ" || opcode === "JZ") { let parsedZ = parseFloat(tokens[1]); let newZ = isNaN(parsedZ) ? simulatedState.toolPosition.z : parsedZ; mutable test.push(newZ); let newSimulatedState = { spindleOn: simulatedState.spindleOn, toolPosition: { x: simulatedState.toolPosition.x, y: simulatedState.toolPosition.y, z: newZ } }; return parse(thunksSoFar, restOfInsts.slice(1), newSimulatedState); } else { return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } }; let simulatedState = { toolPosition: { x: machineState.x || 0, y: machineState.y || 0, y: machineState.z || 0 }, spindleOn: false }; mutable test = []; return parse([], instructions, simulatedState); }34:T96b,carriageCollisionTss = (instructions, machineParams, paperScope) => { const carriageDims = new paper.Size(6 * UPSCALE, 6 * UPSCALE); let parse = (thunksSoFar, restOfInsts, simulatedState) => { if (restOfInsts.length === 0) { return thunksSoFar; } let currInst = restOfInsts[0]; let tokens = currInst.split(",").map((token) => token.trim()); let opcode = tokens[0]; if (opcode === "M2" || opcode === "J2") { let parsedX = parseFloat(tokens[1]) * UPSCALE; let parsedY = parseFloat(tokens[2]) * UPSCALE; let newX = isNaN(parsedX) ? simulatedState.toolPosition.x : parsedX; let newY = isNaN(parsedY) ? simulatedState.toolPosition.y : parsedY; let currThunk = (homography) => { let transFromCoords = homography.transform( simulatedState.toolPosition.x, simulatedState.toolPosition.y ); let fromPt = new paperScope.Point( transFromCoords[0], transFromCoords[1] ); let transToCoords = homography.transform(newX, newY); let toPt = new paperScope.Point(transToCoords[0], transToCoords[1]); let fromSquare = new paperScope.Path.Rectangle(fromPt, carriageDims, { insert: false }); let toSquare = new paperScope.Path.Rectangle(toPt, carriageDims, { insert: false }); let allPts = fromSquare.segments .concat(toSquare.segments) .map((segment) => { return { x: segment.point.x, y: segment.point.y }; }); let hull = convexHull.makeHull(allPts); let hullPath = new paperScope.Path({ segments: hull, fillColor: "blue" }); }; let newSimulatedState = { spindleOn: simulatedState.spindleOn, toolPosition: { x: newX, y: newY } }; let newThunks = thunksSoFar.concat(currThunk); return parse(newThunks, restOfInsts.slice(1), newSimulatedState); } if (opcode === "M3" || opcode === "J3") { return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } if (opcode === "MZ" || opcode === "JZ") { return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } }; let simulatedState = { toolPosition: { x: machineState.x || 0, y: machineState.y || 0 }, spindleOn: false }; return parse([], instructions, simulatedState); }35:T1074,stockCollisionTss = (instructions, machineParams, paperScope) => { const millDims = new paper.Size( machineState.endMill ? machineState.endMill.diameter * UPSCALE : 0.25 * UPSCALE, machineState.endMill ? machineState.endMill.diameter * UPSCALE : 0.25 * UPSCALE ); function makeNewLayerMap() { return new paperScope.Path.Rectangle({ size: [ mutable receivedEnvelopeDimensions.jobRegionHeight * UPSCALE, mutable receivedEnvelopeDimensions.jobRegionWidth * UPSCALE ], insert: false, fillColor: "orange" }); } let parse = (thunksSoFar, restOfInsts, simulatedState) => { if (restOfInsts.length === 0) { let finalThunk = () => { //REVERSE Object.entries(simulatedState.layerMaps).forEach((kv, layerIndex) => { let depth = kv[0]; let layerMap = kv[1]; layerMap.fillColor.hue += layerIndex * 30; layerMap.name = `z=${depth}`; paperScope.project.activeLayer.addChild(layerMap); }); }; return thunksSoFar.concat(finalThunk); } let currInst = restOfInsts[0]; let tokens = currInst.split(",").map((token) => token.trim()); let opcode = tokens[0]; if (opcode === "M2" || opcode === "J2") { // NOTE: since we don't render anything here we're not going to make a thunk // TODO: check for spindle on or off let parsedX = parseFloat(tokens[1]) * UPSCALE; let parsedY = parseFloat(tokens[2]) * UPSCALE; let newX = isNaN(parsedX) ? simulatedState.toolPosition.x : parsedX; let newY = isNaN(parsedY) ? simulatedState.toolPosition.y : parsedY; let transFromCoords = homography.transform( simulatedState.toolPosition.x, simulatedState.toolPosition.y ); let fromPt = new paperScope.Point(transFromCoords[0], transFromCoords[1]); let transToCoords = homography.transform(newX, newY); let toPt = new paperScope.Point(transToCoords[0], transToCoords[1]); let fromSquare = new paperScope.Path.Rectangle(fromPt, millDims, { insert: false }); let toSquare = new paperScope.Path.Rectangle(toPt, millDims, { insert: false }); let allPts = fromSquare.segments .concat(toSquare.segments) .map((segment) => { return { x: segment.point.x, y: segment.point.y }; }); let hull = convexHull.makeHull(allPts); let hullPath = new paperScope.Path({ segments: hull, insert: false }); // Carve it out of current layer map let currLayerMap = simulatedState.layerMaps[simulatedState.depth]; simulatedState.layerMaps[ simulatedState.depth ] = currLayerMap.subtract(hullPath, { insert: false }); simulatedState.toolPosition = { x: newX, y: newY }; return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } else if (opcode === "MZ" || opcode === "JZ") { let parsedZ = parseFloat(tokens[1]); simulatedState.depth = parsedZ; if (!simulatedState.layerMaps[simulatedState.depth]) { simulatedState.layerMaps[simulatedState.depth] = makeNewLayerMap(); } return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } else if (opcode === "C6" || opcode === "C7") { simulatedState.spindleOn = opcode === "C6"; return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } else if (opcode === "M3" || opcode === "J3") { let warningThunk = () => { let unsupportedWarning = new paper.PointText({ point: [125, 500], content: "Warning: 3-axis moves not supported with this TSS.", fillColor: "yellow", fontFamily: "Inter", fontWeight: "bold", fontSize: 50 }); }; return thunksSoFar.concat(warningThunk); } else { return parse(thunksSoFar, restOfInsts.slice(1), simulatedState); } }; let simulatedState = { toolPosition: { x: machineState.x || 0, y: machineState.y || 0 }, spindleOn: false, depth: 1, layerMaps: { "1": makeNewLayerMap() } }; return parse([], instructions, simulatedState); }36:T420,### Considerations for Generating Visual Elements Paper.js has a highly mutable approach where to generate a visual element, you need to call the associated constructor with a given canvas, where the constructor will immediately mutate the canvas and render the element. To deal with this for now, rather than returning the visual element, I return a thunk—a function that closes over a provided paperjs canvas scope (`paperScope`) and then can just be called later on. Also this is using a tail-call optimization approach, even though firefox does not support it. For longer toolpaths we will overflow the stack. 3-axis moves are currently not supported with a 2.5D approach. One approach would be to defer them to if/when we pass them into a 3js scene, and/or defer them and do ray-plane interaction for each z-plane and render a point. **Todo** - Deal with lack of TCO. - Eventually create different layers for different z-heights. This depends on the fact that there are no 3-axis moves. - Export different layers into a 3js Scene for 3D viewing.37:T4fb,function generateDepthAnnotation(anchor, ps) { function drawAnnotation() { let factor = 3; let mlWidth = 5; let cutSpan = 40; let topBottomCutSpan = 20; let cutWidth = 1; let mlHeight = mutable machineState.thickness * UPSCALE * factor; let mlFrom = new ps.Point(anchor.x + mlWidth * 2, anchor.y); let mlTo = new ps.Point(anchor.x + mlWidth * 2, anchor.y + mlHeight); let mainline = new ps.Path.Line(mlFrom, mlTo); mainline.strokeWidth = mlWidth; mainline.strokeColor = "white"; let drawHorizLine = (depth, spanWidth, isDashed) => { let dFrom = new ps.Point( anchor.x + mlWidth * 2, anchor.y + mlHeight + depth * factor * UPSCALE ); let dTo = new ps.Point( anchor.x + mlWidth * 2 + spanWidth, anchor.y + mlHeight + depth * factor * UPSCALE ); let cutline = new ps.Path.Line(dFrom, dTo); cutline.strokeWidth = cutWidth; cutline.strokeColor = "white"; if (isDashed) { cutline.dashArray = [2, 1]; } }; parsedDepths.forEach((depth) => drawHorizLine(depth, cutSpan, true)); drawHorizLine(0, topBottomCutSpan, false); drawHorizLine(-mutable machineState.thickness, topBottomCutSpan, false); } return drawAnnotation; }38:T4e6,## Adding Back in Perspective Correction We go through the whole process like with the plotter, only this time, we need to interactively construct a "workspace" as a subspace of the Shopbot's entire work envelope. This is because the Shopbot's work envelope is too large to cast a projection onto, at least for right now. So, we need to maker to build a workspace (with its own _envelope_) as follows: 1. Move the bit to a proposed origin. 2. Zero the X and Y axes on the shopbot (`Z2`). 3. Ask the maker to propose a height and width for the workspace envelope. It is the maker's responsibility to ensure that this envelope won't extend outside of the machine's maximal work envelop. 4. Generate a contingent digital envelope. 5. Generate the movement commands to move the bit to the physical locations. 6. One by one, move the bit to corners starting from the upper left (origin) and continuing in a clockwise progression. After each move, prompt the user to drag the the corner to where the bit is. In the future we might have the machine actually drill guide holes. Note that the GUI and interaction has to happen on the drawing client's end because we need to have the projection full screen the entire time. Check there to see the implementation.39:T7d9,makeEnvelope = (ps, height, width) => { return () => { let originPt = new ps.Point(0, 0); let endPt = new ps.Point(height * UPSCALE, width * UPSCALE); let rectPath = new ps.Path.Rectangle(originPt, endPt); rectPath.strokeColor = "red"; rectPath.strokeWidth = 2; rectPath.isEnvelope = true; // Add the envelope to its own layer which is not usually active, so we can clear the active layer let firstLayer = ps.project.activeLayer; let secondLayer = ps.project.layers[1] || new ps.Layer(); secondLayer.removeChildren(); secondLayer.addChild(rectPath); firstLayer.activate(); let origRectPath = rectPath.clone({ insert: false }); let tool = ps.tool || new ps.Tool(); let activeEnvelopeSegment = null; tool.onMouseDown = (event, hitOptions) => { let envPathOptions = { segments: true, stroke: true, tolerance: 25 }; let envPathHitResult = rectPath.hitTest(event.point, envPathOptions); if ( rectPath.selected && envPathHitResult && envPathHitResult.type === "segment" ) { activeEnvelopeSegment = envPathHitResult.segment; } }; tool.onMouseDrag = (event) => { if (rectPath.selected && activeEnvelopeSegment) { activeEnvelopeSegment.point = activeEnvelopeSegment.point.add( event.delta ); } }; tool.onMouseUp = (event) => { activeEnvelopeSegment = null; let unpackPoint = (pt) => [pt.x, pt.y]; let origPoints = origRectPath.segments .map((segment) => segment.point.clone()) .map(unpackPoint) .flat(); let transPoints = rectPath.segments .map((segment) => segment.point.clone()) .map(unpackPoint) .flat(); let h = PerspT(origPoints, transPoints); mutable homography = h; }; rectPath.selected = true; return { height: height, width: width, rectPath: rectPath, tool: tool }; }; }3a:T20ca,PerspT = { var numeric = {}; numeric.dim = function dim(x) { var y, z; if (typeof x === "object") { y = x[0]; if (typeof y === "object") { z = y[0]; if (typeof z === "object") { return numeric._dim(x); } return [x.length, y.length]; } return [x.length]; } return []; }; numeric._foreach2 = function _foreach2(x, s, k, f) { if (k === s.length - 1) { return f(x); } var i, n = s[k], ret = Array(n); for (i = n - 1; i >= 0; i--) { ret[i] = _foreach2(x[i], s, k + 1, f); } return ret; }; numeric.cloneV = function (x) { var _n = x.length; var i, ret = Array(_n); for (i = _n - 1; i !== -1; --i) { ret[i] = x[i]; } return ret; }; numeric.clone = function (x) { if (typeof x !== "object") return x; var V = numeric.cloneV; var s = numeric.dim(x); return numeric._foreach2(x, s, 0, V); }; numeric.diag = function diag(d) { var i, i1, j, n = d.length, A = Array(n), Ai; for (i = n - 1; i >= 0; i--) { Ai = Array(n); i1 = i + 2; for (j = n - 1; j >= i1; j -= 2) { Ai[j] = 0; Ai[j - 1] = 0; } if (j > i) { Ai[j] = 0; } Ai[i] = d[i]; for (j = i - 1; j >= 1; j -= 2) { Ai[j] = 0; Ai[j - 1] = 0; } if (j === 0) { Ai[0] = 0; } A[i] = Ai; } return A; }; numeric.rep = function rep(s, v, k) { if (typeof k === "undefined") { k = 0; } var n = s[k], ret = Array(n), i; if (k === s.length - 1) { for (i = n - 2; i >= 0; i -= 2) { ret[i + 1] = v; ret[i] = v; } if (i === -1) { ret[0] = v; } return ret; } for (i = n - 1; i >= 0; i--) { ret[i] = numeric.rep(s, v, k + 1); } return ret; }; numeric.identity = function (n) { return numeric.diag(numeric.rep([n], 1)); }; numeric.inv = function inv(a) { var s = numeric.dim(a), abs = Math.abs, m = s[0], n = s[1]; var A = numeric.clone(a), Ai, Aj; var I = numeric.identity(m), Ii, Ij; var i, j, k, x; for (j = 0; j < n; ++j) { var i0 = -1; var v0 = -1; for (i = j; i !== m; ++i) { k = abs(A[i][j]); if (k > v0) { i0 = i; v0 = k; } } Aj = A[i0]; A[i0] = A[j]; A[j] = Aj; Ij = I[i0]; I[i0] = I[j]; I[j] = Ij; x = Aj[j]; for (k = j; k !== n; ++k) Aj[k] /= x; for (k = n - 1; k !== -1; --k) Ij[k] /= x; for (i = m - 1; i !== -1; --i) { if (i !== j) { Ai = A[i]; Ii = I[i]; x = Ai[j]; for (k = j + 1; k !== n; ++k) Ai[k] -= Aj[k] * x; for (k = n - 1; k > 0; --k) { Ii[k] -= Ij[k] * x; --k; Ii[k] -= Ij[k] * x; } if (k === 0) Ii[0] -= Ij[0] * x; } } } return I; }; numeric.dotMMsmall = function dotMMsmall(x, y) { var i, j, k, p, q, r, ret, foo, bar, woo, i0; p = x.length; q = y.length; r = y[0].length; ret = Array(p); for (i = p - 1; i >= 0; i--) { foo = Array(r); bar = x[i]; for (k = r - 1; k >= 0; k--) { woo = bar[q - 1] * y[q - 1][k]; for (j = q - 2; j >= 1; j -= 2) { i0 = j - 1; woo += bar[j] * y[j][k] + bar[i0] * y[i0][k]; } if (j === 0) { woo += bar[0] * y[0][k]; } foo[k] = woo; } ret[i] = foo; } return ret; }; numeric.dotMV = function dotMV(x, y) { var p = x.length, i; var ret = Array(p), dotVV = numeric.dotVV; for (i = p - 1; i >= 0; i--) { ret[i] = dotVV(x[i], y); } return ret; }; numeric.dotVV = function dotVV(x, y) { var i, n = x.length, i1, ret = x[n - 1] * y[n - 1]; for (i = n - 2; i >= 1; i -= 2) { i1 = i - 1; ret += x[i] * y[i] + x[i1] * y[i1]; } if (i === 0) { ret += x[0] * y[0]; } return ret; }; numeric.transpose = function transpose(x) { var i, j, m = x.length, n = x[0].length, ret = Array(n), A0, A1, Bj; for (j = 0; j < n; j++) ret[j] = Array(m); for (i = m - 1; i >= 1; i -= 2) { A1 = x[i]; A0 = x[i - 1]; for (j = n - 1; j >= 1; --j) { Bj = ret[j]; Bj[i] = A1[j]; Bj[i - 1] = A0[j]; --j; Bj = ret[j]; Bj[i] = A1[j]; Bj[i - 1] = A0[j]; } if (j === 0) { Bj = ret[0]; Bj[i] = A1[0]; Bj[i - 1] = A0[0]; } } if (i === 0) { A0 = x[0]; for (j = n - 1; j >= 1; --j) { ret[j][0] = A0[j]; --j; ret[j][0] = A0[j]; } if (j === 0) { ret[0][0] = A0[0]; } } return ret; }; // END NUMERIC SHIM function round(num) { return Math.round(num * 10000000000) / 10000000000; } function getNormalizationCoefficients(srcPts, dstPts, isInverse) { if (isInverse) { var tmp = dstPts; dstPts = srcPts; srcPts = tmp; } var r1 = [ srcPts[0], srcPts[1], 1, 0, 0, 0, -1 * dstPts[0] * srcPts[0], -1 * dstPts[0] * srcPts[1] ]; var r2 = [ 0, 0, 0, srcPts[0], srcPts[1], 1, -1 * dstPts[1] * srcPts[0], -1 * dstPts[1] * srcPts[1] ]; var r3 = [ srcPts[2], srcPts[3], 1, 0, 0, 0, -1 * dstPts[2] * srcPts[2], -1 * dstPts[2] * srcPts[3] ]; var r4 = [ 0, 0, 0, srcPts[2], srcPts[3], 1, -1 * dstPts[3] * srcPts[2], -1 * dstPts[3] * srcPts[3] ]; var r5 = [ srcPts[4], srcPts[5], 1, 0, 0, 0, -1 * dstPts[4] * srcPts[4], -1 * dstPts[4] * srcPts[5] ]; var r6 = [ 0, 0, 0, srcPts[4], srcPts[5], 1, -1 * dstPts[5] * srcPts[4], -1 * dstPts[5] * srcPts[5] ]; var r7 = [ srcPts[6], srcPts[7], 1, 0, 0, 0, -1 * dstPts[6] * srcPts[6], -1 * dstPts[6] * srcPts[7] ]; var r8 = [ 0, 0, 0, srcPts[6], srcPts[7], 1, -1 * dstPts[7] * srcPts[6], -1 * dstPts[7] * srcPts[7] ]; var matA = [r1, r2, r3, r4, r5, r6, r7, r8]; var matB = dstPts; var matC; try { matC = numeric.inv(numeric.dotMMsmall(numeric.transpose(matA), matA)); } catch (e) { console.log(e); return [1, 0, 0, 0, 1, 0, 0, 0]; } var matD = numeric.dotMMsmall(matC, numeric.transpose(matA)); var matX = numeric.dotMV(matD, matB); for (var i = 0; i < matX.length; i++) { matX[i] = round(matX[i]); } matX[8] = 1; return matX; } function PerspT(srcPts, dstPts) { if ( (typeof window !== "undefined" && window === this) || this === undefined ) { return new PerspT(srcPts, dstPts); } this.srcPts = srcPts; this.dstPts = dstPts; this.coeffs = getNormalizationCoefficients(this.srcPts, this.dstPts, false); this.coeffsInv = getNormalizationCoefficients( this.srcPts, this.dstPts, true ); return this; } PerspT.prototype = { transform: function (x, y) { var coordinates = []; coordinates[0] = (this.coeffs[0] * x + this.coeffs[1] * y + this.coeffs[2]) / (this.coeffs[6] * x + this.coeffs[7] * y + 1); coordinates[1] = (this.coeffs[3] * x + this.coeffs[4] * y + this.coeffs[5]) / (this.coeffs[6] * x + this.coeffs[7] * y + 1); return coordinates; }, transformInverse: function (x, y) { var coordinates = []; coordinates[0] = (this.coeffsInv[0] * x + this.coeffsInv[1] * y + this.coeffsInv[2]) / (this.coeffsInv[6] * x + this.coeffsInv[7] * y + 1); coordinates[1] = (this.coeffsInv[3] * x + this.coeffsInv[4] * y + this.coeffsInv[5]) / (this.coeffsInv[6] * x + this.coeffsInv[7] * y + 1); return coordinates; } }; return PerspT; }3b:Tc1f,/* * Convex hull algorithm - Library (compiled from TypeScript) * * Copyright (c) 2021 Project Nayuki * https://www.nayuki.io/page/convex-hull-algorithm * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Lesser General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program (see COPYING.txt and COPYING.LESSER.txt). * If not, see . */ convexHull = (function (convexhull) { // Returns a new array of points representing the convex hull of // the given set of points. The convex hull excludes collinear points. // This algorithm runs in O(n log n) time. function makeHull(points) { var newPoints = points.slice(); newPoints.sort(convexhull.POINT_COMPARATOR); return convexhull.makeHullPresorted(newPoints); } convexhull.makeHull = makeHull; // Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time. function makeHullPresorted(points) { if (points.length <= 1) return points.slice(); // Andrew's monotone chain algorithm. Positive y coordinates correspond to "up" // as per the mathematical convention, instead of "down" as per the computer // graphics convention. This doesn't affect the correctness of the result. var upperHull = []; for (var i = 0; i < points.length; i++) { var p = points[i]; while (upperHull.length >= 2) { var q = upperHull[upperHull.length - 1]; var r = upperHull[upperHull.length - 2]; if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop(); else break; } upperHull.push(p); } upperHull.pop(); var lowerHull = []; for (var i = points.length - 1; i >= 0; i--) { var p = points[i]; while (lowerHull.length >= 2) { var q = lowerHull[lowerHull.length - 1]; var r = lowerHull[lowerHull.length - 2]; if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop(); else break; } lowerHull.push(p); } lowerHull.pop(); if ( upperHull.length == 1 && lowerHull.length == 1 && upperHull[0].x == lowerHull[0].x && upperHull[0].y == lowerHull[0].y ) return upperHull; else return upperHull.concat(lowerHull); } convexhull.makeHullPresorted = makeHullPresorted; function POINT_COMPARATOR(a, b) { if (a.x < b.x) return -1; else if (a.x > b.x) return +1; else if (a.y < b.y) return -1; else if (a.y > b.y) return +1; else return 0; } convexhull.POINT_COMPARATOR = POINT_COMPARATOR; return convexhull; })({})3c:[] 30:{"id":"e6bfd553ad2796b0","slug":"woodgrain-overlay","title":"Woodgrain Overlay","thumbnail":"f9c5fdb2ac2e24813f4767bda5596ca1bed4c8e5859b8b703c2ad0bb436cab06","access_level":"public","create_time":"$D2022-06-29T23:42:13.801Z","update_time":"$D2023-04-10T21:09:09.967Z","view_time":null,"first_public_time":"$D2023-01-25T18:53:36.898Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bb910cbb860f0cef","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":"starter_2024","bio":""},"version":1440,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f17f6741d5f43f60","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":null,"bio":""},{"type":"individual","id":"3e127b126f65bc31","login":"gabjohar","name":"gabjohar","avatar_url":"https://avatars-next.observableusercontent.com/942ddf35008bb245f796533c56986a57716cc694598d77556c9ea2c3c5e3b488","tier":null,"bio":""}],"members":[{"type":"individual","id":"f17f6741d5f43f60","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":null,"role":"editor"},{"type":"individual","id":"9ed799c6fb088b1a","login":"peek","name":"Nadya Peek","avatar_url":"https://avatars-next.observableusercontent.com/114b3abfe85d9a9e19d39d346f27dfd0e5653d6fa17770a479edcd6436672920","tier":null,"role":"editor"},{"type":"individual","id":"3e127b126f65bc31","login":"gabjohar","name":"gabjohar","avatar_url":"https://avatars-next.observableusercontent.com/942ddf35008bb245f796533c56986a57716cc694598d77556c9ea2c3c5e3b488","tier":null,"role":"viewer"}],"comments":[{"id":"a77bc49bdb42afff","reply_to_id":null,"content":"The url is hardcoded, I think it should be serverUrl","create_time":"$D2022-08-29T19:18:15.885Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e03d30b651790cf0","login":"elmisback","name":"Edward Misback","avatar_url":"https://avatars-next.observableusercontent.com/9a42c09ac3fb39913eeacae071d5ba669ac49bf75c82372d0d717ec0acb59024","tier":null}},{"id":"5914fe597858cd80","reply_to_id":"a77bc49bdb42afff","content":"The intro notebook's tssSelection message puts the selection into message.data, not message.data.selection","create_time":"$D2022-08-29T19:26:15.943Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e03d30b651790cf0","login":"elmisback","name":"Edward Misback","avatar_url":"https://avatars-next.observableusercontent.com/9a42c09ac3fb39913eeacae071d5ba669ac49bf75c82372d0d717ec0acb59024","tier":null}},{"id":"db7713c81ca90615","reply_to_id":"a77bc49bdb42afff","content":"Oops that's a definite bug on my part...","create_time":"$D2022-08-29T20:01:50.517Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"f17f6741d5f43f60","login":"jtranoleary","name":"Jasper Tran O'Leary","avatar_url":"https://avatars-next.observableusercontent.com/7b1fca3ec60e80d6d0d1652c3cc957a07a96f4415cca592cee189df0f44ab416","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Woodgrain Overlay","cells":[{"id":3,"value":"# Woodgrain Overlay\nThe purpose of this notebook is to:\n- Connect to the server,\n- Receive instructions from the intro notebook or the authoring notebook,\n- Render those instructions according to a styling configuration called a (TSS), and\n- Project to the canvas onto the Shopbot's bed such that marks on the bed correspond to where the machine will actually move.\n\nBelow is the button to open the socket, then the canvas, and a button to full-screen the canvas. Everything that follows will explain how the overlay works.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"{\n let socketOpen = socketState === \"open\";\n let text = socketOpen ? \"Close Socket\" : \"Open Socket\";\n let button = html``;\n button.onclick = () => {\n if (socketOpen) {\n socket.close();\n } else {\n mutable socketResetDummy = new Date().getTime();\n }\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"mutable socketState = \"closed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"fullscreen = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"canvas = {\n let size = 20;\n let canvas = this || DOM.canvas(1440, 480);\n let ps =\n canvas.ps ||\n (() => {\n let ps = new paper.PaperScope();\n ps.setup(canvas);\n // Flip Y axis so that it points \"up\" the page to match the Shopbot. This should only occur once to avoid constant flipping.\n ps.view.scale(1, -1);\n return ps;\n })();\n canvas.ps = ps;\n makeEnvelope(\n ps,\n receivedEnvelopeDimensions.envelopeWidth,\n receivedEnvelopeDimensions.envelopeHeight\n )();\n canvas.style.backgroundColor = \"black\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"## Network Communication","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":772,"value":"⚠️ _Note: I've made a separate server for each person doing the co-design study. Please change the right hand side of the line `let serverName = ...` to match your name._ ⚠️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"serverUrl = {\n let serverName = \"machineagency-shopbot-server\";\n return `wss://${serverName}.herokuapp.com`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"mutable latestMessage = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"mutable receivedInstructions = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"receivedInstructions.filter((el) => !el.split)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"mutable receivedEnvelopeDimensions = ({\n envelopeHeight: 28.5,\n envelopeWidth: 51\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"mutable tssSelection = \"basic\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"mutable socketResetDummy = new Date().getTime()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"### Machine State Keeping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"mutable machineState = ({\n x: null,\n y: null,\n z: null,\n busy: null,\n endMill: null,\n asidePosition: {\n x: null,\n y: null,\n z: null\n },\n overlay: {\n handlesSet: false\n },\n maxZDepth: null,\n // True iff we have zeroed axes and the material has not been moved.\n validZero: {\n xy: false,\n z: false\n },\n feedAndSpeedSet: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"{\n if (latestMessage.type === \"fabricatorData\") {\n let newMachineState = structuredClone(mutable machineState);\n newMachineState.x = mutable latestMessage.x;\n newMachineState.y = mutable latestMessage.y;\n newMachineState.z = mutable latestMessage.z;\n newMachineState.busy = mutable latestMessage.status !== 0;\n mutable machineState = newMachineState;\n return html`⚙️ Updated machine state with data from the machine at ${new Date().toLocaleString()}`;\n }\n return html`✉️ Received a message but didn't update machine state.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"## TSS Implementations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1283,"value":"A TSS takes a set of instructions and machine parameters (and a paper scope object) and outputs an array of functions that, when passed to the `render` function, generate a different visualization per-TSS for the same set of instructions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1308,"value":"mutable test = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"function drawToolpathRectangle(fromPt, toPt, width, depth, ps) {\n let centerlineVec = fromPt.subtract(toPt);\n let orthogonalVec = new ps.Point(-centerlineVec.y, centerlineVec.x);\n let orthonormal = orthogonalVec.normalize();\n let points = [\n toPt.add(orthonormal.multiply(-0.5 * width)),\n toPt.add(orthonormal.multiply(+0.5 * width)),\n fromPt.add(orthonormal.multiply(+0.5 * width)),\n fromPt.add(orthonormal.multiply(-0.5 * width))\n ];\n let path = new ps.Path(points);\n path.fillColor = depth <= 0 ? \"white\" : \"green\";\n path.name = depth <= 0 ? \"toolpathCut\" : \"toolpathTravel\";\n return path;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1154,"value":"## Rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"render = (ps) => {\n ps.project.activeLayer.removeChildren();\n if (socketState === \"closed\") {\n let connectionWarning = new paper.PointText({\n point: [125, 500],\n content: \"Warning: no connection to the server.\",\n fillColor: \"red\",\n fontFamily: \"Inter\",\n fontWeight: \"bold\",\n fontSize: 64\n });\n connectionWarning.scale(1, -1);\n ps.project.activeLayer.addChild(connectionWarning);\n return html`🔌 No connection.`;\n }\n let tssToUse;\n if (tssSelection === \"carriageCollision\") {\n tssToUse = carriageCollisionTss;\n } else if (tssSelection === \"stockCollision\") {\n tssToUse = stockCollisionTss;\n } else {\n tssToUse = basicTss;\n }\n let thunks = tssToUse(receivedInstructions, {}, ps);\n thunks.forEach((thunk) => thunk(homography));\n drawAnnotations();\n return html`🖼 Rendered ${new Date().toLocaleString()}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"render(canvas.ps)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"UPSCALE = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"We'll use a utility function that draws a not-necessarily-axis-aligned rectangle from one point to another. This rectangle represents the move of the spindle between those two points, reflecting a set mill width. We need to draw rectangles instead of using paths because we also need to scale the widths of the toolpath sections--this is handled by the homography function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1316,"value":"## Annotating with Depth Information","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1321,"value":"function drawAnnotations() {\n let ps = canvas.ps;\n let tpPaths = ps.project.activeLayer.getItems({ name: \"toolpathCut\" });\n let group = new ps.Group(tpPaths);\n let boundOffset = 5;\n let offsetBounds = group.bounds.expand(boundOffset);\n let annotateBounds = new ps.Path.Rectangle(offsetBounds);\n annotateBounds.strokeColor = \"white\";\n annotateBounds.strokeWidth = 1;\n annotateBounds.dashArray = [3, 2];\n let annotateAnchor = new ps.Point(\n offsetBounds.x + offsetBounds.width,\n offsetBounds.y\n );\n let depthAnnotation = generateDepthAnnotation(annotateAnchor, ps)();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"parsedDepths = {\n // TODO: for now ignore M3/J3\n let zMoves = receivedInstructions.filter((inst) => inst[1] === \"Z\");\n let depths = zMoves.map((inst) => {\n let toks = inst.split(\",\");\n return parseFloat(toks[1]);\n });\n return depths.filter((depth) => depth < 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"mutable homography = PerspT([0, 0, 1, 0, 1, 1, 0, 1], [0, 0, 1, 0, 1, 1, 0, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"## Experimental Stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"{\n let layerMaps = canvas.ps.project.activeLayer.children.filter(\n (child) => child.name\n );\n return layerMaps.map((layerMap) => layerMap.name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"{\n let layerMaps = canvas.ps.project.activeLayer.children.filter(\n (child) => child.name\n );\n layerMaps.forEach((layerMap, layerIndex) => {\n if (layerIndex === displayedLayerIndex) {\n layerMap.visible = true;\n } else {\n layerMap.visible = false;\n }\n });\n return htl.html`💡 Showing layer #${displayedLayerIndex} (#0 is topmost)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"mutable rangeTest = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"viewof displayedLayerIndex = {\n let layerMaps = canvas.ps.project.activeLayer.children.filter(\n (child) => child.name\n );\n let rangeDom = Inputs.range([0, layerMaps.length - 1], {\n step: 1,\n value: 0,\n reduce: (event) => {\n mutable rangeTest = event;\n }\n });\n return rangeDom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"paper = require(\"paper\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"### Convex Hull Implementation (courtesy Project Nayuki)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":579,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"convexHull.makeHull([\n { x: 0, y: 0 },\n { x: 10, y: 0 },\n { x: 10, y: 10 },\n { x: 0, y: 10 },\n { x: 5, y: 5 }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 31:"$30:body"