2e:null 2f:["$","title",null,{"children":"Papercraft Christmas Ornaments Generator | Tony Chu | Observable"}] 34:T4c9,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // Mid-line svg.append("line") .attr("stroke-dasharray", "1 2") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", height) .attr("stroke", "black") let leftSide = bulbOutline.map((left) => { return { x: left.w, y: left.z } }) const lineGenerator = d3.line(d => d.x, d => d.y); const silhouetteLine = lineGenerator(leftSide) const labelsLayer = svg.append("g") labelsLayer.selectAll("text") .data(segments) .join("text") .text(d => Math.round(d.length)) .attr("x", d => { return (d.points[0].w + d.points[1].w) / 2 }) .attr("y", d => { return (d.points[0].z + d.points[1].z) / 2 }) svg.append("path") .attr("d", silhouetteLine) .attr("stroke", "black") .attr("fill", "none") bulbOutline.forEach(v => { svg.append("line") .attr("x1", 0) .attr("x2", v.w) .attr("y1", v.z) .attr("y2", v.z) .attr("stroke", "red") svg.append("text") .attr("x", v.w + 2) .attr("y", v.z) .attr("font-size", 10) .attr("fill", "red") .text(`${v.w} @ ${v.z}`) }) return svg.node(); }35:T545,{ const maxLength = d3.max(horizontalEdgeLengths) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, maxLength * 2 + 20]); const counts = horizontalEdgeLengths.length; const yOffset = maxLength + 10 horizontalEdgeLengths.forEach((length, i) => { const c = { x: 30 + 10 * i + horizontalEdgeLengths.slice(0, i).reduce((memo, current) => { return memo + current * 1.5 }, 0) + length, y: yOffset } svg.append("circle") .attr("cx", c.x) .attr("cy", c.y) .attr("r", 3) const points = d3.range(sides).map(j => { const p = { x: c.x + Math.cos(j * (Math.PI * 2) / sides + Math.PI * 0.1) * length, y: c.y + Math.sin(j * (Math.PI * 2) / sides + Math.PI * 0.1) * length } return p }) const pp = d3.pairs(points.slice(0).concat([points[0]])) points.forEach((p, j) => { svg.append("line") .attr("x1", c.x) .attr("x2", p.x) .attr("y1", c.y) .attr("y2", p.y) .attr("stroke", "black") .attr("stroke-dasharray", "1,2") svg.append("line") .attr("x1", pp[j][0].x) .attr("x2", pp[j][1].x) .attr("y1", pp[j][0].y) .attr("y2", pp[j][1].y) .attr("stroke", "red") }) }) return svg.node() }36:T75c,pointPairsOnASide = (facets) => { const lines = [] facets.forEach((f, i) => { if (i > 0) { // Regular Facet lines.push({ type: "cut", isExterior: true, side: "right", segment: i, x1: f.top / 2, y1: f.culmulativeHeight - f.height, x2: f.bottom / 2, y2: f.culmulativeHeight }) lines.push({ type: "cut", isExterior: true, side: "left", segment: i, x1: -f.top / 2, y1: f.culmulativeHeight - f.height, x2: -f.bottom / 2, y2: f.culmulativeHeight }) // the Fold Line lines.push({ type: "fold", isExterior: false, segment: i, x1: +f.bottom / 2, x2: -f.bottom / 2, y1: f.culmulativeHeight, y2: f.culmulativeHeight }) } else { lines.push({ type: "skip", isExterior: true, side: "right", segment: i, x1: f.top / 2, y1: f.culmulativeHeight - f.height, x2: f.bottom / 2, y2: f.culmulativeHeight }) lines.push({ type: "skip", isExterior: true, side: "left", segment: i, x1: -f.top / 2, y1: f.culmulativeHeight - f.height, x2: -f.bottom / 2, y2: f.culmulativeHeight }) // the Hanger Fold Line lines.push({ type: "fold", isExterior: false, segment: i, x1: +f.bottom / 2, x2: -f.bottom / 2, y1: f.culmulativeHeight, y2: f.culmulativeHeight }) // hanger lines.push({ type: "hanger", isExterior: true, segment: i, x1: +f.bottom / 2, x2: -f.bottom / 2, y1: f.culmulativeHeight, y2: f.culmulativeHeight }) } }) return lines }37:T75c,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, stretchedOutHeight]); const basicPointsPairs = pointPairsOnASide(facets) const t = (pair) => { return { ...pair } } const applyTransform = (lp, tfn) => { return lp.map(tfn) } const linePairs1 = applyTransform(basicPointsPairs, t) linePairs1.forEach((p) => { svg.append("line") .attr("x1", p.x1) .attr("x2", p.x2) .attr("y1", p.y1) .attr("y2", p.y2) .attr("stroke", "black") .attr("stroke-dasharray", p.type === "fold" ? "1,2" : null) }) const t2 = (pair) => { const v1 = rotateVector({ x: pair.x1, y: pair.y1 }, rotationRequired.rotation) const v2 = rotateVector({ x: pair.x2, y: pair.y2 }, rotationRequired.rotation) return { ...pair, x1: v1.x + rotationRequired.translation.x, y1: v1.y + rotationRequired.translation.y, x2: v2.x + rotationRequired.translation.x, y2: v2.y + rotationRequired.translation.y } } const linePairs2 = applyTransform(basicPointsPairs, t2) linePairs2.forEach((p) => { svg.append("line") .attr("x1", p.x1) .attr("x2", p.x2) .attr("y1", p.y1) .attr("y2", p.y2) .attr("stroke", "black") .attr("stroke-dasharray", p.type === "fold" ? "1,2" : null) }) svg.append("line") .attr("x1", rotationRequired.v.x) .attr("y1", rotationRequired.v.y) .attr("x2", rotationRequired.translation.x) .attr("y2", rotationRequired.translation.y) .attr("stroke", "red") svg.append("circle") .attr("cx", rotationRequired.v.x) .attr("cy", rotationRequired.v.y) .attr("r", 3) .attr("fill", "red") svg.append("circle") .attr("cx", rotationRequired.v2.x) .attr("cy", rotationRequired.v2.y) .attr("r", 3) .attr("fill", "green") return svg.node() }38:T7d8,linesToDraw = { const basicPointsPairs = pointPairsOnASide(facets).map((pair) => { return { ...pair, face: 0 } }) let results = [] const extent = { x: [Infinity, -Infinity], y: [Infinity, -Infinity] } d3.range(sides).reduce((memo, i) => { const transform = (pair) => { const v1 = rotateVector({ x: pair.x1, y: pair.y1 }, rotationRequired.rotation) const v2 = rotateVector({ x: pair.x2, y: pair.y2 }, rotationRequired.rotation) const x1 = v1.x + rotationRequired.translation.x const y1 = v1.y + rotationRequired.translation.y const x2 = v2.x + rotationRequired.translation.x const y2 = v2.y + rotationRequired.translation.y if (x1 < extent.x[0] || x2 < extent.x[0]) { extent.x[0] = Math.min(x1, x2) } if (x1 > extent.x[1] || x2 > extent.x[1]) { extent.x[1] = Math.max(x1, x2) } if (y1 < extent.y[0] || y2 < extent.y[0]) { extent.y[0] = Math.min(y1, y2) } if (y1 > extent.y[1] || y2 > extent.y[1]) { extent.y[1] = Math.max(y1, y2) } return { ...pair, x1, y1, x2, y2, face: i, } } const linesGivenSide = (i === 0) ? memo : memo.map(transform) results = results.concat(linesGivenSide) return linesGivenSide }, basicPointsPairs) const xShift = (extent.x[0] < 0) ? Math.abs(extent.x[0]) : 0 const yShift = (extent.y[0] < 0) ? Math.abs(extent.y[0]) : 0 return results.map((pair) => { const switchFromCutToFold = (pair.segment === jointSegment) && !(pair.face === 0 && pair.side === "left") && !(pair.face === sides - 1 && pair.side === "right") return { ...pair, x1: pair.x1 + midlineOffset + 22 + xShift, x2: pair.x2 + midlineOffset + 22 + xShift, y1: pair.y1 + 22 + yShift, y2: pair.y2 + 22 + yShift, type: switchFromCutToFold ? "fold" : pair.type, tabs: !noTabSegments.includes(pair.segment) } }) }39:T621,tabAttachmentLine = (svg, line) => { const midpoint = { x: (line.x1 + line.x2) / 2, y: (line.y1 + line.y2) / 2 } const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2) // Overcut to ensure separation const o1 = { x: line.x1 + Math.cos(theta) * 2, y: line.y1 + Math.sin(theta) * 2 } const o2 = { x: line.x2 - Math.cos(theta) * 2, y: line.y2 - Math.sin(theta) * 2 } let path = (line.side === "left") ? `M ${o1.x} ${o1.y}` : `M ${o2.x} ${o2.y}` path += `L ${midpoint.x} ${midpoint.y}` let direction = (line.side === "left") ? -1 : 1 let slitPoint = { x: midpoint.x + Math.cos(theta) * 3 * direction, y: midpoint.y + Math.sin(theta) * 3 * direction } path += ` L ${slitPoint.x} ${slitPoint.y} L ${midpoint.x} ${midpoint.y}` let tabpoint = { x: midpoint.x + Math.cos(theta + direction * Math.PI / 2) * 10, y: midpoint.y + Math.sin(theta + direction * Math.PI / 2) * 10 } path += ` A 5 5 0 0 0 ${tabpoint.x} ${tabpoint.y}` let tabextension = { x: tabpoint.x + Math.cos(theta) * 5 * direction, y: tabpoint.y + Math.sin(theta) * 5 * direction } path += ` L ${tabextension.x} ${tabextension.y}` let tabends = { x: midpoint.x + Math.cos(theta) * 15 * direction, y: midpoint.y + Math.sin(theta) * 15 * direction } path += ` L ${tabends.x} ${tabends.y}` path += (line.side === "left") ? ` L ${o2.x} ${o2.y}` : ` L ${o1.x} ${o1.y}` svg.append("path") .attr("d", path) .attr("stroke", "black") .attr("fill", "none") }3a:T133f,latchAttachmentLine = (svg, line) => { const midpoint = { x: (line.x1 + line.x2) / 2, y: (line.y1 + line.y2) / 2 } const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2) const ortho = theta - Math.PI / 2 const inner = 5 const pad = 5 const slit = 2 const spadeGap = 2 // Overcut to ensure separation const o1 = { x: line.x1 + Math.cos(theta) * 2, y: line.y1 + Math.sin(theta) * 2 } const o2 = { x: line.x2 - Math.cos(theta) * 2, y: line.y2 - Math.sin(theta) * 2 } // One end let path = (line.side === "left") ? `M ${o1.x} ${o1.y}` : `M ${o2.x} ${o2.y}` const a = 2 const b = 2 const w = 4.5 const c = 9 if (line.side === "left") { const a1 = { x: midpoint.x + Math.cos(theta) * (inner / 2), y: midpoint.y + Math.sin(theta) * (inner / 2) } const a2 = { x: midpoint.x - Math.cos(theta) * (inner / 2), y: midpoint.y - Math.sin(theta) * (inner / 2) } const aa1 = { x: midpoint.x + Math.cos(theta) * (inner / 2) + Math.cos(ortho) * slit, y: midpoint.y + Math.sin(theta) * (inner / 2) + Math.sin(ortho) * slit } const aa2 = { x: midpoint.x - Math.cos(theta) * (inner / 2) + Math.cos(ortho) * slit, y: midpoint.y - Math.sin(theta) * (inner / 2) + Math.sin(ortho) * slit } const b1 = { x: midpoint.x + Math.cos(theta) * (inner / 2 + pad - slit) + Math.cos(ortho) * spadeGap, y: midpoint.y + Math.sin(theta) * (inner / 2 + pad - slit) + Math.sin(ortho) * spadeGap } const b2 = { x: midpoint.x - Math.cos(theta) * (inner / 2 + pad - slit) + Math.cos(ortho) * spadeGap, y: midpoint.y - Math.sin(theta) * (inner / 2 + pad - slit) + Math.sin(ortho) * spadeGap, } const bb1 = { x: midpoint.x + Math.cos(theta) * (inner / 2 + pad - slit) + Math.cos(ortho) * (pad + spadeGap), y: midpoint.y + Math.sin(theta) * (inner / 2 + pad - slit) + Math.sin(ortho) * (pad + spadeGap) } const bb2 = { x: midpoint.x - Math.cos(theta) * (inner / 2 + pad - slit) + Math.cos(ortho) * (pad + spadeGap), y: midpoint.y - Math.sin(theta) * (inner / 2 + pad - slit) + Math.sin(ortho) * (pad + spadeGap), } const cp = { x: midpoint.x + Math.cos(ortho) * (2 * pad + spadeGap), y: midpoint.y + Math.sin(ortho) * (2 * pad + spadeGap) } path += ` L ${a1.x} ${a1.y} L ${aa1.x} ${aa1.y} L ${b1.x} ${b1.y} L ${bb1.x} ${bb1.y} L ${cp.x} ${cp.y} L ${bb2.x} ${bb2.y} L ${b2.x} ${b2.y} L ${aa2.x} ${aa2.y} L ${a2.x} ${a2.y}` } else { const o = c + 2 const p1 = { x: midpoint.x - Math.cos(theta) * (inner / 2 + pad * 2), y: midpoint.y - Math.sin(theta) * (inner / 2 + pad * 2) } const p2 = { x: midpoint.x - Math.cos(theta) * pad - Math.cos(ortho) * pad, y: midpoint.y - Math.sin(theta) * pad - Math.sin(ortho) * pad } const p3 = { x: midpoint.x + Math.cos(theta) * pad - Math.cos(ortho) * pad, y: midpoint.y + Math.sin(theta) * pad - Math.sin(ortho) * pad } const p4 = { x: midpoint.x + Math.cos(theta) * (inner / 2 + pad * 2), y: midpoint.y + Math.sin(theta) * (inner / 2 + pad * 2) } path += ` L ${p1.x} ${p1.y} L ${p2.x} ${p2.y} L ${p3.x} ${p3.y} L ${p4.x} ${p4.y}` const h = a + 3.5 const i1 = { x: midpoint.x + Math.cos(theta) * inner / 2, y: midpoint.y + Math.sin(theta) * inner / 2 } const i2 = { x: midpoint.x - Math.cos(theta) * inner / 2, y: midpoint.y - Math.sin(theta) * inner / 2 } const ii1 = { x: midpoint.x + Math.cos(ortho) * pad + Math.cos(theta) * (inner / 2 + pad), y: midpoint.y + Math.sin(ortho) * pad + Math.sin(theta) * (inner / 2 + pad) } const ii2 = { x: midpoint.x + Math.cos(ortho) * pad - Math.cos(theta) * (inner / 2 + pad), y: midpoint.y + Math.sin(ortho) * pad - Math.sin(theta) * (inner / 2 + pad) } const is1 = { x: midpoint.x + Math.cos(ortho) * (pad + slit) + Math.cos(theta) * (inner / 2 + pad), y: midpoint.y + Math.sin(ortho) * (pad + slit) + Math.sin(theta) * (inner / 2 + pad) } const is2 = { x: midpoint.x + Math.cos(ortho) * (pad + slit) - Math.cos(theta) * (inner / 2 + pad), y: midpoint.y + Math.sin(ortho) * (pad + slit) - Math.sin(theta) * (inner / 2 + pad) } svg.append("path") .attr("d", `M ${is1.x} ${is1.y} L ${ii1.x} ${ii1.y} A ${pad} ${pad} 0 0 0 ${i1.x} ${i1.y} L ${i2.x} ${i2.y} A ${pad} ${pad} 0 0 0 ${ii2.x} ${ii2.y} L ${is2.x} ${is2.y} z`) .attr("stroke", "black") .attr("fill", "none") } // Other end path += (line.side === "left") ? ` L ${o2.x} ${o2.y}` : ` L ${o1.x} ${o1.y}` svg.append("path") .attr("d", path) .attr("stroke", "black") .attr("fill", "none") }3b:T66d,hangerLine = (svg, line) => { if (line.face > 0) { svg.append("path") .attr("d", `M ${line.x1} ${line.y1} L ${line.x2} ${line.y2}`) .attr("stroke", "black") .attr("fill", "none") } else { const midpoint = { x: (line.x1 + line.x2) / 2, y: (line.y1 + line.y2) / 2 } const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2) const ortho = theta - Math.PI / 2 const length = Math.hypot(line.x1 - line.x2, line.y1 - line.y2) const r = 10 const or = r + 8 const holeOffset = hangerLength - or const c = { x: midpoint.x + Math.cos(ortho) * holeOffset, y: midpoint.y + Math.sin(ortho) * holeOffset, } const d1 = Math.hypot(c.x - line.x1, c.y - line.y1) const ot1 = Math.atan2(line.y1 - c.y, line.x1 - c.x) const t1 = Math.acos(or / d1) const pot1 = { x: c.x + Math.cos(ot1 - t1) * or, y: c.y + Math.sin(ot1 - t1) * or } const d2 = Math.hypot(c.x - line.x2, c.y - line.y2) const ot2 = Math.atan2(line.y2 - c.y, line.x2 - c.x) const t2 = Math.acos(or / d2) const pot2 = { x: c.x + Math.cos(ot2 + t2) * or, y: c.y + Math.sin(ot2 + t2) * or } const flag = (length <= or * 2) ? "1" : "0" svg.append("path") .attr("d", `M ${line.x1} ${line.y1} L ${pot1.x} ${pot1.y} A ${or} ${or} 0 ${flag} 0 ${pot2.x} ${pot2.y} L ${line.x2} ${line.y2}`) .attr("stroke", "black") .attr("fill", "none") svg.append("circle") .attr("cx", c.x) .attr("cy", c.y) .attr("r", r) .attr("stroke", "black") .attr("fill", "none") } }3c:[{"id":"2803dd7141f8f6ed98719867fe03503227d981bc07f8990696e8a66bbd973e9adccbc83c0455f994cba706caa69f295c1340c13fb56f86efcc4a9bd7d508af4a","href":"https://static.observableusercontent.com/files/2803dd7141f8f6ed98719867fe03503227d981bc07f8990696e8a66bbd973e9adccbc83c0455f994cba706caa69f295c1340c13fb56f86efcc4a9bd7d508af4a","name":"0B8171B3-32E2-4AB3-BB13-A89B4034838A.JPG.jpeg","type":"image/jpeg","lastModified":1607834539745.662,"size":6200826}] 32:{"id":"282278e4ff9adb85","slug":"papercraft-christmas-ornaments-generator","title":"Papercraft Christmas Ornaments Generator","thumbnail":"12b7a9b866a5c37afc92b20caae62b5c6290e5af9fc72409223b9af9742a0099","access_level":"public","create_time":"$D2020-12-05T21:57:46.715Z","update_time":"$D2020-12-19T01:36:42.089Z","view_time":null,"first_public_time":"$D2020-12-13T06:06:37.309Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"d23b8bbc584a6b18","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":"starter_2024"},"version":1295,"publish_version":1295,"role":null,"authored":false,"authors":[{"type":"individual","id":"a469f43f1f5e7f92","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":null}],"members":[{"type":"individual","id":"a469f43f1f5e7f92","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"6ad523ac4dcb4b45","slug":"instagram-shares","title":"Observable's Instagram Shares","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Papercraft Christmas Ornaments Generator","cells":[{"id":0,"value":"md`# Papercraft Christmas Ornaments Generator\n\nSo we have a Cricut Air Explore 2 machine, which is effectively a CNC cutting machine marketed at crafters. Bought it a couple years ago with the idea of making vis things with it, and I finally got around to a project!\n\nSkipping ahead to the results:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const scoreLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"skip\":\n break;\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCreaseLine(scoreLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"viewof sides = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"viewof segmentCount = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"viewof jointSegment = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"noTabSegments = [0, 3, 4]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"html`

\n ${await FileAttachment(\"0B8171B3-32E2-4AB3-BB13-A89B4034838A.JPG.jpeg\").image()}\n

This is roughly how it looks.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# Now for Process Stuff\n\nGiven the number of sides, and the number of segments, I want to generate the cutting template. Assuming I want the ornament to be round-ish, we'll start with an array of points roughly on a circle. Think of generating the bulb shape as a sequence of 2D coordinates, where Z is the distance along the *spine* of the oranment, and W is the offset from the spine.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"bulbOutline = {\n const n = segmentCount\n const r = 115 // Radius of the Ornament\n const o = r + hangerLength // 50 is how tall the hanger tab is\n \n const t = 0.13 // The initial segment's angle\n \n const main = d3.range(n).map(i => {\n const theta = Math.PI * (0.5 + t) + i * (Math.PI - t) / (n)\n \n return {\n theta,\n z: o - Math.sin(theta) * r,\n w: -Math.cos(theta) * r\n }\n })\n \n return [{ z: 0, w: 0}, { z: hangerLength, w: 12 }].concat(main).concat([{ z: o + r, w: 0 }])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`Okay, what does that look like?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, bulbOutline[bulbOutline.length - 1].z + 20]);\n\n // Mid-line\n svg.append(\"line\")\n .attr(\"stroke-dasharray\", \"1 2\")\n .attr(\"x1\", maxWOffset)\n .attr(\"y1\", 0)\n .attr(\"x2\", maxWOffset)\n .attr(\"y2\", height)\n .attr(\"stroke\", \"black\")\n \n let leftSide = bulbOutline.map((left) => {\n return { x: maxWOffset - left.w, y: left.z }\n })\n \n let rightSide = bulbOutline.slice(0, bulbOutline.length - 1).reverse().map((d) => {\n return { x: maxWOffset + d.w, y: d.z }\n })\n \n const silhouette = [].concat(leftSide).concat(rightSide)\n \n const lineGenerator = d3.line(d => d.x, d => d.y);\n const silhouetteLine = lineGenerator(silhouette)\n \n svg.append(\"path\")\n .attr(\"d\", silhouetteLine + \"z\")\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\")\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`... but we don't want a flat ornament. We want it to be in 3D. So how many sides do we want?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"sides","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`Now we get to the part where I initially didn't actually know how to make this work. I want to understand how do I get the length of the facets, and the angles at which they attach.\n\nWhat do I already know? I already know that lengths of the \"vertical\" edges between each will be determined by each pair of points in our bulbOutline. Let's call each pair a segment for now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"segments = d3.pairs(bulbOutline).map(p => {\n return {\n points: p,\n length: Math.hypot(p[0].z - p[1].z, p[0].w - p[1].w) // Math.hypot is just the pythagoras formula \n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`That takes care of the vertical edges.\n\nWhat about the horizontal edges? This is where I have to know how many sides the ornament has. The horizontal edge's length at each point is a function of the offset (w) and an angle. The angle is 2 * pi / sides. ... I think.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"anglesBetweenSides = 2 * Math.PI / sides","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`The rest is... more trigonometry. Imagine the cross-section of the ornament. We know it is made up of as many triangles as there are sides. Furthermore, we know the lengths of two sides of these triangle already (it is w). Now we can use the sine function to get the third side.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"horizontalEdgeCalc = (hypot) => {\n return Math.sin(anglesBetweenSides / 2) * hypot * 2\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"horizontalEdgeLengths = bulbOutline.map((p) => {\n return horizontalEdgeCalc(p.w)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"horizontalEdgePairs = d3.pairs(horizontalEdgeLengths)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`The red lines there represent the horizontal edges.\n\nWe now have the lengths of both horizontal and the vertical edges of facets on the ornament. We know that the horizontal edges should be parallel to each other, and that the facets should be symetrical. These constraints will allow us to again use trigonometry compute how tall each facet is.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"facetHeightCalc = (top, bottom, side) => {\n const diff = Math.abs(top - bottom)\n const theta = Math.asin(diff / 2 / side)\n return Math.cos(theta) * side\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"facets = segments.reduce((memo, s, i) => {\n const h = horizontalEdgePairs[i]\n const facetHeight = facetHeightCalc(h[0], h[1], s.length)\n \n memo.push({\n points: s.points,\n side: s.length,\n top: h[0],\n bottom: h[1],\n height: facetHeight,\n culmulativeHeight: i === 0 ? facetHeight : memo[i - 1].culmulativeHeight + facetHeight\n })\n \n return memo\n}, [])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`That should give us all the dimensions we need to draw shape for one side of the papercraft ornament! Let's see if it works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"stretchedOutHeight = facets.reduce((memo, d) => {\n return memo + d.height\n}, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"midlineOffset = d3.max(horizontalEdgeLengths) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, stretchedOutHeight]);\n \n const t = (pair) => {\n return {\n ...pair,\n x1: pair.x1 + midlineOffset,\n x2: pair.x2 + midlineOffset\n }\n }\n \n const applyTransform = (lp, tfn) => {\n return lp.map(tfn)\n }\n \n const linePairs = applyTransform(pointPairsOnASide(facets), t)\n \n linePairs.forEach((p) => {\n svg.append(\"line\")\n .attr(\"x1\", p.x1)\n .attr(\"x2\", p.x2)\n .attr(\"y1\", p.y1)\n .attr(\"y2\", p.y2)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-dasharray\", p.type === \"fold\" ? \"1,2\" : null)\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`Ok cool, so that's one side, but we have six sides, and we want to cut them out in a way where they are attached together... Let's just start with how to attach two of them together.\n\nWe have to pick one fo the sides, and make them be a joint side. Which means that we have to translate and rotate them according an angle.\n\nBut how much to rotate and translate depends on which segment we join on.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"jointSegment","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"rotationRequired = {\n // facets[jointSegment]\n \n const v = {\n x: facets[jointSegment].top / 2,\n y: facets[jointSegment].culmulativeHeight - facets[jointSegment].height\n }\n \n const v2 = {\n x: facets[jointSegment].bottom / 2,\n y: facets[jointSegment].culmulativeHeight \n }\n \n const diff = {\n x: v2.x - v.x,\n y: v2.y - v.y\n }\n \n const v2theta = Math.atan2(v2.x, v2.y)\n const theta = Math.PI / 2 - 2 * Math.atan2(diff.x, diff.y) + v2theta\n const length = Math.hypot(v2.x, v2.y)\n \n const translation = {\n x: v2.x - Math.cos(theta) * length,\n y: v2.y - Math.sin(theta) * length\n }\n \n return {\n f: facets[jointSegment],\n v,\n v2,\n length,\n rotation: -2 * Math.atan2(diff.x, diff.y),\n translation\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`Ok, so that works. Let's do it (pseudo-recursively) as many times as there are sides.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"md`Now I have all the lines that are required to draw the template. And I have computed whether the line should be a cut line or a fold line (or the hanger) as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"drawingExtent = computeDrawingExtent(linesToDraw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n linesToDraw.forEach((p) => {\n svg.append(\"line\")\n .attr(\"x1\", p.x1)\n .attr(\"x2\", p.x2)\n .attr(\"y1\", p.y1)\n .attr(\"y2\", p.y2)\n .attr(\"stroke\", p.type === \"hanger\" ? \"red\" : \"black\")\n .attr(\"stroke-dasharray\", p.type === \"fold\" ? \"1,2\" : null)\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`Since I don't want to use glue, I'm going to be overly clever and add tabs to attach the sides together. I'll need to add hints for each segments are too close together and thus no tabs should be added though.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"noTabSegments","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"md`With the use of tabs, I now have to distinguish between types of lines, and the \"renderer\" for the types of lines. The following is a bunch of line type implementations.\n\nStarting with a \"regular\" line.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"regularLine = (svg, line) => {\n const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2)\n \n // Overcut to ensure separation\n const o1 = {\n x: line.x1 + Math.cos(theta) * 1,\n y: line.y1 + Math.sin(theta) * 1\n }\n \n const o2 = {\n x: line.x2 - Math.cos(theta) * 1,\n y: line.y2 - Math.sin(theta) * 1\n }\n \n svg.append(\"path\")\n .attr(\"d\", `M ${o1.x} ${o1.y} L ${o2.x} ${o2.y}`)\n .attr(\"stroke\", \"black\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1239,"value":"md`First I tried a symetrical set of tabs. Worked well with thin paper, but didn't work as well for thick ones`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"fold\":\n svg.append(\"line\")\n .attr(\"x1\", p.x1)\n .attr(\"x2\", p.x2)\n .attr(\"y1\", p.y1)\n .attr(\"y2\", p.y2)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-dasharray\", \"1,2\")\n break;\n default:\n if (p.tabs) {\n tabAttachmentLine(svg, p)\n } else {\n regularLine(svg, p)\n }\n }\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"md`After a bunch of experimenting and printing/cutting, I came up with this latch instead`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const scoreLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"fold\":\n svg.append(\"line\")\n .attr(\"x1\", p.x1)\n .attr(\"x2\", p.x2)\n .attr(\"y1\", p.y1)\n .attr(\"y2\", p.y2)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-dasharray\", \"1,2\")\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"md`After a while it ocurred to me that I needed a way to hang them.\n\nTo accomodate a variety of widths that the attachment might come at, I wrote a bit of code that adjusted the tab design according to the width. Just a bit of tangent calculations.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"{\n // Hanger Tester\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 110]);\n \n d3.range(12).forEach((i) => {\n const line = {\n x1: 50 + i * 70 + 10 + i * 5,\n x2: 50 + i * 70,\n y1: 100,\n y2: 100\n }\n \n hangerLine(svg, line)\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"hangerLength = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const scoreLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCreaseLine(scoreLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`As an alternative to using the scorer on the Cricut, I also wrote some code that did a sort of perforated cuts for folding as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"{ \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);\n \n const cutLayer = svg.append(\"g\")\n const scoreLayer = svg.append(\"g\")\n \n linesToDraw.forEach((p) => {\n switch (p.type) {\n case \"hanger\":\n hangerLine(cutLayer, p)\n break;\n case \"fold\":\n foldCutLine(cutLayer, p)\n break;\n default:\n if (p.tabs) {\n latchAttachmentLine(cutLayer, p)\n } else {\n regularLine(cutLayer, p)\n }\n }\n })\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"notchCreaseLine = (svg, line) => {\n const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2)\n const length = Math.hypot(line.y1 - line.y2, line.x1 - line.x2)\n \n const s = {\n x: line.x1 - 5 * Math.cos(theta),\n y: line.y1 - 5 * Math.sin(theta)\n }\n \n const e = {\n x: line.x2 + 5 * Math.cos(theta),\n y: line.y2 + 5 * Math.sin(theta)\n }\n \n svg.append(\"path\")\n .attr(\"d\", `M ${line.x1} ${line.y1} L ${s.x} ${s.y}`)\n .attr(\"stroke\", \"black\")\n \n svg.append(\"path\")\n .attr(\"d\", `M ${line.x2} ${line.y2} L ${e.x} ${e.y}`)\n .attr(\"stroke\", \"black\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"foldCreaseLine = (svg, line) => {\n svg.append(\"path\")\n .attr(\"d\", `M ${line.x1} ${line.y1} L ${line.x2} ${line.y2}`)\n .attr(\"stroke\", \"blue\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"foldCutLine = (svg, line) => {\n const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2)\n const length = Math.hypot(line.y1 - line.y2, line.x1 - line.x2)\n const lengthWithPadding = length - 6\n \n const unit = 12\n const counts = Math.round(lengthWithPadding / unit)\n const remainder = length - counts * unit\n \n d3.range(counts).forEach(i => {\n const p = {\n x: line.x1 - Math.cos(theta) * (i * unit + remainder + 3),\n y: line.y1 - Math.sin(theta) * (i * unit + remainder + 3)\n }\n \n const p2 = {\n x: line.x1 - Math.cos(theta) * (i * unit + remainder - 3),\n y: line.y1 - Math.sin(theta) * (i * unit + remainder - 3)\n }\n \n svg.append(\"path\")\n .attr(\"d\", `M ${p.x} ${p.y} L ${p2.x} ${p2.y}`)\n .attr(\"stroke\", \"black\")\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"md`Below here are utils and things`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"computeDrawingExtent = (linesToDraw) => {\n const results = {\n x: [Infinity, -Infinity],\n y: [Infinity, -Infinity]\n }\n \n const linesExtents = linesToDraw.map(l => {\n if (l.x1 < results.x[0] || l.x2 < results.x[0]) { results.x[0] = Math.min(l.x1, l.x2) }\n if (l.x1 > results.x[1] || l.x2 > results.x[1]) { results.x[1] = Math.max(l.x1, l.x2) }\n if (l.y1 < results.y[0] || l.y2 < results.y[0]) { results.y[0] = Math.min(l.y1, l.y2) }\n if (l.y1 > results.y[1] || l.y2 > results.y[1]) { results.y[1] = Math.max(l.y1, l.y2) }\n })\n \n return results\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"rotateVector = (vector, theta) => {\n const { x, y } = vector\n \n // first column of the matrix\n const xa = x * Math.cos(theta)\n const xb = x * Math.sin(theta)\n \n // second column of the matrix\n const yc = y * -Math.sin(theta)\n const yd = y * Math.cos(theta)\n \n // sum the components\n return {\n\t x: xa + yc,\n y: xb + yd\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"maxWOffset = d3.max(bulbOutline, d => d.w)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = bulbOutline[bulbOutline.length - 1].z","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"