29:null 2a:["$","title",null,{"children":"Origami stripe calculator | Gilmore Davidson | Observable"}] 2f:T999,points = (() => { let edge = [], edgeNudged = []; let folded = [], foldedNudged = []; let cp = []; const yEndBuffer = 0.05; // Calculate some starting reference points const xEdgeFull = Math.tan(alpha); const xEdgeStep = xEdgeFull / stripeCount; const xFoldedFull = Math.tan(gamma); const xFoldedStep = xFoldedFull / stripeCount; const top = 1 - stripeLength; const topFoldCount = Math.floor(stripeCount / 2); const bottomFoldCount = Math.floor((stripeCount - 1) / 2); const cpReflectAngle = 2 * gammaInverse - Math.PI / 2; // This calculation comes from `edgeYNudge` below const maxY = 1 + layerNudge * (bottomFoldCount * 2 - 1); const yStart = maxY + yEndBuffer; // Calculate left side first edge.push([-xEdgeFull * yStart, yStart]); edgeNudged.push([-xEdgeFull * yStart, yStart]); folded.push([-xFoldedFull * yStart, yStart]); foldedNudged.push([-xFoldedFull * yStart, yStart]); let xCpPrev = xFoldedFull * yStart; let yCpPrev = yStart; for (let i = 1; i <= stripeCount; i++) { let xEdge = xEdgeFull - xEdgeStep * i; let xCp = xFoldedFull - xFoldedStep * i; let xCpDiff = xCp - xEdge; let xCpEdge = xCp + Math.sin(cpReflectAngle) * xCpDiff; let xFolded = xCp; let y = i % 2 ? top : 1; let yCp = 1 - (i * stripeLength); let yCpEdge = yCp - Math.cos(cpReflectAngle) * xCpDiff; let foldedYNudge = Math.floor((i - 1) / 2); let i2 = foldedYNudge + 1; let edgeYNudge = i === stripeCount ? foldedYNudge : i % 2 ? topFoldCount + (topFoldCount - i2) : bottomFoldCount + (bottomFoldCount - i2); edge.push([-xEdge, y]); edgeNudged.push([-xEdge, y + layerNudge * edgeYNudge]); folded.push([-xFolded, y]); foldedNudged.push([-xFolded, y + layerNudge * foldedYNudge]); // Valley/mountain folds for the crease pattern let cpType = { type: i % 2 ? 'valley' : 'mountain' } cp.push( [[[-xCpPrev, yCpPrev], [-xCp, yCp]], cpType], [[[xCpPrev, yCpPrev], [xCp, yCp]], cpType], ); if (i < stripeCount) { cp.push([ [[-xCpEdge, yCpEdge], [-xCp, yCp], [xCp, yCp], [xCpEdge, yCpEdge]], cpType ]); } xCpPrev = xCp; yCpPrev = yCp; } // Mirror points to the right side return { edge: mirrorPoints(edge), edgeNudged: mirrorPoints(edgeNudged), folded: mirrorPoints(folded), foldedNudged: mirrorPoints(foldedNudged), cp, maxY, }; })()30:[] 2d:{"id":"ae3007a30ecf5d3b","slug":"origami-stripe-calculator","title":"Origami stripe calculator","thumbnail":"230ff0112004920dda0056f06cb826b1a0054ac0a4f3649c112ce7098d677acd","access_level":"public","create_time":"$D2024-12-14T08:54:38.501Z","update_time":"$D2025-04-10T08:18:21.576Z","view_time":null,"first_public_time":"$D2025-04-10T08:11:37.476Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f55ed877764964a2","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":"starter_2024"},"version":482,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"000f2f22dc882a0b","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":null}],"members":[{"type":"individual","id":"000f2f22dc882a0b","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":null,"role":"editor"},{"type":"team","id":"f55ed877764964a2","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6a0528209d2e64da","slug":"origami","title":"Origami","owner":{"id":"f55ed877764964a2","login":"gilmoreorless","name":"Gilmore Davidson"}},"type":"notebook","body":{"title":"Origami stripe calculator","cells":[{"id":0,"value":"# Origami stripe calculator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This is a work-in-progress tool to play around with generating colour-change stripes for origami models.\n\nIt‘s based on a technique taught to me by Steven Casey (and used in his Numbat design), then generalised for multiple parameters. I originally started this just to calculate how much paper would be used for specific values. Then it kind of got away from me.\n\nPlay with the sliders to change the model’s parameters.\n\nI might turn this into a proper dedicated web app at some point. _Might._\n\n**NOTE:** I’m still testing out ideas, so this is likely to be buggy.\n\nSome future ideas:\n- Asymmetric fold angles.\n- Stripes of different lengths.\n- Export to `.cp` or `.fold` format.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"

Folded figure with indicative layering:

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof stripeCount = Inputs.range([1, 11], {label: \"Stripe count\", value: 3, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof stripeAngleDeg = Inputs.range([5, 85], {label: \"Stripe angle °\", step: 1, value: 25})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof layerNudge = Inputs.range([0, 0.02], {label: \"Layer display offset\", step: 0.001, value: 0.006})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"

Crease pattern (with folded overlay):

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"----\n\nThe remaining cells below are just used for calculating the figures above.\n\nFirst some simple values derived from the inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"stripeLength = 1 / stripeCount","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"stripeAngle = stripeAngleDeg / 180 * Math.PI // deg2rad","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// Stripe angle, as measured from a vertical line from the corner\nalpha = stripeAngle / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Angle from the paper edge to the main long folds\nbeta = (Math.PI / 4 - alpha) / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Angle from the vertical to the main long folds\ngamma = alpha + beta","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"gammaInverse = Math.PI / 2 - gamma","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"layerCount = stripeCount * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"// Scaling factor to make the folded figure as large as possible without exceeding boundaries\nfoldedScaling = Math.min(\n // Maximum X scaling\n 1 / Math.tan(gamma * points.maxY),\n // Maximum Y scaling\n 1 / (points.maxY - (1 - stripeLength)),\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"----\n\nNext are some small helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"scaleCp = (n) => Math.round(n * 1e4) / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"scaleFolded = (n) => Math.round(n * foldedScaling * 1e4) / 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"mirrorPoints = (points) => points.concat(\n // Copy all except the last value, which is the centre point\n points.slice(0, -1)\n // Reverse the order\n .reverse()\n // Invert the x value only\n .map(([x, y]) => [-x, y])\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"function pathCoords(points, closePath, scaleFn = scaleCp) {\n const [m1, m2, ...rest] = points.flatMap(p => p.map(scaleFn));\n return `M${m1},${m2} L${rest.join()}${closePath ? ' Z' : ''}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"----\n\nFinally, some complex objects and styles for generating the SVG figures. These are the core calculations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"layers = (() => {\n let layers = Array(layerCount);\n // Build 2 layers each loop iteration, starting from each end\n for (let i = 0; i < stripeCount; i++) {\n let i2 = i + 2,\n i3 = i > 0 ? -i : undefined;\n layers[i] = [\n ...points.foldedNudged.slice(i, i2),\n ...points.foldedNudged.slice(-i2, i3),\n ];\n layers[layerCount - i - 1] = [\n ...layers[i].slice(0, 2),\n ...points.edgeNudged.slice(i, i2).reverse(),\n ...points.edgeNudged.slice(-i2, i3).reverse(),\n ...layers[i].slice(-2),\n ];\n }\n return layers;\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"