31:T120e,model = (frame) => { const flipX = (shape, next, i) => ({ frame: (controls) => ln.scale(new ln.Vector(-1, 1, 1)), folds: [shape(next, i)] }) const repeat = (n, shape, next) => range(n).reduce( (acc, i) => shape((i) => acc, i), next || (() => {}) ) const crenulation = (i) => (next) => ({ frame: (u) => ln.rotate(new ln.Vector(0, 1, 0),-interpolate(i+frame, 0, 180) * toRad) .translate(new ln.Vector(0,1,0)), shape: squaredrectangle(1,1), folds: [{ frame: (u) => ln.rotate(new ln.Vector(0, 1, 0), interpolate(i+frame, 0, 180) * toRad) .translate(new ln.Vector(0,1,0)), shape: squaredrectangle(1,1), folds: [next()] }] }) const flatSide = (next, i) => ({ // inner frame: (u) => ln.rotate(new ln.Vector(0, 1, 0), interpolate(i + frame, 0, 90) * toRad) .translate(new ln.Vector(2,0,0)), shape: squaredrectangle(2,4), folds: [ { frame: () => ln.translate(new ln.Vector(2,-1,0)), folds: [repeat(2, crenulation(i))] }, { // Tall outer wall frame: (u) => ln.translate(new ln.Vector(1,0,0)) .rotate(new ln.Vector(0, 1, 0), interpolate(i+frame, 0, -180) * toRad) .translate(new ln.Vector(3,0,0)), shape: squaredrectangle(5,4), folds: [{ frame: () => ln.rotate(new ln.Vector(0,1,0), 180 * toRad).translate(new ln.Vector(0,-1,0)), folds: [repeat(2, crenulation(i))] },{ // Foot flap frame: (u) => ln.rotate(new ln.Vector(0, 1, 0), interpolate(i + frame, 0, 90) * toRad) .translate(new ln.Vector(5,0,0)), shape: squaredrectangle(1,4) }] } ] }) const indentSide = (next, i) => ({ // inner frame: (u) => ln.rotate(new ln.Vector(0, 1, 0), interpolate(i + frame, 0, 90) * toRad) .translate(new ln.Vector(2,0,0)), shape: squaredrectangle(2,4), folds: [{ frame: () => ln.translate(new ln.Vector(2,-1,0)), folds: [repeat(2, crenulation(i))] }, { // Upper outer wall frame: (u) => ln.translate(new ln.Vector(1,0,0)) .rotate(new ln.Vector(0, 1, 0), interpolate(i +frame, 0, -180) * toRad) .translate(new ln.Vector(3,0,0)), shape: squaredrectangle(2,4), folds: [{ frame: () => ln.rotate(new ln.Vector(0,1,0), 180 * toRad) .translate(new ln.Vector(0,-1,0)), folds: [repeat(2, crenulation(i))] }, { // Underhang flap frame: (u) => ln.rotate(new ln.Vector(0, 1, 0),interpolate(i + frame, 0, -90) * toRad) .translate(new ln.Vector(2,0,0)), shape: squaredrectangle(1,4), folds: [{ // Indented lower wall frame: (u) => ln.rotate(new ln.Vector(0, 1, 0), interpolate(i+frame, 0, 90) * toRad) .translate(new ln.Vector(1,0,0)), shape: squaredrectangle(3,4), folds: [{ // Foot frame: (u) => ln.rotate(new ln.Vector(0, 1, 0), interpolate(i + frame, 0, 90) * toRad) .translate(new ln.Vector(3,0,0)), shape: squaredrectangle(2,4) }] } ] }] } ] }) const cellFlat = (next, i) => { let nextValue = undefined; if (next) nextValue = next(i); return ({ // Walkway folds: [{ frame: () => ln.translate(new ln.Vector(-2,0,0)), shape: squaredrectangle(4,4) },flatSide(null, i), flipX(flatSide, null, i), { frame:() => ln.translate(new ln.Vector(0,4,0)), ...nextValue && {folds: [nextValue]} }] }) } const cellIndent = (next, i) => { let nextValue = undefined; if (next) nextValue = next(i); return ({ // Walkway folds: [{ frame: () => ln.translate(new ln.Vector(-2,0,0)), shape: squaredrectangle(4,4) },indentSide(null, i), flipX(indentSide, null, i), { frame:() => ln.translate(new ln.Vector(0,4,0)), ...nextValue && {folds: [nextValue]} }] }) } return ({ frame: (controls) => ln.translate(new ln.Vector(0,8-frame * 8,0)), folds: [repeat( Math.ceil(Math.max(1, Math.abs(controls.n / 10))), (next, i) => { return cellFlat(() => cellIndent(next, i), i); })] }) }32:[{"id":"ea3ca07be9678ab2c9bd3f5b671a6ab33ebfbe97b0b281097c6a2796ba13b4832b207f3f177c2a267e7d5bf12c04e577d222a1376d769df61d579d2882c27854","href":"https://static.observableusercontent.com/files/ea3ca07be9678ab2c9bd3f5b671a6ab33ebfbe97b0b281097c6a2796ba13b4832b207f3f177c2a267e7d5bf12c04e577d222a1376d769df61d579d2882c27854","name":"image.png","type":"image/png","lastModified":1608322092042.051,"size":1180478},{"id":"5124797db70bfc1d8b7c056787ff0059b13c569921ed8c9a13300ac102f58256a8b9b5eef29cee071023516ca8513b68bc8be33c7c1639fbb792dbfde566081b","href":"https://static.observableusercontent.com/files/5124797db70bfc1d8b7c056787ff0059b13c569921ed8c9a13300ac102f58256a8b9b5eef29cee071023516ca8513b68bc8be33c7c1639fbb792dbfde566081b","name":"image@1.png","type":"image/png","lastModified":1608322222854.51,"size":134247}] 2f:{"title":"Infinite Kirigami: The Endless Wall","cells":[{"id":114,"value":"md`# Infinite Kirigami: The Endless Wall\n\nWith introduction of a (t) => svg function we can create motion. By passing the _repeat_ index through the kinematic graph, we can interplolate along an infinite line.\n\n![screenshot](${await FileAttachment(\"image@1.png\").url()})\n\nThe implementation is slow on my computer now, this is an easy way to create a lot of geometry fast.\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"controls","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"interpolate = (i, start, end) => (start + Math.max(0, Math.min(1, (i + controls.d) / controls.l)) * (end - start))","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"viewof controls = {\n const labels = [\"r\", \"of\", \"c0\", \"c1\", \"d\", \"l\", \"n\"]\n const values = {\n \"r\": 42,\n \"of\": 42,\n \"c0\": -100,\n \"c1\": 180,\n \"d\": -6,\n \"l\": 7,\n \"n\": 144,\n }\n return form(html`

\n \n \n ${labels.map(label => html``)}\n \n \n \n \n ${labels.map(label => html``)}\n \n

${label}

`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"view = {\n let frame = 0;\n while (true) {\n yield svg(frame / 30.0)\n frame = ((frame + 1) % 30)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"svg = (frame) => {\n const r = controls.r\n const offset = controls.of\n let eye = new ln.Vector(\n r * Math.cos(controls.c0 * toRad) * Math.cos(controls.c1 * toRad),\n r * Math.sin(controls.c0 * toRad) + offset,\n r * Math.sin(controls.c1 * toRad));\n\n let center = new ln.Vector(0, offset, 0);\n let up = new ln.Vector(0, 0, 1);\n const height = 500\n let paths = scene(frame).render(eye, center, up, width, height, 35, 0.5, 1000, 0.3)\n const svgCode = ln.toSVG(paths, width, height)\n const svg = html`${svgCode}`\n svg.setAttribute( 'style', `stroke: yellow !important;\n background-image: linear-gradient(50deg, #EEE, #EFE); \n stroke-width: 1px`)\n //throw Error()\n return svg\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"scene = (frame) => {\n // first thing is to create a scene\n const scene = new ln.Scene()\n \n function loadModel(scene, frame, model) {\n if (model === undefined) return;\n const f = model.frame ? frame.mul(model.frame(controls))\n : frame;\n if(model.shape) scene.add(new ln.TransformedShape(model.shape, f));\n (model.folds || []).forEach(fold => {\n loadModel(scene, f, fold);\n })\n }\n \n loadModel(scene, ln.identity(), model(frame));\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"squaredrectangle = (w, h) => {\n const thickness= 0.01;\n const min = new ln.Vector(0, 0, 0)\n const max = new ln.Vector(w, h, thickness)\n const cube = new ln.Cube(min, max)\n\n cube.insec\n \n // we can specify which paths to render and create new ones:\n cube.paths = function() {\n const paths = []\n const { x: x1, y: y1} = this.min\n const { x: x2, y: y2} = this.max\n for(let i = 0; i <= w; i++) {\n const x = x1 + (x2 - x1) * (i / w);\n paths.push([new ln.Vector(x, 0, thickness), new ln.Vector(x, h, thickness)])\n paths.push([new ln.Vector(x, 0, 0), new ln.Vector(x, h, 0)])\n }\n \n for(let j = 0; j <= h; j++) {\n const y = y1 + (y2 - y1) * (j / h);\n paths.push([new ln.Vector(0, y, thickness), new ln.Vector(w, y, thickness)])\n paths.push([new ln.Vector(0, y, 0), new ln.Vector(w, y, 0)])\n }\n return paths\n }\n return cube;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"range = (n) => [...Array(n).keys()];","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"toRad = Math.PI / 180","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"ln = import('https://unpkg.com/@lnjs/core@0.5.0/es/index.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1466,"value":"import { footer } from \"@tomlarkworthy/footer\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1484,"value":"footer","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}