31:T40e,function instsFromDrawingPad(tx, ty, scale, rotate) { let maybeCurves = drawingPad.ps.project.activeLayer.getItems({ name: "profileCurve" }); if (maybeCurves.length === 0) { return []; } let curves = maybeCurves.map((curve) => curve.clone({ insert: false })); let curveGroup = new paper.Group(curves); curveGroup.translate(new paper.Point(tx * UPSCALE, ty * UPSCALE)); curveGroup.scale(scale); curveGroup.rotate(rotate); curveGroup.remove(); let pointSets = curves.map((curve) => { let truncate = (num) => { return Math.round(num * 10000) / 10000; }; if (!curve.segments) { return []; } let points = curve.segments.map((segment) => [ truncate(segment.point.x / UPSCALE), truncate(segment.point.y / UPSCALE) ]); let prologue = [`JZ,`]; let insts = points.map((point) => `M2,${point[0]},${point[1]}`); if (points.length > 0 && curve.closed) { insts.push(`M2,${points[0][0]},${points[0][1]}`); } return insts; }); return pointSets; }32:T476,new Promise((resolve) => { resolve(html`

`); }).then((domElement) => { let materialParams = { width: jobRegionWidth, height: jobRegionHeight, thickness: thickness }; let vizSpace = new VisualizationSpace(domElement, materialParams); // afterDepthInstructions.forEach((extrusion, index) => { // if (!extrusion.forEach || extrusion.length === 0) { // return; // } // let endingPoint = { // x: parseFloat(extrusion[extrusion.length - 1].split(",")[1]), // y: parseFloat(extrusion[extrusion.length - 1].split(",")[2]), // z: depthToCut // }; // let tpGroup = VisualizationInterpreters.sbpBasicViz( // extrusion, // materialParams, // endingPoint // ); // vizSpace.addVizWithName(tpGroup, `basic viz ${index}`); // }); let tpGroup = VisualizationInterpreters.sbpBasicViz( afterDepthInstructions.flat(), materialParams ); vizSpace.addVizWithName(tpGroup, `basic viz`); domElement.childNodes[0].style.border = "1px solid black"; invalidation.then(() => vizSpace.removeAllViz()); return domElement; })33:T8e3,function extrudeInstructions( profileInstructions, depthToCut, materialThickness, tabSegments ) { if (!depthToCut || !materialThickness) { throw new Error("Please specify depth to cut and material thickness."); } const handleLastLayer = (profileInsts, depth) => { return profileInsts .map((inst, instIdx) => { let toks = inst.split(","); let opcode = toks[0]; if (opcode === "M2" || opcode === "J2") { if ( Math.abs(depth) >= thickness && tabSegments && tabSegments.includes(instIdx) ) { let x = toks[1]; let y = toks[2]; return [`JZ,${-depth + stepdown}`, `J2,${x},${y}`, `MZ,${-depth}`]; } } return inst; }) .flat(); }; const epsilon = 0.03125; const spindleOn = "C6"; const spindleOff = "C7"; if (profileInstructions.length === 0) { return []; } if (depthToCut > materialThickness) { // throw new Error(`Cutting at a depth ${depthToCut} will cut into the bed.`); } let numFullPasses = Math.floor(numPasses); let depths = [...Array(numFullPasses).keys()] .map((layerNum) => (layerNum + 1) * stepdown) .concat(numPasses - numFullPasses > 0 ? [depthToCut] : []); if (depthToCut === materialThickness) { depths[depths.length - 1] += epsilon; } let profileFirstX = parseFloat(profileInstructions[0].split(",")[1]); let profileFirstY = parseFloat(profileInstructions[0].split(",")[2]); // return profileFirstX; // Per-layer procedure: // 1. Move to travel height (ideally different per layer) // 2. Move to profile first xy point // 3. Move z to depth at plunge feed rate // 4. Execute profile XY instructions return depths.map((depth, depthIndex) => { let layerComment = `' Begin layer z=${-depth}`; let moveToTravelZ = `JZ,${travelHeight}`; let moveToCurveStart = `J2,${profileFirstX},${profileFirstY}`; let plunge = `MZ,${-depth}`; return [layerComment, moveToTravelZ, moveToCurveStart, plunge].concat( // Discard the first XY move since we're already there depthIndex === depths.length - 1 ? handleLastLayer(profileInstructions, depth) : profileInstructions.slice(1) ); }); }34:T1ce1,VisualizationSpace = /** @class */ (function () { function VisualizationSpace(containerDom, stockDimensions) { this.containerDom = containerDom; this.scene = this.initScene(); this.envelopeGroup = this.createEnvelopeGroup(stockDimensions); this.vizGroupWrapper = new THREE.Group(); this.scene.add(this.envelopeGroup); this.scene.add(this.vizGroupWrapper); this.camera = this.initCamera( this.scene, this.envelopeGroup.position, true ); this.renderRequested = false; this.initPostDomLoadLogistics(); // For debugging window.vs = this; } VisualizationSpace.prototype.componentWillUnmount = function () { this.removeAllViz(); }; VisualizationSpace.prototype.cloneCamera = function () { return this.camera.clone(); }; VisualizationSpace.prototype.cloneScene = function () { return this.scene.clone(); }; Object.defineProperty(VisualizationSpace.prototype, "domElement", { get: function () { if (!this.threeRenderer) { return undefined; } return this.threeRenderer.domElement; }, enumerable: false, configurable: true }); VisualizationSpace.prototype.addVizWithName = function ( vizGroup, interpreterName ) { // if (this.vizGroupWrapper.children.length >= 1) { // console.error( // "Cannot add another vizGroup without clearing the" + " existing one." // ); // return; // } vizGroup.name = interpreterName; this.vizGroupWrapper.add(vizGroup); this.threeRenderScene(); }; VisualizationSpace.prototype.getCurrentVizNames = function () { return this.vizGroupWrapper.children.map(function (alsoCalledVizGroup) { return alsoCalledVizGroup.name; }); }; VisualizationSpace.prototype.removeAllViz = function () { // TODO: cast as THREE.Mesh and call dispose on geom and mat var wrappedVizGroup = this.vizGroupWrapper.children[0]; if (!wrappedVizGroup) { return; } wrappedVizGroup.children.forEach(function (child) { child.geometry.dispose(); child.material.dispose(); child.remove(); }); this.vizGroupWrapper.children = []; this.threeRenderScene(); }; VisualizationSpace.prototype.createExampleToolpath = function () { var line = new THREE.LineCurve3( new THREE.Vector3(0, 0, 0), new THREE.Vector3(100, 100, 40) ); var geom = new THREE.TubeBufferGeometry(line, 64, 1, 64, false); var material = new THREE.MeshToonMaterial({ color: 0xe44242, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geom, material); return mesh; }; VisualizationSpace.prototype.initPostDomLoadLogistics = function () { this.threeRenderer = this.initThreeRenderer(); this.controls = this.initControls(this.camera, this.threeRenderer); this.threeRenderScene(); // let animate = () => { // let maxFramerate = 20; // setTimeout(() => { // requestAnimationFrame(animate); // }, 1000 / maxFramerate); // this.threeRenderScene(); // }; // animate(); }; VisualizationSpace.prototype.initScene = function () { var scene = new THREE.Scene(); // scene.background = new THREE.Color(0x23241f); scene.background = new THREE.Color(0xffffff); var topDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.75); var leftDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.5); var rightDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.25); var ambientLight = new THREE.AmbientLight(0x404040); leftDirectionalLight.position.set(-1.0, 0.0, 0.0); rightDirectionalLight.position.set(0.0, 0.0, 1.0); scene.add(topDirectionalLight); scene.add(leftDirectionalLight); scene.add(rightDirectionalLight); scene.add(ambientLight); return scene; }; VisualizationSpace.prototype.initCamera = function ( scene, centerPoint, isOrtho ) { var camera; // var aspect = window.innerWidth / window.innerHeight; var aspect = 1; var viewSize = 50; if (isOrtho) { camera = new THREE.OrthographicCamera( -viewSize * aspect, viewSize * aspect, viewSize, -viewSize, 1, 1000 ); camera.up = new THREE.Vector3(0, -1, 0); camera.zoom = 2; camera.updateProjectionMatrix(); camera.frustumCulled = false; camera.position.set(-25, -25, -25); // I don't know why this works camera.lookAt(centerPoint); } else { var fov = 50; camera = new THREE.PerspectiveCamera(fov, aspect, 0.01, 30000); camera.lookAt(centerPoint); camera.position.set(-500, 500, 500); camera.updateProjectionMatrix(); } return camera; }; VisualizationSpace.prototype.initControls = function (camera, renderer) { var controls = new OrbitControls(camera, renderer.domElement); controls.rotateSpeed = 1.0; controls.zoomSpeed = 0.8; controls.panSpeed = 0.8; controls.addEventListener("change", this.requestRenderScene.bind(this)); controls.enableDamping = true; controls.dampingFactor = 0.5; return controls; }; VisualizationSpace.prototype.initThreeRenderer = function () { var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(720, 480); if (this.containerDom) { this.containerDom.appendChild(renderer.domElement); } else { throw new Error("No container DOM element provided."); } return renderer; }; VisualizationSpace.prototype.requestRenderScene = function () { if (!this.renderRequested) { this.renderRequested = true; requestAnimationFrame(this.threeRenderScene.bind(this)); } }; VisualizationSpace.prototype.threeRenderScene = function () { // this.controls.update(); // let deltaSeconds = this.clock.getDelta(); // this.mixers.forEach((mixer) => { // mixer.update(deltaSeconds); // }); if (!this.controls || !this.threeRenderer) { return; } this.renderRequested = false; this.controls.update(); this.threeRenderer.render(this.scene, this.camera); }; VisualizationSpace.prototype.createEnvelopeGroup = function ( stockDimensions ) { // FIXME: eventually have work envelopes be a 3-vector var dimensions = { width: stockDimensions.width, height: stockDimensions.thickness, length: stockDimensions.height }; var whitesmoke = 0xf5f5f5; var boxGeom = new THREE.BoxBufferGeometry( dimensions.width, dimensions.height, dimensions.length, 2, 2, 2 ); var edgesGeom = new THREE.EdgesGeometry(boxGeom); var material = new THREE.LineDashedMaterial({ color: 0x111111, linewidth: 1, scale: 1, dashSize: 0.25, gapSize: 0.25 }); var mesh = new THREE.LineSegments(edgesGeom, material); mesh.computeLineDistances(); var envelopeGroup = new THREE.Group(); envelopeGroup.add(mesh); envelopeGroup.position.set( dimensions.width / 2, dimensions.height / 2, dimensions.length / 2 ); return envelopeGroup; }; VisualizationSpace.prototype.toString = function () { return ""); }; return VisualizationSpace; })()35:Tb41,VisualizationInterpreters = /** @class */ (function () { function VisualizationInterpreters() {} VisualizationInterpreters.sbpBasicViz = function ( toolpath, materialParams, providedOrigin ) { const SCALE_FACTOR = 25; let currentPosition; if (providedOrigin) { currentPosition = new THREE.Vector3( providedOrigin.x, providedOrigin.y, providedOrigin.z ); } else { currentPosition = new THREE.Vector3(0, 0, 0); } var newPosition = currentPosition.clone(); var tokens, opcode, duration; var posChange; let positions = []; let colors = []; toolpath.forEach(function (instruction) { if (instruction.trim()[0] === "'") { return; } let tokens = instruction.trim().split(","); let opcode = tokens[0]; let opX, opY, opZ; if (opcode === "M2" || opcode === "J2") { opX = parseFloat(tokens[1]); opY = parseFloat(tokens[2]); newPosition = new THREE.Vector3(opX, opY, currentPosition.z); } else if (opcode === "M3" || opcode === "J3") { opX = parseFloat(tokens[1]); opY = parseFloat(tokens[2]); opZ = parseFloat(tokens[3]); newPosition = new THREE.Vector3(opX, opY, opZ); } else if (opcode === "MZ" || opcode === "JZ") { opZ = parseFloat(tokens[1]); newPosition = new THREE.Vector3( currentPosition.x, currentPosition.y, opZ ); } else if (opcode === "CP") { opX = 0; opY = 0; let opDiam = 0; } else { // Unrecognized opcode return; } positions.push(newPosition); let isTravelMove = currentPosition.z > 0 && newPosition.z > 0; if (isTravelMove) { let green = [0, 0, 255]; colors.push(...green); } else { let red = [255, 0, 0]; colors.push(...red); } currentPosition = newPosition; }); mutable test = positions; let positionsFlat = positions.map((vec) => [vec.x, vec.y, vec.z]).flat(); let lineGeom = new LineGeometry(); lineGeom.setPositions(positionsFlat); lineGeom.setColors(colors); let material = new LineMaterial({ linewidth: 1, vertexColors: true, //resolution: // to be set by renderer, eventually // Hmmm the below vector works? It was never set on its own and // crashed the browser resolution: new THREE.Vector2(640, 480), dashed: false }); let line = new Line2(lineGeom, material); line.scale.set(1, 1, 1); line.computeLineDistances(); let wrapperGroup = new THREE.Group(); const initialZDrop = 0.6996; // line.translateZ(-initialZDrop * SCALE_FACTOR); wrapperGroup.add(line); wrapperGroup.rotateX(Math.PI / 2); return wrapperGroup; }; return VisualizationInterpreters; })()36:T2676,LineSegments2 = (function () { const _start = new THREE.Vector3(); const _end = new THREE.Vector3(); const _start4 = new THREE.Vector4(); const _end4 = new THREE.Vector4(); const _ssOrigin = new THREE.Vector4(); const _ssOrigin3 = new THREE.Vector3(); const _mvMatrix = new THREE.Matrix4(); const _line = new THREE.Line3(); const _closestPoint = new THREE.Vector3(); const _box = new THREE.Box3(); const _sphere = new THREE.Sphere(); const _clipToWorldVector = new THREE.Vector4(); let _ray, _instanceStart, _instanceEnd, _lineWidth; // Returns the margin required to expand by in world space given the distance from the camera, // line width, resolution, and camera projection function getWorldSpaceHalfWidth(camera, distance, resolution) { // transform into clip space, adjust the x and y values by the pixel width offset, then // transform back into world space to get world offset. Note clip space is [-1, 1] so full // width does not need to be halved. _clipToWorldVector .set(0, 0, -distance, 1.0) .applyMatrix4(camera.projectionMatrix); _clipToWorldVector.multiplyScalar(1.0 / _clipToWorldVector.w); _clipToWorldVector.x = _lineWidth / resolution.width; _clipToWorldVector.y = _lineWidth / resolution.height; _clipToWorldVector.applyMatrix4(camera.projectionMatrixInverse); _clipToWorldVector.multiplyScalar(1.0 / _clipToWorldVector.w); return Math.abs(Math.max(_clipToWorldVector.x, _clipToWorldVector.y)); } function raycastWorldUnits(lineSegments, intersects) { for (let i = 0, l = _instanceStart.count; i < l; i++) { _line.start.fromBufferAttribute(_instanceStart, i); _line.end.fromBufferAttribute(_instanceEnd, i); const pointOnLine = new THREE.Vector3(); const point = new THREE.Vector3(); _ray.distanceSqToSegment(_line.start, _line.end, point, pointOnLine); const isInside = point.distanceTo(pointOnLine) < _lineWidth * 0.5; if (isInside) { intersects.push({ point, pointOnLine, distance: _ray.origin.distanceTo(point), object: lineSegments, face: null, faceIndex: i, uv: null, uv2: null }); } } } function raycastScreenSpace(lineSegments, camera, intersects) { const projectionMatrix = camera.projectionMatrix; const material = lineSegments.material; const resolution = material.resolution; const matrixWorld = lineSegments.matrixWorld; const geometry = lineSegments.geometry; const instanceStart = geometry.attributes.instanceStart; const instanceEnd = geometry.attributes.instanceEnd; const near = -camera.near; // // pick a point 1 unit out along the ray to avoid the ray origin // sitting at the camera origin which will cause "w" to be 0 when // applying the projection matrix. _ray.at(1, _ssOrigin); // ndc space [ - 1.0, 1.0 ] _ssOrigin.w = 1; _ssOrigin.applyMatrix4(camera.matrixWorldInverse); _ssOrigin.applyMatrix4(projectionMatrix); _ssOrigin.multiplyScalar(1 / _ssOrigin.w); // screen space _ssOrigin.x *= resolution.x / 2; _ssOrigin.y *= resolution.y / 2; _ssOrigin.z = 0; _ssOrigin3.copy(_ssOrigin); _mvMatrix.multiplyMatrices(camera.matrixWorldInverse, matrixWorld); for (let i = 0, l = instanceStart.count; i < l; i++) { _start4.fromBufferAttribute(instanceStart, i); _end4.fromBufferAttribute(instanceEnd, i); _start4.w = 1; _end4.w = 1; // camera space _start4.applyMatrix4(_mvMatrix); _end4.applyMatrix4(_mvMatrix); // skip the segment if it's entirely behind the camera const isBehindCameraNear = _start4.z > near && _end4.z > near; if (isBehindCameraNear) { continue; } // trim the segment if it extends behind camera near if (_start4.z > near) { const deltaDist = _start4.z - _end4.z; const t = (_start4.z - near) / deltaDist; _start4.lerp(_end4, t); } else if (_end4.z > near) { const deltaDist = _end4.z - _start4.z; const t = (_end4.z - near) / deltaDist; _end4.lerp(_start4, t); } // clip space _start4.applyMatrix4(projectionMatrix); _end4.applyMatrix4(projectionMatrix); // ndc space [ - 1.0, 1.0 ] _start4.multiplyScalar(1 / _start4.w); _end4.multiplyScalar(1 / _end4.w); // screen space _start4.x *= resolution.x / 2; _start4.y *= resolution.y / 2; _end4.x *= resolution.x / 2; _end4.y *= resolution.y / 2; // create 2d segment _line.start.copy(_start4); _line.start.z = 0; _line.end.copy(_end4); _line.end.z = 0; // get closest point on ray to segment const param = _line.closestPointToPointParameter(_ssOrigin3, true); _line.at(param, _closestPoint); // check if the intersection point is within clip space const zPos = THREE.MathUtils.lerp(_start4.z, _end4.z, param); const isInClipSpace = zPos >= -1 && zPos <= 1; const isInside = _ssOrigin3.distanceTo(_closestPoint) < _lineWidth * 0.5; if (isInClipSpace && isInside) { _line.start.fromBufferAttribute(instanceStart, i); _line.end.fromBufferAttribute(instanceEnd, i); _line.start.applyMatrix4(matrixWorld); _line.end.applyMatrix4(matrixWorld); const pointOnLine = new THREE.Vector3(); const point = new THREE.Vector3(); _ray.distanceSqToSegment(_line.start, _line.end, point, pointOnLine); intersects.push({ point: point, pointOnLine: pointOnLine, distance: _ray.origin.distanceTo(point), object: lineSegments, face: null, faceIndex: i, uv: null, uv2: null }); } } } class LineSegments2 extends THREE.Mesh { constructor( geometry = new THREE.LineSegmentsGeometry(), material = new THREE.LineMaterial({ color: Math.random() * 0xffffff }) ) { super(geometry, material); this.isLineSegments2 = true; this.type = "LineSegments2"; } // for backwards-compatibility, but could be a method of THREE.LineSegmentsGeometry... computeLineDistances() { const geometry = this.geometry; const instanceStart = geometry.attributes.instanceStart; const instanceEnd = geometry.attributes.instanceEnd; const lineDistances = new Float32Array(2 * instanceStart.count); for (let i = 0, j = 0, l = instanceStart.count; i < l; i++, j += 2) { _start.fromBufferAttribute(instanceStart, i); _end.fromBufferAttribute(instanceEnd, i); lineDistances[j] = j === 0 ? 0 : lineDistances[j - 1]; lineDistances[j + 1] = lineDistances[j] + _start.distanceTo(_end); } const instanceDistanceBuffer = new THREE.InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1 geometry.setAttribute( "instanceDistanceStart", new THREE.InterleavedBufferAttribute(instanceDistanceBuffer, 1, 0) ); // d0 geometry.setAttribute( "instanceDistanceEnd", new THREE.InterleavedBufferAttribute(instanceDistanceBuffer, 1, 1) ); // d1 return this; } raycast(raycaster, intersects) { const worldUnits = this.material.worldUnits; const camera = raycaster.camera; if (camera === null && !worldUnits) { console.error( 'LineSegments2: "Raycaster.camera" needs to be set in order to raycast against LineSegments2 while worldUnits is set to false.' ); } const threshold = raycaster.params.Line2 !== undefined ? raycaster.params.Line2.threshold || 0 : 0; _ray = raycaster.ray; const matrixWorld = this.matrixWorld; const geometry = this.geometry; const material = this.material; _lineWidth = material.linewidth + threshold; _instanceStart = geometry.attributes.instanceStart; _instanceEnd = geometry.attributes.instanceEnd; // check if we intersect the sphere bounds if (geometry.boundingSphere === null) { geometry.computeBoundingSphere(); } _sphere.copy(geometry.boundingSphere).applyMatrix4(matrixWorld); // increase the sphere bounds by the worst case line screen space width let sphereMargin; if (worldUnits) { sphereMargin = _lineWidth * 0.5; } else { const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint(_ray.origin) ); sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution ); } _sphere.radius += sphereMargin; if (_ray.intersectsSphere(_sphere) === false) { return; } // check if we intersect the box bounds if (geometry.boundingBox === null) { geometry.computeBoundingBox(); } _box.copy(geometry.boundingBox).applyMatrix4(matrixWorld); // increase the box bounds by the worst case line width let boxMargin; if (worldUnits) { boxMargin = _lineWidth * 0.5; } else { const distanceToBox = Math.max( camera.near, _box.distanceToPoint(_ray.origin) ); boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution ); } _box.expandByScalar(boxMargin); if (_ray.intersectsBox(_box) === false) { return; } if (worldUnits) { raycastWorldUnits(this, intersects); } else { raycastScreenSpace(this, camera, intersects); } } } return LineSegments2; })()37:T5d6,LineGeometry = (function () { class LineGeometry extends LineSegmentsGeometry { constructor() { super(); this.isLineGeometry = true; this.type = "LineGeometry"; } setPositions(array) { // converts [ x1, y1, z1, x2, y2, z2, ... ] to pairs format const length = array.length - 3; const points = new Float32Array(2 * length); for (let i = 0; i < length; i += 3) { points[2 * i] = array[i]; points[2 * i + 1] = array[i + 1]; points[2 * i + 2] = array[i + 2]; points[2 * i + 3] = array[i + 3]; points[2 * i + 4] = array[i + 4]; points[2 * i + 5] = array[i + 5]; } super.setPositions(points); return this; } setColors(array) { // converts [ r1, g1, b1, r2, g2, b2, ... ] to pairs format const length = array.length - 3; const colors = new Float32Array(2 * length); for (let i = 0; i < length; i += 3) { colors[2 * i] = array[i]; colors[2 * i + 1] = array[i + 1]; colors[2 * i + 2] = array[i + 2]; colors[2 * i + 3] = array[i + 3]; colors[2 * i + 4] = array[i + 4]; colors[2 * i + 5] = array[i + 5]; } super.setColors(colors); return this; } fromLine(line) { const geometry = line.geometry; this.setPositions(geometry.attributes.position.array); // assumes non-indexed // set colors, maybe return this; } } return LineGeometry; })()38:T1425,LineSegmentsGeometry = (function () { const _box = new THREE.Box3(); const _vector = new THREE.Vector3(); class LineSegmentsGeometry extends THREE.InstancedBufferGeometry { constructor() { super(); this.isLineSegmentsGeometry = true; this.type = "LineSegmentsGeometry"; const positions = [ -1, 2, 0, 1, 2, 0, -1, 1, 0, 1, 1, 0, -1, 0, 0, 1, 0, 0, -1, -1, 0, 1, -1, 0 ]; const uvs = [-1, 2, 1, 2, -1, 1, 1, 1, -1, -1, 1, -1, -1, -2, 1, -2]; const index = [0, 2, 1, 2, 3, 1, 2, 4, 3, 4, 5, 3, 4, 6, 5, 6, 7, 5]; this.setIndex(index); this.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3) ); this.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); } applyMatrix4(matrix) { const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined) { start.applyMatrix4(matrix); end.applyMatrix4(matrix); start.needsUpdate = true; } if (this.boundingBox !== null) { this.computeBoundingBox(); } if (this.boundingSphere !== null) { this.computeBoundingSphere(); } return this; } setPositions(array) { let lineSegments; if (array instanceof Float32Array) { lineSegments = array; } else if (Array.isArray(array)) { lineSegments = new Float32Array(array); } const instanceBuffer = new THREE.InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz this.setAttribute( "instanceStart", new THREE.InterleavedBufferAttribute(instanceBuffer, 3, 0) ); // xyz this.setAttribute( "instanceEnd", new THREE.InterleavedBufferAttribute(instanceBuffer, 3, 3) ); // xyz // this.computeBoundingBox(); this.computeBoundingSphere(); return this; } setColors(array) { let colors; if (array instanceof Float32Array) { colors = array; } else if (Array.isArray(array)) { colors = new Float32Array(array); } const instanceColorBuffer = new THREE.InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb this.setAttribute( "instanceColorStart", new THREE.InterleavedBufferAttribute(instanceColorBuffer, 3, 0) ); // rgb this.setAttribute( "instanceColorEnd", new THREE.InterleavedBufferAttribute(instanceColorBuffer, 3, 3) ); // rgb return this; } fromWireframeGeometry(geometry) { this.setPositions(geometry.attributes.position.array); return this; } fromEdgesGeometry(geometry) { this.setPositions(geometry.attributes.position.array); return this; } fromMesh(mesh) { this.fromWireframeGeometry(new THREE.WireframeGeometry(mesh.geometry)); // set colors, maybe return this; } fromLineSegments(lineSegments) { const geometry = lineSegments.geometry; this.setPositions(geometry.attributes.position.array); // assumes non-indexed // set colors, maybe return this; } computeBoundingBox() { if (this.boundingBox === null) { this.boundingBox = new THREE.Box3(); } const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined && end !== undefined) { this.boundingBox.setFromBufferAttribute(start); _box.setFromBufferAttribute(end); this.boundingBox.union(_box); } } computeBoundingSphere() { if (this.boundingSphere === null) { this.boundingSphere = new THREE.Sphere(); } if (this.boundingBox === null) { this.computeBoundingBox(); } const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined && end !== undefined) { const center = this.boundingSphere.center; this.boundingBox.getCenter(center); let maxRadiusSq = 0; for (let i = 0, il = start.count; i < il; i++) { _vector.fromBufferAttribute(start, i); maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared(_vector) ); _vector.fromBufferAttribute(end, i); maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared(_vector) ); } this.boundingSphere.radius = Math.sqrt(maxRadiusSq); if (isNaN(this.boundingSphere.radius)) { console.error( "THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values.", this ); } } } toJSON() { // todo } applyMatrix(matrix) { console.warn( "THREE.LineSegmentsGeometry: applyMatrix() has been renamed to applyMatrix4()." ); return this.applyMatrix4(matrix); } } return LineSegmentsGeometry; })()39:T33a5,LineMaterial = (function () { /** * parameters = { * color: , * linewidth: , * dashed: , * dashScale: , * dashSize: , * dashOffset: , * gapSize: , * resolution: , // to be set by renderer * } */ THREE.UniformsLib.line = { worldUnits: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new THREE.Vector2(1, 1) }, dashOffset: { value: 0 }, dashScale: { value: 1 }, dashSize: { value: 1 }, gapSize: { value: 1 } // todo FIX - maybe change to totalSize }; THREE.ShaderLib["line"] = { uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib.common, THREE.UniformsLib.fog, THREE.UniformsLib.line ]), vertexShader: /* glsl */ ` #include #include #include #include #include uniform float linewidth; uniform vec2 resolution; attribute vec3 instanceStart; attribute vec3 instanceEnd; attribute vec3 instanceColorStart; attribute vec3 instanceColorEnd; #ifdef WORLD_UNITS varying vec4 worldPos; varying vec3 worldStart; varying vec3 worldEnd; #ifdef USE_DASH varying vec2 vUv; #endif #else varying vec2 vUv; #endif #ifdef USE_DASH uniform float dashScale; attribute float instanceDistanceStart; attribute float instanceDistanceEnd; varying float vLineDistance; #endif void trimSegment( const in vec4 start, inout vec4 end ) { // trim end segment so it terminates between the camera plane and the near plane // conservative estimate of the near plane float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column float nearEstimate = - 0.5 * b / a; float alpha = ( nearEstimate - start.z ) / ( end.z - start.z ); end.xyz = mix( start.xyz, end.xyz, alpha ); } void main() { #ifdef USE_COLOR vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd; #endif #ifdef USE_DASH vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd; vUv = uv; #endif float aspect = resolution.x / resolution.y; // camera space vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 ); vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 ); #ifdef WORLD_UNITS worldStart = start.xyz; worldEnd = end.xyz; #else vUv = uv; #endif // special case for perspective projection, and segments that terminate either in, or behind, the camera plane // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space // but we need to perform ndc-space calculations in the shader, so we must address this issue directly // perhaps there is a more elegant solution -- WestLangley bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column if ( perspective ) { if ( start.z < 0.0 && end.z >= 0.0 ) { trimSegment( start, end ); } else if ( end.z < 0.0 && start.z >= 0.0 ) { trimSegment( end, start ); } } // clip space vec4 clipStart = projectionMatrix * start; vec4 clipEnd = projectionMatrix * end; // ndc space vec3 ndcStart = clipStart.xyz / clipStart.w; vec3 ndcEnd = clipEnd.xyz / clipEnd.w; // direction vec2 dir = ndcEnd.xy - ndcStart.xy; // account for clip-space aspect ratio dir.x *= aspect; dir = normalize( dir ); #ifdef WORLD_UNITS // get the offset direction as perpendicular to the view vector vec3 worldDir = normalize( end.xyz - start.xyz ); vec3 offset; if ( position.y < 0.5 ) { offset = normalize( cross( start.xyz, worldDir ) ); } else { offset = normalize( cross( end.xyz, worldDir ) ); } // sign flip if ( position.x < 0.0 ) offset *= - 1.0; float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); // don't extend the line if we're rendering dashes because we // won't be rendering the endcaps #ifndef USE_DASH // extend the line bounds to encompass endcaps start.xyz += - worldDir * linewidth * 0.5; end.xyz += worldDir * linewidth * 0.5; // shift the position of the quad so it hugs the forward edge of the line offset.xy -= dir * forwardOffset; offset.z += 0.5; #endif // endcaps if ( position.y > 1.0 || position.y < 0.0 ) { offset.xy += dir * 2.0 * forwardOffset; } // adjust for linewidth offset *= linewidth * 0.5; // set the world position worldPos = ( position.y < 0.5 ) ? start : end; worldPos.xyz += offset; // project the worldpos vec4 clip = projectionMatrix * worldPos; // shift the depth of the projected points so the line // segments overlap neatly vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd; clip.z = clipPose.z * clip.w; #else vec2 offset = vec2( dir.y, - dir.x ); // undo aspect ratio adjustment dir.x /= aspect; offset.x /= aspect; // sign flip if ( position.x < 0.0 ) offset *= - 1.0; // endcaps if ( position.y < 0.0 ) { offset += - dir; } else if ( position.y > 1.0 ) { offset += dir; } // adjust for linewidth offset *= linewidth; // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... offset /= resolution.y; // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; // back to clip space offset *= clip.w; clip.xy += offset; #endif gl_Position = clip; vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation #include #include #include } `, fragmentShader: /* glsl */ ` uniform vec3 diffuse; uniform float opacity; uniform float linewidth; #ifdef USE_DASH uniform float dashOffset; uniform float dashSize; uniform float gapSize; #endif varying float vLineDistance; #ifdef WORLD_UNITS varying vec4 worldPos; varying vec3 worldStart; varying vec3 worldEnd; #ifdef USE_DASH varying vec2 vUv; #endif #else varying vec2 vUv; #endif #include #include #include #include #include vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) { float mua; float mub; vec3 p13 = p1 - p3; vec3 p43 = p4 - p3; vec3 p21 = p2 - p1; float d1343 = dot( p13, p43 ); float d4321 = dot( p43, p21 ); float d1321 = dot( p13, p21 ); float d4343 = dot( p43, p43 ); float d2121 = dot( p21, p21 ); float denom = d2121 * d4343 - d4321 * d4321; float numer = d1343 * d4321 - d1321 * d4343; mua = numer / denom; mua = clamp( mua, 0.0, 1.0 ); mub = ( d1343 + d4321 * ( mua ) ) / d4343; mub = clamp( mub, 0.0, 1.0 ); return vec2( mua, mub ); } void main() { #include #ifdef USE_DASH if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize ) discard; // todo - FIX #endif float alpha = opacity; #ifdef WORLD_UNITS // Find the closest points on the view ray and the line segment vec3 rayEnd = normalize( worldPos.xyz ) * 1e5; vec3 lineDir = worldEnd - worldStart; vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd ); vec3 p1 = worldStart + lineDir * params.x; vec3 p2 = rayEnd * params.y; vec3 delta = p1 - p2; float len = length( delta ); float norm = len / linewidth; #ifndef USE_DASH #ifdef USE_ALPHA_TO_COVERAGE float dnorm = fwidth( norm ); alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm ); #else if ( norm > 0.5 ) { discard; } #endif #endif #else #ifdef USE_ALPHA_TO_COVERAGE // artifacts appear on some hardware if a derivative is taken within a conditional float a = vUv.x; float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; float len2 = a * a + b * b; float dlen = fwidth( len2 ); if ( abs( vUv.y ) > 1.0 ) { alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 ); } #else if ( abs( vUv.y ) > 1.0 ) { float a = vUv.x; float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; float len2 = a * a + b * b; if ( len2 > 1.0 ) discard; } #endif #endif vec4 diffuseColor = vec4( diffuse, alpha ); #include #include gl_FragColor = vec4( diffuseColor.rgb, alpha ); #include #include #include #include } ` }; class LineMaterial extends THREE.ShaderMaterial { constructor(parameters) { super({ type: "LineMaterial", uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib["line"].uniforms), vertexShader: THREE.ShaderLib["line"].vertexShader, fragmentShader: THREE.ShaderLib["line"].fragmentShader, clipping: true // required for clipping support }); this.isLineMaterial = true; Object.defineProperties(this, { color: { enumerable: true, get: function () { return this.uniforms.diffuse.value; }, set: function (value) { this.uniforms.diffuse.value = value; } }, worldUnits: { enumerable: true, get: function () { return "WORLD_UNITS" in this.defines; }, set: function (value) { if (value === true) { this.defines.WORLD_UNITS = ""; } else { delete this.defines.WORLD_UNITS; } } }, linewidth: { enumerable: true, get: function () { return this.uniforms.linewidth.value; }, set: function (value) { this.uniforms.linewidth.value = value; } }, dashed: { enumerable: true, get: function () { return Boolean("USE_DASH" in this.defines); }, set(value) { if (Boolean(value) !== Boolean("USE_DASH" in this.defines)) { this.needsUpdate = true; } if (value === true) { this.defines.USE_DASH = ""; } else { delete this.defines.USE_DASH; } } }, dashScale: { enumerable: true, get: function () { return this.uniforms.dashScale.value; }, set: function (value) { this.uniforms.dashScale.value = value; } }, dashSize: { enumerable: true, get: function () { return this.uniforms.dashSize.value; }, set: function (value) { this.uniforms.dashSize.value = value; } }, dashOffset: { enumerable: true, get: function () { return this.uniforms.dashOffset.value; }, set: function (value) { this.uniforms.dashOffset.value = value; } }, gapSize: { enumerable: true, get: function () { return this.uniforms.gapSize.value; }, set: function (value) { this.uniforms.gapSize.value = value; } }, opacity: { enumerable: true, get: function () { return this.uniforms.opacity.value; }, set: function (value) { this.uniforms.opacity.value = value; } }, resolution: { enumerable: true, get: function () { return this.uniforms.resolution.value; }, set: function (value) { this.uniforms.resolution.value.copy(value); } }, alphaToCoverage: { enumerable: true, get: function () { return Boolean("USE_ALPHA_TO_COVERAGE" in this.defines); }, set: function (value) { if ( Boolean(value) !== Boolean("USE_ALPHA_TO_COVERAGE" in this.defines) ) { this.needsUpdate = true; } if (value === true) { this.defines.USE_ALPHA_TO_COVERAGE = ""; this.extensions.derivatives = true; } else { delete this.defines.USE_ALPHA_TO_COVERAGE; this.extensions.derivatives = false; } } } }); this.setValues(parameters); } } return LineMaterial; })()3a:T7137,OrbitControls = (function () { // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // // Orbit - left mouse / touch: one-finger move // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move const _changeEvent = { type: "change" }; const _startEvent = { type: "start" }; const _endEvent = { type: "end" }; class OrbitControls extends THREE.EventDispatcher { constructor(object, domElement) { super(); if (domElement === undefined) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' ); if (domElement === document) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' ); this.object = object; this.domElement = domElement; this.domElement.style.touchAction = "none"; // disable touch scroll // Set to false to disable this control this.enabled = true; // "target" sets the location of focus, where the object orbits around this.target = new THREE.Vector3(); // How far you can dolly in and out ( PerspectiveCamera only ) this.minDistance = 0; this.maxDistance = Infinity; // How far you can zoom in and out ( OrthographicCamera only ) this.minZoom = 0; this.maxZoom = Infinity; // How far you can orbit vertically, upper and lower limits. // Range is 0 to Math.PI radians. this.minPolarAngle = 0; // radians this.maxPolarAngle = Math.PI; // radians // How far you can orbit horizontally, upper and lower limits. // If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ) this.minAzimuthAngle = -Infinity; // radians this.maxAzimuthAngle = Infinity; // radians // Set to true to enable damping (inertia) // If damping is enabled, you must call controls.update() in your animation loop this.enableDamping = false; this.dampingFactor = 0.05; // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. // Set to false to disable zooming this.enableZoom = true; this.zoomSpeed = 1.0; // Set to false to disable rotating this.enableRotate = true; this.rotateSpeed = 1.0; // Set to false to disable panning this.enablePan = true; this.panSpeed = 1.0; this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up this.keyPanSpeed = 7.0; // pixels moved per arrow key push // Set to true to automatically rotate around the target // If auto-rotate is enabled, you must call controls.update() in your animation loop this.autoRotate = false; this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60 // The four arrow keys this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" }; // Mouse buttons this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN }; // Touch fingers this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }; // for reset this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; // the target DOM element for key events this._domElementKeyEvents = null; // // public methods // this.getPolarAngle = function () { return spherical.phi; }; this.getAzimuthalAngle = function () { return spherical.theta; }; this.getDistance = function () { return this.object.position.distanceTo(this.target); }; this.listenToKeyEvents = function (domElement) { domElement.addEventListener("keydown", onKeyDown); this._domElementKeyEvents = domElement; }; this.saveState = function () { scope.target0.copy(scope.target); scope.position0.copy(scope.object.position); scope.zoom0 = scope.object.zoom; }; this.reset = function () { scope.target.copy(scope.target0); scope.object.position.copy(scope.position0); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent(_changeEvent); scope.update(); state = STATE.NONE; }; // this method is exposed, but perhaps it would be better if we can make it private... this.update = (function () { const offset = new THREE.Vector3(); // so camera.up is the orbit axis const quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3(0, 1, 0) ); const quatInverse = quat.clone().invert(); const lastPosition = new THREE.Vector3(); const lastQuaternion = new THREE.Quaternion(); const twoPI = 2 * Math.PI; return function update() { const position = scope.object.position; offset.copy(position).sub(scope.target); // rotate offset to "y-axis-is-up" space offset.applyQuaternion(quat); // angle from z-axis around y-axis spherical.setFromVector3(offset); if (scope.autoRotate && state === STATE.NONE) { rotateLeft(getAutoRotationAngle()); } if (scope.enableDamping) { spherical.theta += sphericalDelta.theta * scope.dampingFactor; spherical.phi += sphericalDelta.phi * scope.dampingFactor; } else { spherical.theta += sphericalDelta.theta; spherical.phi += sphericalDelta.phi; } // restrict theta to be between desired limits let min = scope.minAzimuthAngle; let max = scope.maxAzimuthAngle; if (isFinite(min) && isFinite(max)) { if (min < -Math.PI) min += twoPI; else if (min > Math.PI) min -= twoPI; if (max < -Math.PI) max += twoPI; else if (max > Math.PI) max -= twoPI; if (min <= max) { spherical.theta = Math.max(min, Math.min(max, spherical.theta)); } else { spherical.theta = spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta); } } // restrict phi to be between desired limits spherical.phi = Math.max( scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi) ); spherical.makeSafe(); spherical.radius *= scale; // restrict radius to be between desired limits spherical.radius = Math.max( scope.minDistance, Math.min(scope.maxDistance, spherical.radius) ); // move target to panned location if (scope.enableDamping === true) { scope.target.addScaledVector(panOffset, scope.dampingFactor); } else { scope.target.add(panOffset); } offset.setFromSpherical(spherical); // rotate offset back to "camera-up-vector-is-up" space offset.applyQuaternion(quatInverse); position.copy(scope.target).add(offset); scope.object.lookAt(scope.target); if (scope.enableDamping === true) { sphericalDelta.theta *= 1 - scope.dampingFactor; sphericalDelta.phi *= 1 - scope.dampingFactor; panOffset.multiplyScalar(1 - scope.dampingFactor); } else { sphericalDelta.set(0, 0, 0); panOffset.set(0, 0, 0); } scale = 1; // update condition is: // min(camera displacement, camera rotation in radians)^2 > EPS // using small-angle approximation cos(x/2) = 1 - x^2 / 8 if ( zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS ) { scope.dispatchEvent(_changeEvent); lastPosition.copy(scope.object.position); lastQuaternion.copy(scope.object.quaternion); zoomChanged = false; return true; } return false; }; })(); this.dispose = function () { scope.domElement.removeEventListener("contextmenu", onContextMenu); scope.domElement.removeEventListener("pointerdown", onPointerDown); scope.domElement.removeEventListener("pointercancel", onPointerCancel); scope.domElement.removeEventListener("wheel", onMouseWheel); scope.domElement.removeEventListener("pointermove", onPointerMove); scope.domElement.removeEventListener("pointerup", onPointerUp); if (scope._domElementKeyEvents !== null) { scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown); } //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? }; // // internals // const scope = this; const STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 }; let state = STATE.NONE; const EPS = 0.000001; // current position in spherical coordinates const spherical = new THREE.Spherical(); const sphericalDelta = new THREE.Spherical(); let scale = 1; const panOffset = new THREE.Vector3(); let zoomChanged = false; const rotateStart = new THREE.Vector2(); const rotateEnd = new THREE.Vector2(); const rotateDelta = new THREE.Vector2(); const panStart = new THREE.Vector2(); const panEnd = new THREE.Vector2(); const panDelta = new THREE.Vector2(); const dollyStart = new THREE.Vector2(); const dollyEnd = new THREE.Vector2(); const dollyDelta = new THREE.Vector2(); const pointers = []; const pointerPositions = {}; function getAutoRotationAngle() { return ((2 * Math.PI) / 60 / 60) * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow(0.95, scope.zoomSpeed); } function rotateLeft(angle) { sphericalDelta.theta -= angle; } function rotateUp(angle) { sphericalDelta.phi -= angle; } const panLeft = (function () { const v = new THREE.Vector3(); return function panLeft(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix v.multiplyScalar(-distance); panOffset.add(v); }; })(); const panUp = (function () { const v = new THREE.Vector3(); return function panUp(distance, objectMatrix) { if (scope.screenSpacePanning === true) { v.setFromMatrixColumn(objectMatrix, 1); } else { v.setFromMatrixColumn(objectMatrix, 0); v.crossVectors(scope.object.up, v); } v.multiplyScalar(distance); panOffset.add(v); }; })(); // deltaX and deltaY are in pixels; right and down are positive const pan = (function () { const offset = new THREE.Vector3(); return function pan(deltaX, deltaY) { const element = scope.domElement; if (scope.object.isPerspectiveCamera) { // perspective const position = scope.object.position; offset.copy(position).sub(scope.target); let targetDistance = offset.length(); // half of the fov is center to top of screen targetDistance *= Math.tan( ((scope.object.fov / 2) * Math.PI) / 180.0 ); // we use only clientHeight here so aspect ratio does not distort speed panLeft( (2 * deltaX * targetDistance) / element.clientHeight, scope.object.matrix ); panUp( (2 * deltaY * targetDistance) / element.clientHeight, scope.object.matrix ); } else if (scope.object.isOrthographicCamera) { // orthographic panLeft( (deltaX * (scope.object.right - scope.object.left)) / scope.object.zoom / element.clientWidth, scope.object.matrix ); panUp( (deltaY * (scope.object.top - scope.object.bottom)) / scope.object.zoom / element.clientHeight, scope.object.matrix ); } else { // camera neither orthographic nor perspective console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - pan disabled." ); scope.enablePan = false; } }; })(); function dollyOut(dollyScale) { if (scope.object.isPerspectiveCamera) { scale /= dollyScale; } else if (scope.object.isOrthographicCamera) { scope.object.zoom = Math.max( scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled." ); scope.enableZoom = false; } } function dollyIn(dollyScale) { if (scope.object.isPerspectiveCamera) { scale *= dollyScale; } else if (scope.object.isOrthographicCamera) { scope.object.zoom = Math.max( scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled." ); scope.enableZoom = false; } } // // event callbacks - update the object state // function handleMouseDownRotate(event) { rotateStart.set(event.clientX, event.clientY); } function handleMouseDownDolly(event) { dollyStart.set(event.clientX, event.clientY); } function handleMouseDownPan(event) { panStart.set(event.clientX, event.clientY); } function handleMouseMoveRotate(event) { rotateEnd.set(event.clientX, event.clientY); rotateDelta .subVectors(rotateEnd, rotateStart) .multiplyScalar(scope.rotateSpeed); const element = scope.domElement; rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight); rotateStart.copy(rotateEnd); scope.update(); } function handleMouseMoveDolly(event) { dollyEnd.set(event.clientX, event.clientY); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyOut(getZoomScale()); } else if (dollyDelta.y < 0) { dollyIn(getZoomScale()); } dollyStart.copy(dollyEnd); scope.update(); } function handleMouseMovePan(event) { panEnd.set(event.clientX, event.clientY); panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); scope.update(); } function handleMouseWheel(event) { if (event.deltaY < 0) { dollyIn(getZoomScale()); } else if (event.deltaY > 0) { dollyOut(getZoomScale()); } scope.update(); } function handleKeyDown(event) { let needsUpdate = false; switch (event.code) { case scope.keys.UP: pan(0, scope.keyPanSpeed); needsUpdate = true; break; case scope.keys.BOTTOM: pan(0, -scope.keyPanSpeed); needsUpdate = true; break; case scope.keys.LEFT: pan(scope.keyPanSpeed, 0); needsUpdate = true; break; case scope.keys.RIGHT: pan(-scope.keyPanSpeed, 0); needsUpdate = true; break; } if (needsUpdate) { // prevent the browser from scrolling on cursor keys event.preventDefault(); scope.update(); } } function handleTouchStartRotate() { if (pointers.length === 1) { rotateStart.set(pointers[0].pageX, pointers[0].pageY); } else { const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); rotateStart.set(x, y); } } function handleTouchStartPan() { if (pointers.length === 1) { panStart.set(pointers[0].pageX, pointers[0].pageY); } else { const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); panStart.set(x, y); } } function handleTouchStartDolly() { const dx = pointers[0].pageX - pointers[1].pageX; const dy = pointers[0].pageY - pointers[1].pageY; const distance = Math.sqrt(dx * dx + dy * dy); dollyStart.set(0, distance); } function handleTouchStartDollyPan() { if (scope.enableZoom) handleTouchStartDolly(); if (scope.enablePan) handleTouchStartPan(); } function handleTouchStartDollyRotate() { if (scope.enableZoom) handleTouchStartDolly(); if (scope.enableRotate) handleTouchStartRotate(); } function handleTouchMoveRotate(event) { if (pointers.length == 1) { rotateEnd.set(event.pageX, event.pageY); } else { const position = getSecondPointerPosition(event); const x = 0.5 * (event.pageX + position.x); const y = 0.5 * (event.pageY + position.y); rotateEnd.set(x, y); } rotateDelta .subVectors(rotateEnd, rotateStart) .multiplyScalar(scope.rotateSpeed); const element = scope.domElement; rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight); rotateStart.copy(rotateEnd); } function handleTouchMovePan(event) { if (pointers.length === 1) { panEnd.set(event.pageX, event.pageY); } else { const position = getSecondPointerPosition(event); const x = 0.5 * (event.pageX + position.x); const y = 0.5 * (event.pageY + position.y); panEnd.set(x, y); } panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); } function handleTouchMoveDolly(event) { const position = getSecondPointerPosition(event); const dx = event.pageX - position.x; const dy = event.pageY - position.y; const distance = Math.sqrt(dx * dx + dy * dy); dollyEnd.set(0, distance); dollyDelta.set(0, Math.pow(dollyEnd.y / dollyStart.y, scope.zoomSpeed)); dollyOut(dollyDelta.y); dollyStart.copy(dollyEnd); } function handleTouchMoveDollyPan(event) { if (scope.enableZoom) handleTouchMoveDolly(event); if (scope.enablePan) handleTouchMovePan(event); } function handleTouchMoveDollyRotate(event) { if (scope.enableZoom) handleTouchMoveDolly(event); if (scope.enableRotate) handleTouchMoveRotate(event); } // // event handlers - FSM: listen for events and reset state // function onPointerDown(event) { if (scope.enabled === false) return; if (pointers.length === 0) { scope.domElement.setPointerCapture(event.pointerId); scope.domElement.addEventListener("pointermove", onPointerMove); scope.domElement.addEventListener("pointerup", onPointerUp); } // addPointer(event); if (event.pointerType === "touch") { onTouchStart(event); } else { onMouseDown(event); } } function onPointerMove(event) { if (scope.enabled === false) return; if (event.pointerType === "touch") { onTouchMove(event); } else { onMouseMove(event); } } function onPointerUp(event) { removePointer(event); if (pointers.length === 0) { scope.domElement.releasePointerCapture(event.pointerId); scope.domElement.removeEventListener("pointermove", onPointerMove); scope.domElement.removeEventListener("pointerup", onPointerUp); } scope.dispatchEvent(_endEvent); state = STATE.NONE; } function onPointerCancel(event) { removePointer(event); } function onMouseDown(event) { let mouseAction; switch (event.button) { case 0: mouseAction = scope.mouseButtons.LEFT; break; case 1: mouseAction = scope.mouseButtons.MIDDLE; break; case 2: mouseAction = scope.mouseButtons.RIGHT; break; default: mouseAction = -1; } switch (mouseAction) { case THREE.MOUSE.DOLLY: if (scope.enableZoom === false) return; handleMouseDownDolly(event); state = STATE.DOLLY; break; case THREE.MOUSE.ROTATE: if (event.ctrlKey || event.metaKey || event.shiftKey) { if (scope.enablePan === false) return; handleMouseDownPan(event); state = STATE.PAN; } else { if (scope.enableRotate === false) return; handleMouseDownRotate(event); state = STATE.ROTATE; } break; case THREE.MOUSE.PAN: if (event.ctrlKey || event.metaKey || event.shiftKey) { if (scope.enableRotate === false) return; handleMouseDownRotate(event); state = STATE.ROTATE; } else { if (scope.enablePan === false) return; handleMouseDownPan(event); state = STATE.PAN; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(_startEvent); } } function onMouseMove(event) { if (scope.enabled === false) return; switch (state) { case STATE.ROTATE: if (scope.enableRotate === false) return; handleMouseMoveRotate(event); break; case STATE.DOLLY: if (scope.enableZoom === false) return; handleMouseMoveDolly(event); break; case STATE.PAN: if (scope.enablePan === false) return; handleMouseMovePan(event); break; } } function onMouseWheel(event) { if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return; event.preventDefault(); scope.dispatchEvent(_startEvent); handleMouseWheel(event); scope.dispatchEvent(_endEvent); } function onKeyDown(event) { if (scope.enabled === false || scope.enablePan === false) return; handleKeyDown(event); } function onTouchStart(event) { trackPointer(event); switch (pointers.length) { case 1: switch (scope.touches.ONE) { case THREE.TOUCH.ROTATE: if (scope.enableRotate === false) return; handleTouchStartRotate(); state = STATE.TOUCH_ROTATE; break; case THREE.TOUCH.PAN: if (scope.enablePan === false) return; handleTouchStartPan(); state = STATE.TOUCH_PAN; break; default: state = STATE.NONE; } break; case 2: switch (scope.touches.TWO) { case THREE.TOUCH.DOLLY_PAN: if (scope.enableZoom === false && scope.enablePan === false) return; handleTouchStartDollyPan(); state = STATE.TOUCH_DOLLY_PAN; break; case THREE.TOUCH.DOLLY_ROTATE: if (scope.enableZoom === false && scope.enableRotate === false) return; handleTouchStartDollyRotate(); state = STATE.TOUCH_DOLLY_ROTATE; break; default: state = STATE.NONE; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(_startEvent); } } function onTouchMove(event) { trackPointer(event); switch (state) { case STATE.TOUCH_ROTATE: if (scope.enableRotate === false) return; handleTouchMoveRotate(event); scope.update(); break; case STATE.TOUCH_PAN: if (scope.enablePan === false) return; handleTouchMovePan(event); scope.update(); break; case STATE.TOUCH_DOLLY_PAN: if (scope.enableZoom === false && scope.enablePan === false) return; handleTouchMoveDollyPan(event); scope.update(); break; case STATE.TOUCH_DOLLY_ROTATE: if (scope.enableZoom === false && scope.enableRotate === false) return; handleTouchMoveDollyRotate(event); scope.update(); break; default: state = STATE.NONE; } } function onContextMenu(event) { if (scope.enabled === false) return; event.preventDefault(); } function addPointer(event) { pointers.push(event); } function removePointer(event) { delete pointerPositions[event.pointerId]; for (let i = 0; i < pointers.length; i++) { if (pointers[i].pointerId == event.pointerId) { pointers.splice(i, 1); return; } } } function trackPointer(event) { let position = pointerPositions[event.pointerId]; if (position === undefined) { position = new THREE.Vector2(); pointerPositions[event.pointerId] = position; } position.set(event.pageX, event.pageY); } function getSecondPointerPosition(event) { const pointer = event.pointerId === pointers[0].pointerId ? pointers[1] : pointers[0]; return pointerPositions[pointer.pointerId]; } // scope.domElement.addEventListener("contextmenu", onContextMenu); scope.domElement.addEventListener("pointerdown", onPointerDown); scope.domElement.addEventListener("pointercancel", onPointerCancel); scope.domElement.addEventListener("wheel", onMouseWheel, { passive: false }); // force an update at start this.update(); } } // This set of controls performs orbiting, dollying (zooming), and panning. // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // This is very similar to OrbitControls, another set of touch behavior // // Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - left mouse, or arrow keys / touch: one-finger move class MapControls extends OrbitControls { constructor(object, domElement) { super(object, domElement); this.screenSpacePanning = false; // pan orthogonal to world-space direction camera.up this.mouseButtons.LEFT = THREE.MOUSE.PAN; this.mouseButtons.RIGHT = THREE.MOUSE.ROTATE; this.touches.ONE = THREE.TOUCH.PAN; this.touches.TWO = THREE.TOUCH.DOLLY_ROTATE; } } return OrbitControls; })()3b:T410,function loadSvgIntoDrawingPad(mySvg) { return new Promise((resolve, reject) => { mySvg.text().then((imgText) => { drawingPad.ps.project.importSVG(imgText, { insert: false, onLoad: (item, svgString) => { item.scale(1, -1); // let paths = item.children.filter( // (child) => // child.className === "Path" || child.className === "CompoundPath" // ); let paths = item.getItems({ className: (name) => name === "Path" || name === "CompoundPath" }); paths.forEach((childPath) => { childPath.name = "profileCurve"; childPath.strokeColor = "white"; }); let group = new paper.Group(paths); group.name = "tarotGroup"; group.scale = 0.5; drawingPad.ps.project.activeLayer.addChildren(group); // drawnPaths.addChild(group); mutable newProfileDrawnIndicator = Date.now(); resolve(group); } }); }); }); }3c:T426,function makeMenorahBase(ps) { const eps = 0.0; let originPt = new ps.Point(0, 0); let compensatedHeight = baseHeight + toolDiameter; let compensatedWidth = baseWidth + toolDiameter; let endPt = new ps.Point( compensatedWidth * UPSCALE, compensatedHeight * UPSCALE ); let holeCompWidth = stemWidth - toolDiameter + eps; let holeCompHeight = thickness - toolDiameter + eps; let holeStart = new ps.Point( (compensatedWidth / 2 - holeCompWidth / 2) * UPSCALE, (compensatedHeight / 2 - holeCompHeight / 2) * UPSCALE ); let holeEnd = new ps.Point( (compensatedWidth / 2 + holeCompWidth / 2) * UPSCALE, (compensatedHeight / 2 + holeCompHeight / 2) * UPSCALE ); let holePath = new ps.Path.Rectangle(holeStart, holeEnd); holePath.strokeColor = "white"; holePath.strokeWidth = 1; holePath.name = "profileCurve"; let rectPath = new ps.Path.Rectangle(originPt, endPt); rectPath.strokeColor = "white"; rectPath.strokeWidth = 1; rectPath.name = "profileCurve"; mutable newProfileDrawnIndicator = Date.now(); }3d:[{"id":"87c3ea637c460c194ee34c726a5dcab9a3ae3da48a244c2214d9fd592ce5e9efd54f1df0e41ee2d846d632c2fce016fe6d734530995b25eb18304987503f1ca3","href":"https://static.observableusercontent.com/files/87c3ea637c460c194ee34c726a5dcab9a3ae3da48a244c2214d9fd592ce5e9efd54f1df0e41ee2d846d632c2fce016fe6d734530995b25eb18304987503f1ca3","name":"menorah-main.svg","type":"image/svg+xml","lastModified":1671743850973.313,"size":5848},{"id":"772efbb7e74076032769e260d0db2898dd3c546dfcf5131cd93c798d695a1e71b3fc76d63ce81a80e550c560d410efd9e59e97c4270603e1dab0243bd50e3c37","href":"https://static.observableusercontent.com/files/772efbb7e74076032769e260d0db2898dd3c546dfcf5131cd93c798d695a1e71b3fc76d63ce81a80e550c560d410efd9e59e97c4270603e1dab0243bd50e3c37","name":"moon.svg","type":"image/svg+xml","lastModified":1668803073424.869,"size":81058}] 2f:{"title":"QuickDraw: Sketch-Based Milling","cells":[{"id":0,"value":"# QuickDraw: Sketch-Based Milling\nIn this notebook, we specify our design, we generate toolpaths and we dispatch them to the ShopBot.","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"## ${textcolor('To Do Before', 'lightblue')}\nBefore you start generating toolpaths, make sure you \n1. Open the socket in the ${textcolor('Connection', 'pink')} section at the end of the notebook to connect this notebook to the server and the ShopBot;\n2. Re-specify material dimensions and choice of endmill in the ${textcolor('Setup', 'pink')} section, also at the end of the notebook.\n\nWe'll also keep track of the ${textcolor('machine state', 'pink')} below.\n\nSee the ${textcolor('Connection', 'yellow')} and ${textcolor('Setup', 'yellow')} notebooks in the same collection for more details.","pinned":false,"hidden":false,"mode":"md"},{"id":703,"value":"## ${textcolor('Creating toolpaths', 'lightblue')}","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"Below is the code for the ${textcolor('drawing pad', 'orange')}, which will create a curve ... (more details on how it works here).\n\nImportant to explain that there are two options for specifying the design at the moment: import an image as SVG or draw directly on the drawing pad.\n\nCurrent description: *Now let's create a 3D toolpath that we will actually cut.*\n*First, let's specify the profile curve that we will cut. You an create a drawing by clicking and dragging the mouse before unclicking. Note that we currently only support one stroke at a time, and creating more strokes will clear the previous one.*","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"### ${textcolor('Drawing pad utilities', 'darkgreen')}","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"UPSCALE = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"function addRegionBoundary(ps, width, height) {\n let originPt = new ps.Point(0, 0);\n let endPt = new ps.Point(height * UPSCALE, width * UPSCALE);\n let rectPath = new ps.Path.Rectangle(originPt, endPt);\n rectPath.strokeColor = \"red\";\n rectPath.strokeWidth = 2;\n rectPath.isRegionBoundary = true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"paper = require(\"paper\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"mutable newProfileDrawnIndicator = Date.now()","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"function initDrawingPadConstrained(ps) {\n let path = new paper.Path();\n path.name = \"profileCurve\";\n path.strokeColor = \"white\";\n path.selected = true;\n path.closed = true;\n let tool = ps.tool || new paper.Tool();\n tool.minDistance = 10;\n tool.currentPath = undefined;\n tool.onMouseDown = (event) => {\n if (!path) {\n path = new paper.Path();\n }\n path.add(event.point);\n };\n tool.onMouseUp = (event) => {\n mutable newProfileDrawnIndicator = Date.now();\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"function initDrawingPadFreehand(ps) {\n let path = new paper.Path();\n let tool = ps.tool || new paper.Tool();\n tool.minDistance = resolution;\n tool.onMouseDown = (event) => {\n // path.remove();\n path = new paper.Path();\n path.add(event.point);\n path.strokeColor = \"white\";\n path.selected = true;\n path.closed = forceClosedDrawings;\n path.name = \"profileCurve\";\n };\n tool.onMouseDrag = (event) => {\n path.add(event.point);\n };\n tool.onMouseUp = (event) => {\n // We can't simplify because we don't have support for Bezier curves\n // path.simplify();\n mutable newProfileDrawnIndicator = Date.now();\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"### ${textcolor('Drawing Pad', 'darkgreen')}","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"viewof resolution = Inputs.range([1, 25], {\n label: \"Drawing pad resolution\",\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"viewof drawingPadMode = Inputs.radio([\"freehand\", \"pointwise\"], {\n value: \"pointwise\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"viewof forceClosedDrawings = Inputs.toggle({\n label: \"Force drawings to be closed paths?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"drawingPad = {\n clearDrawingIndicator;\n let size = 20;\n let canvas = DOM.canvas(600, 300);\n canvas.style.backgroundColor = \"black\";\n let ps = (() => {\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 ps.project.activeLayer.removeChildren();\n let mode =\n drawingPadMode === \"pointwise\"\n ? initDrawingPadConstrained\n : initDrawingPadFreehand;\n mode(ps);\n addRegionBoundary(ps, jobRegionHeight, jobRegionWidth);\n invalidation.then(() => {\n ps.remove();\n canvas.remove();\n });\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"Inputs.button(\"Clear Drawing Pad\", {\n reduce: (_) => {\n mutable clearDrawingIndicator = Date.now();\n mutable newProfileDrawnIndicator = Date.now();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"drawnPaths = {\n newProfileDrawnIndicator;\n return drawingPad.ps.project.getItems({ name: \"profileCurve\" });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"mutable clearDrawingIndicator = Date.now()","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"### ${textcolor('Toolpaths Visualization', 'darkgreen')}","pinned":false,"hidden":false,"mode":"md"},{"id":432,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"You can also use the sliders below to translate, scale, and rotate the profile.","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"viewof initShapeInstsTranslateX = Inputs.range([-20, 20], {\n // ?? clearDrawingIndicator is a hack to make sure we reload the view\n // whenever there is a new drawing, even though we never use the\n // value of clearDrawingIndicator\n label: \"Translate X\" ?? clearDrawingIndicator,\n step: 0.001,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof initShapeInstsTranslateY = Inputs.range([-20, 20], {\n label: \"Translate Y\" ?? clearDrawingIndicator,\n step: 0.001,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"viewof initShapeInstsScale = Inputs.range([0.1, 5], {\n label: \"Scale\" ?? clearDrawingIndicator,\n step: 0.001,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"viewof initShapeInstsRotate = Inputs.range([0, 359], {\n label: \"Rotate (degrees)\" ?? clearDrawingIndicator,\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"sbpButton(\"Dispatch\", profileCurveInsts.flat())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"sbpButton(\"Move Aside\", [`J2,${aside.x},${aside.y}`])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"aside = ({ x: 7, y: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$${textcolor('We generate initial instructions by extracting points from the curve.', {background: '#111111', color: 'pink'})}","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"profileCurveInsts = {\n newProfileDrawnIndicator;\n return instsFromDrawingPad(\n initShapeInstsTranslateX,\n initShapeInstsTranslateY,\n initShapeInstsScale,\n initShapeInstsRotate\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"We'll flatten the arrays of per-layer instructions and concatenate them with a pre- and postamble to get a set of working movement instructions.","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"## ${textcolor('Getting ready to cut', 'lightblue')}\nBecause we're doing subtractive manufacturing, machining any design is essentially a matter of deciding how deep we're going to cut and according to what material removal strategy (pocketing, profiling, roughing, finishing, drilling, etc.).\n\nWe cut a 3D version of our curve by cutting it repeatedly, layer by layer down into the wood. Each layer of cutting is called a pass.\n\nWe can either cut with the end mill following just the geometry we made (profile) or by entirely cutting out the interior of the geometry as well (pocket). These techniques are called toolpath operations.\n\nLet's start by specifying the depth of our cut (the depth of the last pass).","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"viewof depthToCut = Inputs.range([0.0625, thickness + 0.125], {\n step: 0.0001,\n label: \"Depth to Cut\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"To calculate the number of passes and the depth of each pass, we set each pass depth to be equal to half the endmill's diameter, and then round up to the nearest integer amount of passes.","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"stepdown = toolDiameter / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"numPasses = depthToCut / stepdown","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"### ${textcolor('Generating toolpaths', 'darkgreen')}\nWe'll use this information in a function which will create a toolpath that does multiple passes at subsequent depths.","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"unflatAfterDepthInstructions = profileCurveInsts.map((curveInsts) => {\n return extrudeInstructions(curveInsts, depthToCut, thickness, [\n //1,\n // Math.floor(curveInsts.length / 4),\n Math.floor(curveInsts.length / 2)\n // Math.floor((3 * curveInsts.length) / 4)\n ]);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"We'll flatten the arrays of per-layer instructions and concatenate them with a pre- and postamble to get a set of working movement instructions.","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"preamble = {\n const spindleOn = \"C6\";\n return [spindleOn];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"postamble = {\n const spindleOff = \"C7\";\n return [\n `' Begin postamble`,\n `JZ,1`,\n spindleOff,\n PRE_validAside()\n ? `J2,${machineState.asidePosition.x},${machineState.asidePosition.y}`\n : `J2,0,0`\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"travelHeight = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"afterDepthInstructions = {\n let mainSets = unflatAfterDepthInstructions.map((unflatSet) => {\n let lastMoveToTravelHeight = `JZ,${travelHeight}`;\n return unflatSet.flat().concat(lastMoveToTravelHeight);\n });\n return preamble.concat(mainSets).concat(postamble);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"#### ${textcolor('Safe Z function (?)', 'green')}","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"function PRE_zAboveBed() {\n return -mutable machineState.z <= thickness;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"#### ${textcolor('Toolpaths Visualization Utilities ', 'green')}\nMaybe explain that what we mean by toolpath visualization is in fact a 3D viz of a multi-layer toolpath (calculated above).","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"mutable test = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"### ${textcolor('Feeds and Speeds', 'darkgreen')}\nSo far we have predefined speeds and feeds for the selected endmill, which is definitely more convenient than having participants come up with their own. We could 'optimize' for foam perhaps.\n\nAdd explanation of feeds and speeds and decision rationale here.","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"viewof materialType = Inputs.radio([\"plywood\", \"foam\"], {\n label: \"Material Type\",\n value: \"foam\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"surfaceSpeeds = ({\n plywood: 600,\n foam: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"chiploadRangesFoam = ({\n // Use 1/8\" for V cutter\n 0.125: [0.004, 0.006],\n 0.25: [0.011, 0.013],\n 0.375: [0.017, 0.02],\n 0.5: [0.021, 0.023]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"chiploadRangesPlywood = ({\n // Use 1/8\" for V cutter\n 0.125: [0.003, 0.005],\n 0.25: [0.005, 0.007],\n 0.375: [0.006, 0.008],\n 0.5: [0.007, 0.009]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"chipload = ({\n // Use the lower bound ([0]) by default as a conservative option\n plywood: chiploadRangesPlywood[toolDiameter][0],\n foam: chiploadRangesFoam[toolDiameter][0]\n}[materialType])","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"feed = (speed * toolNumFlutes * chipload) / 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"speed = surfaceSpeeds[materialType] / ((Math.PI / 12) * toolDiameter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"fsRationale = {\n return htl.html`📈 Given we're cutting ${materialType} using an end mill with diameter ${toolDiameter} inches and ${toolNumFlutes} flute${\n toolNumFlutes > 1 ? \"s\" : \"\"\n }, choose feed rate ${feed} inches per second and speed ${speed} RPM.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"## ${textcolor('Sending toolpaths to the ShopBot ', 'lightblue')}","pinned":false,"hidden":false,"mode":"md"},{"id":613,"value":"Let's put everything—the geometry, feed, and speed—together to get our complete toolpath.","pinned":false,"hidden":false,"mode":"md"},{"id":616,"value":"completeInstructions = {\n const setFeed = `MS,${feed},${feed / 2},,,`;\n const setSpeed = `TR,${speed}`;\n let preamble = [setFeed, setSpeed];\n return preamble.concat(afterDepthInstructions.flat());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"function sbpButton(text, sbpCodes) {\n let debounceDelay = 10000;\n let buttonText = \"\";\n if (!socketOpen) {\n buttonText = html`~~${text}~~ Click to Reopen Socket`;\n } else if (machineState.busy) {\n buttonText = \"Machine is busy...\";\n } else {\n buttonText = text;\n }\n let button = Inputs.button(buttonText, {\n reduce: (_) => {\n if (!socketOpen) {\n reopenSocket();\n return;\n }\n let packet = {\n type: \"gcode\",\n data: sbpCodes\n };\n socket.send(JSON.stringify(packet));\n let debounceDelay = 1000;\n Promises.delay(debounceDelay).then(\n () => (mutable sbpButtonDebounceOn = false)\n );\n }\n });\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"mutable sbpButtonDebounceOn = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"profileCurveInsts.flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"Good job! This is the ${textcolor('end', 'violet')} of the ${textcolor('Sketch-Based Milling', 'yellow')} notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"# To Do First","pinned":false,"hidden":false,"mode":"md"},{"id":711,"value":"## ${textcolor('Connection', 'lightblue')}","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"serverUrl = \"wss://machineagency-shopbot-server.herokuapp.com\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"mutable socketResetIndicator = new Date().getTime()","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"mutable socketCloseIndicator = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"mutable socketError = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"mutable latestMessage = \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"// TODO: change the names to be standardized\nmutable connectedNodes = ({\n drawing: true,\n server: false,\n tss: false,\n shopbot: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"function handleConnectionChange(socketJustDisconnected) {\n // Note that we need to pass in an argument to know about the socket's status because\n // referencing the socket or socket state here would create a circular definition.\n if (mutable latestMessage.type === \"connectionStatus\") {\n let newConnectedNodes = structuredClone(mutable connectedNodes);\n mutable latestMessage.who.forEach((node) => {\n newConnectedNodes[node] = mutable latestMessage.status === \"connect\";\n });\n newConnectedNodes.server = !socketJustDisconnected;\n mutable connectedNodes = newConnectedNodes;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"socket = {\n socketResetIndicator;\n const url = serverUrl;\n const protocol = \"drawing\";\n return new Promise((resolve, reject) => {\n let socket = new WebSocket(url, protocol);\n socket.addEventListener(\"close\", (event) => {\n mutable socketCloseIndicator = Date.now();\n handleConnectionChange(true);\n });\n socket.addEventListener(\"message\", (event) => {\n mutable latestMessage = JSON.parse(event.data);\n if (mutable latestMessage.type === \"connectionStatus\") {\n handleConnectionChange(false);\n }\n });\n socket.addEventListener(\"open\", (event) => {\n handleConnectionChange(false);\n resolve(socket);\n });\n socket.addEventListener(\"error\", (event) => {\n mutable socketError = event.data;\n reject(event);\n });\n invalidation.then((_) => {\n socket.close();\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"socketOpen = {\n socketCloseIndicator;\n return socket.readyState === 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"function reopenSocket() {\n mutable socketResetIndicator = new Date().getTime();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"toggleSocketButton = {\n let text = socketOpen ? \"Close Socket\" : \"Open Socket\";\n let button = html``;\n button.onclick = () => {\n if (socketOpen) {\n socket.close();\n } else {\n reopenSocket();\n }\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"## ${textcolor('Moving the machine to test', 'lightblue')}\nOnce the authoring notebook and the ShopBot are talking over the render server, you can start moving the machine. You do this with the following cell:","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"function sendSbpCodesToMachine(sbpCodes) {\n if (socket.readyState !== socket.OPEN) {\n throw Error(\"Socket not open.\");\n }\n let packet = {\n type: \"gcode\",\n data: sbpCodes\n };\n socket.send(JSON.stringify(packet));\n return \"Sent the packet, unsure if it made it.\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"Inputs.button(\"Dispatch SBP code\", {\n reduce: (_) => {\n sendSbpCodesToMachine([\"MX,0\"]);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":729,"value":"## ${textcolor('Setup', 'lightblue')}","pinned":false,"hidden":false,"mode":"md"},{"id":736,"value":"### ${textcolor('Selecting the endmill', 'darkgreen')}\nSee the ${textcolor('Setup', 'yellow')} notebook for more details.","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"viewof toolDiameter = Inputs.radio([0.125, 0.25, 0.5], {\n label: \"Tool Diameter (in)\",\n value: 0.25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"viewof toolNumFlutes = Inputs.radio([1, 2, 4], {\n label: \"Tool Number of Flutes\",\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"### ${textcolor('Specifying material dimensions', 'darkgreen')}","pinned":false,"hidden":false,"mode":"md"},{"id":773,"value":"viewof jobRegionWidth = Inputs.range([1, 50], {\n step: 0.25,\n label: \"Material Width (in)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"viewof jobRegionHeight = Inputs.range([1, 50], {\n step: 0.25,\n label: \"Material Height (in)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"viewof thickness = Inputs.range([0.0625, 2], {\n label: \"Material Thickness (in)\",\n step: 0.0001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"## ${textcolor('Keeping track of the machine state', 'lightblue')}\nBefore we start cutting, we'll keep track of details about the machine here, most notably the tool's position and the machine's busy status. However we will also track things like the current bit installed, even if we can't automatically detect these things.","pinned":false,"hidden":false,"mode":"md"},{"id":855,"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 // 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"},{"id":180,"value":"Whenever we get a message that has data from the machine, update machineState accordingly.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"function updateMachineStateFromMessage() {\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"},{"id":185,"value":"updateMachineStateFromMessage()","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"We'll also provide a function that will ask the ShopBot over the connection to send its latest state.","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"function requestPhysicalMachineState() {\n let packet = {\n type: \"requestMachineState\"\n };\n return new Promise((resolve, reject) => {\n let listenForFabData = (event) => {\n let packet = JSON.parse(event.data);\n if (packet.type === \"fabricatorData\") {\n socket.removeEventListener(\"message\", listenForFabData);\n resolve(packet);\n }\n };\n socket.addEventListener(\"message\", listenForFabData);\n socket.send(JSON.stringify(packet));\n let timeoutMs = 5000;\n setTimeout(() => {\n socket.removeEventListener(\"message\", listenForFabData);\n reject(\"Did not hear back from the machine in time.\");\n }, timeoutMs);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"## ${textcolor('Overlay (Time Permitting)', 'lightblue')}","pinned":false,"hidden":false,"mode":"md"},{"id":884,"value":"function sendParamsToOverlay(optionalKey) {\n // Reference the dummy value to ensure that the socket.send below doesn't reference a stale socket,\n socketResetIndicator;\n if (socket.readyState === socket.CLOSED) {\n return htl.html`⛔️ Didn't send parameters because the socket is closed.`;\n }\n let packet = {\n name: \"drawing\",\n type: \"tssMachineParams\",\n data: mutable machineState\n };\n socket.send(JSON.stringify(packet));\n let additionalText = optionalKey ? `updated ${optionalKey} and ` : \"\";\n return html`📈 Machine state ${additionalText}sent to overlay at ${new Date().toLocaleString()}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"function sendInstsToOverlay(sbpCodes) {\n // Reference the dummy value to ensure that the socket.send below doesn't reference a stale socket,\n socketResetIndicator;\n if (!socketOpen) {\n return html`🚫 Did not send instructions to overlay at ${new Date().toLocaleString()} because the socket is closed.`;\n }\n let packet = {\n name: \"drawing\",\n type: \"tssInstructions\",\n data: sbpCodes\n };\n socket.send(JSON.stringify(packet));\n return html`🎨 Instructions sent to overlay at ${new Date().toLocaleString()}.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"sendParamsToOverlay()","pinned":true,"hidden":false,"mode":"ojs"},{"id":896,"value":"sendInstsToOverlay(profileCurveInsts.flat())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1037,"value":"sendEnvelopeDimsToOverlay()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1033,"value":"function sendEnvelopeDimsToOverlay(optionalKey) {\n // Reference the dummy value to ensure that the socket.send below doesn't reference a stale socket,\n socketResetIndicator;\n if (socket.readyState === socket.CLOSED) {\n return htl.html`⛔️ Didn't send parameters because the socket is closed.`;\n }\n let packet = {\n name: \"drawing\",\n type: \"tssEnvelope\",\n data: {\n envelopeHeight: jobRegionHeight,\n envelopeWidth: jobRegionWidth\n }\n };\n socket.send(JSON.stringify(packet));\n let additionalText = optionalKey ? `updated ${optionalKey} and ` : \"\";\n return html`✉️ Envelope dimensions ${additionalText}sent to overlay at ${new Date().toLocaleString()}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"## ${textcolor('Imports', 'lightblue')}","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"#### ${textcolor('Colors', 'green')}","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"#### ${textcolor('Table of Content', 'green')}","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"#### ${textcolor('Tool Aside and Above Stock', 'green')}","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"function PRE_spindleAboveStock() {\n return machineState.z > 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"function PRE_validAside() {\n return (\n PRE_spindleAboveStock() &&\n machineState.asidePosition.x !== null &&\n machineState.asidePosition.y !== null &&\n machineState.asidePosition.z !== null\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"#### ${textcolor('Imports for Making Visualizations', 'green')}","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"THREE = {\n const THREE = (window.THREE =\n await require(\"three@0.146.0/build/three.js\"));\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"Line2 = (function () {\n class Line2 extends LineSegments2 {\n constructor(\n geometry = new THREE.LineGeometry(),\n material = new THREE.LineMaterial({\n color: Math.random() * 0xffffff\n })\n ) {\n super(geometry, material);\n this.isLine2 = true;\n this.type = \"Line2\";\n }\n }\n\n return Line2;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"#### ${textcolor('Ancient Secret', 'green')}","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"Inputs.button(\"Add tarot card 🔮\", {\n reduce: (_) => {\n loadSvgIntoDrawingPad(img);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"Inputs.button(\"Add menorah 🕎\", {\n reduce: (_) => {\n loadSvgIntoDrawingPad(menorahMain);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"Inputs.button(\"Add menorah base ⬛️\", {\n reduce: (_) => {\n makeMenorahBase(drawingPad.ps);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"img = FileAttachment(\"moon.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"menorahMain = FileAttachment(\"menorah-main.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"stemWidth = 1.115","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"baseWidth = 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"baseHeight = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}