30:Tdfc,paths = { const recursivity = 8 const scene = new ln.Scene() const addCube = (x, y, z, w, h, d) => { const min = new ln.Vector(x-w/2, y-h/2, z-d/2) const max = new ln.Vector(x+w/2, y+h/2, z+d/2) const cube = new ln.Cube(min, max) cube.paths = function() { const paths = [] const { x: x1, y: y1, z: z1 } = this.min const { x: x2, y: y2, z: z2 } = this.max //Top let A = {x: x2, y: y2, z: z2} let B = {x: x1, y: y2, z: z2} let C = {x: x1, y: y2, z: z1} let D = {x: x2, y: y2, z: z1} paths.push([new ln.Vector(A.x, A.y, A.z), new ln.Vector(B.x, B.y, B.z)]) paths.push([new ln.Vector(B.x, B.y, B.z), new ln.Vector(C.x, C.y, C.z)]) paths.push([new ln.Vector(C.x, C.y, C.z), new ln.Vector(D.x, D.y, D.z)]) paths.push([new ln.Vector(D.x, D.y, D.z), new ln.Vector(A.x, A.y, A.z)]) let quad = [PVector(A), PVector(B), PVector(C), PVector(D)] let arr = [] divideRect2(0, 0, 100, 100, recursivity, arr) arr.forEach(({x1, y1, x2, y2}) => { let p1 = mapRectToQuad(quad, PVector(x1, y1).div(100)) let p2 = mapRectToQuad(quad, PVector(x2, y2).div(100)) paths.push([new ln.Vector(p1.x, p1.y, p1.z), new ln.Vector(p2.x, p2.y, p2.z)]) }) //Front A = {x: x2, y: y2, z: z2} B = {x: x2, y: y1, z: z2} C = {x: x1, y: y1, z: z2} D = {x: x1, y: y2, z: z2} paths.push([new ln.Vector(A.x, A.y, A.z), new ln.Vector(B.x, B.y, B.z)]) paths.push([new ln.Vector(B.x, B.y, B.z), new ln.Vector(C.x, C.y, C.z)]) paths.push([new ln.Vector(C.x, C.y, C.z), new ln.Vector(D.x, D.y, D.z)]) paths.push([new ln.Vector(D.x, D.y, D.z), new ln.Vector(A.x, A.y, A.z)]) quad = [PVector(A), PVector(B), PVector(C), PVector(D)] arr = [] divideRect2(0, 0, 100, 100, recursivity, arr) arr.forEach(({x1, y1, x2, y2}) => { let p1 = mapRectToQuad(quad, PVector(x1, y1).div(100)) let p2 = mapRectToQuad(quad, PVector(x2, y2).div(100)) paths.push([new ln.Vector(p1.x, p1.y, p1.z), new ln.Vector(p2.x, p2.y, p2.z)]) }) //Right A = {x: x2, y: y2, z: z2} B = {x: x2, y: y2, z: z1} C = {x: x2, y: y1, z: z1} D = {x: x2, y: y1, z: z2} paths.push([new ln.Vector(A.x, A.y, A.z), new ln.Vector(B.x, B.y, B.z)]) paths.push([new ln.Vector(B.x, B.y, B.z), new ln.Vector(C.x, C.y, C.z)]) paths.push([new ln.Vector(C.x, C.y, C.z), new ln.Vector(D.x, D.y, D.z)]) paths.push([new ln.Vector(D.x, D.y, D.z), new ln.Vector(A.x, A.y, A.z)]) quad = [PVector(A), PVector(B), PVector(C), PVector(D)] arr = [] divideRect2(0, 0, 100, 100, recursivity, arr) arr.forEach(({x1, y1, x2, y2}) => { let p1 = mapRectToQuad(quad, PVector(x1, y1).div(100)) let p2 = mapRectToQuad(quad, PVector(x2, y2).div(100)) paths.push([new ln.Vector(p1.x, p1.y, p1.z), new ln.Vector(p2.x, p2.y, p2.z)]) }) return paths } scene.add(cube) } let w = .25 let h = 2-w for(let y = -3; y <= 3; y += .75) { addCube(1-w/2, y, 1-h/2, w, .25, h) addCube(-1+w/2, y, -1+h/2, w, .25, h) addCube(1-h/2, y, -1+w/2, h, .25, w) addCube(-1+h/2, y, 1-w/2, h, .25, w) //addCube(0, y, 0, 2, .5, 2) } let eye = new ln.Vector(3, 2.5, 3) let center = new ln.Vector(0, 0, 0) let up = new ln.Vector(.3, .5, 0) let paths = scene.render(eye, center, up, plotH, plotW, 45, 0.1, 100, 0.01) return paths.map(p => [PVector(p[0]), PVector(p[p.length - 1])]) }31:T723,// adapted from https://note.com/outburst/n/na98a31f0b2cb function divideRect4Fill(x, y, w, h, n, arr, threshold = 0.7, rnd = random) { n-- if ((n >= 0 && rnd() < threshold) || n > 3) { let ww = w * rnd(.1, .9) // let ww = w * .5 let hh = h * rnd(.1, .9) // let hh = h * .5 arr.push({x1:x+ww, y1:y, x2:x+ww, y2:y+h}) arr.push({x1:x, y1:y+hh, x2:x+w, y2:y+hh}) divideRect4Fill(x, y, ww, hh, n, arr, threshold, rnd) divideRect4Fill(x+ww, y, w-ww, hh, n, arr, threshold, rnd) divideRect4Fill(x, y+hh, ww, h-hh, n, arr, threshold, rnd) divideRect4Fill(x+ww, y+hh, w-ww, h-hh, n, arr, threshold, rnd) } else if(random() < .5) { // fill proba let N = randInt(5, w*2) // if(random() < .5) { // vertical or horizontal // for(let i = 1; i < N; i ++) { // let xx = map(i, 0, N, 0, w) // arr.push({ x1: x+xx, y1: y, x2: x+xx, y2: y+h }) // } // } // else { // for(let i = 1; i < N; i ++) { // let yy = map(i, 0, N, 0, h) // arr.push({ x1: x, y1: y+yy, x2: x+w, y2: y+yy }) // } // } if(random() < .5) { // diagonals for(let i = 1; i < N; i ++) { let p = i/N * 2 if(p <= 1) { arr.push({ x1: x, y1: map(p, 0, 1, y, y + h), x2: map(p, 0, 1, x, x + w), y2: y }) } // else { // arr.push({ x1: map(p, 1, 2, x, x + w), y1: y + h, x2: x + w, y2: map(p, 1, 2, y, y + h) }) // } } } else { for(let i = 1; i < N; i ++) { let p = i/N * 2 if(p <= 1) { arr.push({ x1: map(p, 0, 1, x + w, x), y1: y, x2: x + w, y2: map(p, 0, 1, y, y + h) }) } // else { // arr.push({ x1: x, y1: map(p, 1, 2, y, y + h), x2: map(p, 1, 2, x + w, x), y2: y + h }) // } } } } }32:[{"id":"52f30a9368cd1ad11eb0b2b509214fafe11fbe2923e2378c8b8dc1daee8eac697ffd4111669bed932e03e86d19d5d3c0dc19a94fc73ddd1cabe56ad6df03b997","href":"https://static.observableusercontent.com/files/52f30a9368cd1ad11eb0b2b509214fafe11fbe2923e2378c8b8dc1daee8eac697ffd4111669bed932e03e86d19d5d3c0dc19a94fc73ddd1cabe56ad6df03b997","name":"untitled (70).png","type":"image/png","lastModified":1699861231484.17,"size":503310}] 2e:{"title":"Roland DXY-1300","cells":[{"id":0,"value":"# Roland DXY-1300\nUsing Observable & the [WebSerial API](https://developer.chrome.com/articles/serial/) to plot SVGs made with [ln.js](https://lnjs.surge.sh/index.html) on a [Roland DXY-1300](https://duckduckgo.com/?q=roland+dxy-1300&va=b&t=hc&iax=videos&iai=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiziP0cQhOFY&ia=videos). \nSpecial thanks to [Fabian Iwand](/@mootari) for [\"@mootari/powerful-features\"](/@mootari/powerful-features) ✨","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"The Roland DXY-1300 plotter has a plotting zone of 404x276mm:","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"FileAttachment(\"untitled (70).png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"plotW = 404","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"plotH = 276","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"svgDisplayHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"mutable progress = '0/0'","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"mutable complete = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"mapRectToQuad = ([A, B, C, D], normalizedPt) => {\n let p1 = PVector.lerp(A, B, normalizedPt.x)\n let p2 = PVector.lerp(D, C, normalizedPt.x)\n return PVector.lerp(p1, p2, normalizedPt.y)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"// adapted from https://note.com/outburst/n/na98a31f0b2cb\nfunction divideRect(x, y, w, h, n, arr, threshold = 0.7, rnd = random) {\n n--\n\n if ((n >= 0 && rnd() < threshold) || n > 3) {\n if (w >= h) {\n let randomW = w * rnd(0.1, 0.9)\n divideRect(x, y, randomW, h, n, arr, threshold, rnd)\n divideRect(x+randomW, y, w-randomW, h, n, arr, threshold, rnd)\n arr.push({x1:x+randomW, y1:y, x2:x+randomW, y2:y+h})\n }\n else {\n let randomH = h * rnd(0.1, 0.9)\n divideRect(x, y, w, randomH, n, arr, threshold, rnd)\n divideRect(x, y+randomH, w, h-randomH, n, arr, threshold, rnd)\n arr.push({ x1:x, y1:y+randomH, x2:x+w, y2:y+randomH })\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"// adapted from https://note.com/outburst/n/na98a31f0b2cb\nfunction divideRect2(x, y, w, h, n, arr, threshold = 0.7, rnd = random) {\n n--\n\n if((n >= 0 && rnd() < threshold) || n > 3) {\n if(rnd() > 0.5) {\n let randomW = w * rnd(0.1, 0.9)\n arr.push({x1:x+randomW, y1:y, x2:x+randomW, y2:y+h})\n divideRect2(x, y, randomW, h, n, arr, threshold, rnd)\n divideRect2(x+randomW, y, w-randomW, h, n, arr, threshold, rnd)\n }\n else {\n let randomH = h * rnd(0.1, 0.9)\n arr.push({ x1:x, y1:y+randomH, x2:x+w, y2:y+randomH })\n divideRect2(x, y, w, randomH, n, arr, threshold, rnd)\n divideRect2(x, y+randomH, w, h-randomH, n, arr, threshold, rnd)\n }\n }\n else if(random() < .3) { // fill proba\n if(random() < .2) {\n for(let xx = .5; xx <= w; xx += .5 ) {\n arr.push({ x1: x+xx, y1: y, x2: x+xx, y2: y+h })\n }\n }\n else {\n for(let yy = .5; yy <= h; yy += .5 ) {\n arr.push({ x1: x, y1: y+yy, x2: x+w, y2: y+yy })\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"// adapted from https://note.com/outburst/n/na98a31f0b2cb\nfunction divideRect4(x, y, w, h, n, arr, threshold = 0.9, rnd = random) {\n n--\n\n if ((n >= 0 && rnd() < threshold) || n > 3) {\n // let ww = w * rnd(.1, .9)\n let ww = w * .5\n // let hh = h * rnd(.1, .9)\n let hh = h * .5\n arr.push({x1:x+ww, y1:y, x2:x+ww, y2:y+h})\n arr.push({x1:x, y1:y+hh, x2:x+w, y2:y+hh})\n divideRect4(x, y, ww, hh, n, arr, threshold, rnd)\n divideRect4(x+ww, y, w-ww, hh, n, arr, threshold, rnd)\n divideRect4(x, y+hh, ww, h-hh, n, arr, threshold, rnd)\n divideRect4(x+ww, y+hh, w-ww, h-hh, n, arr, threshold, rnd)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"___\n## Plot","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"Allow access to the Serial port:","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"viewof port = request(async win => {\n const port = await win.navigator.serial.requestPort()\n await port.open({ baudRate: 9600 })\n return port\n}, { label: 'Connect Port', auto: false, popup: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"Set plotter steps configured on the Roland DXY-1300:","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"plotterSteps = 0.025 // 0.025mm steps","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"### Sort paths: \nFrom (0, 0) find the path that starts or ends the closest, add path (reverted if needed). Then, from the end of this path, find the next closest.","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"sortPaths = (paths) => {\n let ppaths = paths.map(p => [PVector(p[0]), PVector(p[1])])\n let sortedPaths = []\n \n let pos = PVector(0, 0)\n while(ppaths.length) {\n ppaths = ppaths.sort((a, b) => Math.min(pos.distSq(a[0]), pos.distSq(a[1])) - Math.min(pos.distSq(b[0]), pos.distSq(b[1])))\n let closest = ppaths.shift()\n if(pos.distSq(closest[0]) > pos.distSq(closest[1])) closest = closest.reverse()\n pos = closest[1].copy()\n sortedPaths.push(closest)\n }\n\n return sortedPaths\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"mutable plotterPaths = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"Inputs.button('Compute plotterPaths', {value:null, reduce:() => {\n mutable plotterPaths = sortPaths(paths.map(path => [path[0], path[path.length - 1]].map(pt => ({\n x: pt.x,\n y: pt.y // ln.js inverts Y axis\n }))))\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"landscapeToPortrait = ({x, y}, width, height) => ({x: width - y, y: x})","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"rotatedPaths = plotterPaths.map(p => p.map(pt => PVector(landscapeToPortrait(pt, plotW, plotH)))) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"cmd = {\n let cmd = 'SP1;PU0,0;'\n cmd += rotatedPaths.map((p, i) => {\n p = p.map(v => v.clone().div(plotterSteps).round())\n return `PU${p[0].x},${p[0].y};PD${p[1].x},${p[1].y};`\n }).join('')\n cmd += `SP;PU${plotW/plotterSteps|0},${plotH/plotterSteps|0};`\n return cmd\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"Inputs.button('Plot !', {value: null, reduce: async () => {\n let cmd = 'SP1;PU0,0;'\n cmd += rotatedPaths.map((p, i) => {\n p = p.map(v => v.div(plotterSteps).round())\n return `PU${p[0].x},${p[0].y};PD${p[1].x},${p[1].y};`\n }).join('')\n cmd += `SP2;PU${plotW/plotterSteps|0},${plotH/plotterSteps|0};`\n \n await writer.write(cmd)\n await sleep(1000)\n\n while(port.readable.locked) {\n await sleep(100)\n }\n console.log('done')\n}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"textEncoder = new TextEncoderStream()","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"writableStreamClosed = port ? textEncoder.readable.pipeTo(port.writable) : undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"writer = textEncoder.writable.getWriter()","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"sleep = ms => new Promise((res, rej) => setTimeout(res, ms))","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"___\n## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"import {ln} from '@makio135/ln'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {PVector, random, randInt, lerp, map} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"import {request} from '@mootari/powerful-features'","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"import {createThrottle} from \"@mootari/throttle\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}