2a:null 2b:["$","title",null,{"children":"3D L-systems | Kelley van Evert | Observable"}] 30:T680,html`

Fern Canvas ⊙﹏⊙

${cdraw(await linedata(fern3d), { rot: 210, stroke: '#3e840f' })}

3D Hilbert curve Canvas ⊙﹏⊙

${cdraw(await linedata(hilbert3d, 3), { marg: .7, anim_t: 3000, stroke: '#3b2f3f' })}

Fern SVG ◔⌣◔

${svgdraw(await linedata(fern3d), { rot: 210, stroke: '#3e840f' })}

3D Hilbert curve SVG ◔⌣◔

${svgdraw(await linedata(hilbert3d, 3), { marg: .7, anim_t: 3000, stroke: '#3b2f3f' })}

`31:Tda0,function svgdraw (lines, params) { var { rot, marg, x, y, S, svg, animate, stroke, anim_t } = _.defaults(params, { S: 450, marg: .9, rot: 30, anim_t: 1000, animate: false, stroke: '#000', }); if (!svg) svg = d3.select(DOM.svg(S, S)); const Sc = S/3.1; const scale = glm.mat3.multiplyScalar(glm.mat3.create(), glm.mat3.identity(glm.mat3.create()), Sc); const fitted_lines = boxfit(lines, { min: [-Sc*marg,-Sc*marg,-Sc*marg], max: [Sc*marg,Sc*marg,Sc*marg] }); const Ns = fitted_lines.map(line => line.length-1); const N = Ns.reduce((a,b) => a+b, 0); const anim_t_step = Math.floor(anim_t / N); function project (pto, pfrom, ...Ms) { glm.vec3.copy(pto, pfrom); for (var i = 0; i < Ms.length; i++) { glm.vec3.transformMat3(pto, pto, Ms[i]); } return pto; } const dline = d3.line(); var drot = 0; var animating = false; function draw () { const rotation = q(20, 0, 0); glm.quat.rotateY(rotation, rotation, (drot + rot) * Math.PI/180); const T = glm.mat3.fromQuat(glm.mat3.create(), rotation); svg.selectAll('g').data(['cube', 'drawing']).enter().append('g').attr('class', d => d); glm.mat3.fromQuat(T, rotation); // draw containing cube const cube = svg.select('g.cube') .attr('transform', `translate(${S/2} ${S/2})`); const faces = cube.selectAll('path') .data(cube_faces.map(face => face.map(p => project(glm.vec3.create(), p, scale, T)))); faces.exit().remove(); faces.enter().append('path') .attr('fill', 'none') .attr('stroke', '#aaa') .attr('stroke-width', '1') .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "2 6") .merge(faces) .attr('d', face => dline(face) + 'z'); // draw l-system lines const drawing = svg.select('g.drawing') .attr('transform', `translate(${S/2} ${S/2})`); const paths = drawing.selectAll('path.line') .data(fitted_lines.map(line => line.map(p => project(glm.vec3.create(), p, T)))); paths.exit().remove(); const all = paths.enter().append('path').attr('class', 'line') .attr('fill', 'none') .attr('stroke', stroke) .attr('stroke-width', '1.5') .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .merge(paths) .attr('d', dline); function run_animation () { animating = true; all .interrupt() .attr("stroke-dashoffset", function (d) { return d._len = this.getTotalLength(); }) .attr("stroke-dasharray", d => (d._len-1) + ' ' + (d._len+2)); all .transition() .delay((d, i) => Ns.slice(0, i).reduce((a,b) => a+b, 0) * anim_t_step) .duration((d, i) => Ns[i] * anim_t_step) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0) setTimeout(() => animating = false, N * anim_t_step); } function reset_anim () { all .interrupt() .attr("stroke-dashoffset", 0); } svg.on("click", null).on("click", () => { if (animating) { reset_anim(); } else { run_animation(); } }); if (animate) run_animation(); } // mouse interactivity svg.call(d3.zoom().scaleExtent([1,1]).on('zoom', (e) => { drot = -d3.event.transform.x / 2.4; draw(); })); draw(); return svg.node(); }32:Tf4e,function cdraw (lines, params) { var { rot, marg, x, y, S, c, animate, stroke, anim_t } = _.defaults(params, { S: 450, marg: .9, rot: 30, anim_t: 1000, animate: false, stroke: '#000', }); if (!c) c = DOM.context2d(S, S); const Sc = S/3.1; const scale = glm.mat3.multiplyScalar(glm.mat3.create(), glm.mat3.identity(glm.mat3.create()), Sc); const fitted_lines = boxfit(lines, { min: [-Sc*marg,-Sc*marg,-Sc*marg], max: [Sc*marg,Sc*marg,Sc*marg] }); const N = fitted_lines.map(line => line.length).reduce((a,b) => a+b); const anim_t_step = Math.floor(anim_t / N); const rotation = q(20, 0, 0); glm.quat.rotateY(rotation, rotation, rot * Math.PI/180); const T = glm.mat3.fromQuat(glm.mat3.create(), rotation); function project (pto, pfrom, ...Ms) { glm.vec3.copy(pto, pfrom); for (var i = 0; i < Ms.length; i++) { glm.vec3.transformMat3(pto, pto, Ms[i]); } } var animReq, at = {i: 0, j: 0}; const p = glm.vec3.create(); function drawLine (i, j) { c.beginPath(); project(p, fitted_lines[i][j], T); c.moveTo(p[0], p[1]); project(p, fitted_lines[i][j+1], T); c.lineTo(p[0], p[1]); c.stroke(); } function draw () { if (animReq) clearTimeout(animReq); c.resetTransform(); c.translate(S/2, S/2); c.clearRect(-S/2, -S/2, S, S); glm.mat3.fromQuat(T, rotation); // draw containing cube c.setLineDash([2,6]); c.lineWidth = 1; c.strokeStyle = '#aaa'; for (var face, i = 0; face = cube_faces[i], i < cube_faces.length; i++) { c.beginPath(); project(p, face[face.length - 1], scale, T); c.lineTo(p[0], p[1]); for (var j = 0; j < face.length; j++) { project(p, face[j], scale, T); c.lineTo(p[0], p[1]); } c.stroke(); } // draw l-system lines c.setLineDash([]); c.lineWidth = 1.5; c.strokeStyle = stroke; var my = {i: 0, j: 0}; const drawNextLine = () => { if (my.i >= fitted_lines.length) { animReq = undefined; return; } if (my.j >= fitted_lines[my.i].length - 1) { my.i++; my.j = 0; } else { drawLine(my.i, my.j++); } const not_there_yet = (my.i < at.i) || (my.i == at.i && my.j < at.j); if (!animate || not_there_yet) { drawNextLine(); } else { at = my; animReq = setTimeout(drawNextLine, anim_t_step); } } drawNextLine(); } // mouse interactivity const getpos = (e) => [ 2*((e.pageX - c.canvas.offsetLeft) / 900) - 1, // mx ∈ [-1 ... 1] 2*((e.pageY - c.canvas.offsetTop ) / 900) - 1, // my ∈ [-1 ... 1] ]; //const getpos = e => [e.offsetX, e.offsetY]; var down, moved = false; const mdown = (e) => (e.preventDefault(), down = getpos(e)); c.canvas.addEventListener('mousedown', mdown); c.canvas.addEventListener('touchdown', mdown); const mmove = (e) => { e.preventDefault(); if (down) { const curr = getpos(e); const dx = curr[0] - down[0]; const dy = curr[1] - down[1]; down = curr; moved = true; glm.quat.rotateY(rotation, rotation, -dx*Math.PI); draw(); } }; c.canvas.addEventListener('mousemove', mmove); c.canvas.addEventListener('touchmove', mmove); const mup = (e) => { e.preventDefault(); if (!down) return; down = null; if (!moved) { if (animReq) { animate = false; } else { animate = true; at = {i:0, j:0}; } draw(); } moved = false; }; c.canvas.addEventListener('mouseup', mup); c.canvas.addEventListener('touchup', mup); const mleave = (e) => { e.preventDefault(); down = null; moved = false; }; c.canvas.addEventListener('mouseleave', mleave); c.canvas.addEventListener('touchleave', mleave); draw(); return c.canvas; }33:T822,function linedata (g, order = g.system.order) { const lines = []; const mat = [glm.mat4.identity(glm.mat4.create())]; const start_new_line = () => lines.unshift([ project(0, 0, 0, mat[0]) ]); const draw_line = () => lines[0].push(project(0, -1, 0, mat[0])); const just_move = () => glm.mat4.translate(mat[0], mat[0], glm.vec3.fromValues(0, -1, 0)); // Just using `glm.vec3.fromValues(0, -1, 0)` here, is definitely a bug, I think. It should be // something intrinsic to the current matrix. Then again, it depends on the semantics/impl. // of glm.mat4.translate.. Extrinsic/intrinsic, .. what a mess. It's especially mess below, // in the rotations -- I'm quite sure that's all extrinsic, but I need intrinsic rotations. // Aaarghh! const noop = () => 42; const instructions = { 'F': () => (draw_line(), just_move()), // draw & move forward 'f': () => (draw_line(), start_new_line()), // draw but don't move 'g': () => (just_move(), start_new_line()), // only move forward '+': () => glm.mat4.rotateZ(mat[0], mat[0], -g.system.angle * Math.PI/180), '-': () => glm.mat4.rotateZ(mat[0], mat[0], g.system.angle * Math.PI/180), '^': () => glm.mat4.rotateX(mat[0], mat[0], g.system.angle * Math.PI/180), '&': () => glm.mat4.rotateX(mat[0], mat[0], -g.system.angle * Math.PI/180), '>': () => glm.mat4.rotateY(mat[0], mat[0], -g.system.angle * Math.PI/180), '<': () => glm.mat4.rotateY(mat[0], mat[0], g.system.angle * Math.PI/180), '[': () => mat.unshift(glm.mat4.clone(mat[0])), // push matrix ']': () => (mat.shift(), start_new_line()), // pop matrix }; instructions['/'] = '>'; instructions['\\'] = '<'; instructions['_'] = '&'; instructions.A = instructions.B = instructions.C = instructions.D = instructions.E = instructions.F; start_new_line(); return new Promise(resolve => { g(order).then(str => { str = str.replace(/ /g, '').split('').forEach(c => { (instructions[c] || noop)(); }); resolve(lines.reverse()); }); }); }34:T5de,function parse (text = '') { const def = { axiom: 'X', angle: 90, fill: '#f6f6f6', stroke: 'black', bg: '#f9f9f9', }; const known = { angle: [/^[0-9\.]+$/, parseFloat], order: [/^[0-9]+$/, parseInt], axiom: String, }; // inherit defaults const system = Object.create(def); system.rules = {}; system._text = text = text.trim().split('\n').map(line => line.trim()).join('\n'); var m, f; text.split('\n').forEach(line => { line = line.trim(); if (!line) return; if (line.match(/^\/\//)) return; if (m = line.match(/^([a-z]+)(?:[ ]*:[ ]*(.*))?$/)) { if (f = known[m[1]]) { var test = /.*/; var coerce = f; if (f.splice) { test = f[0]; coerce = f[1]; } if (!(m[2] || '').match(test)) { throw 'Parameter invalid: ' + m[1]; } system[m[1]] = coerce(m[2] || ''); } else { throw 'Err: key not known: ' + m[1]; } } else if (m = line.match(/^([A-Z])[ ]*(?:->|=)[ ]*(.*)$/)) { system.rules[m[1]] = m[2]; } else { throw 'Err: line not parseable: ' + line; } }); const constants = {}; Object.values(system.rules).forEach(v => { v.split('').forEach(c => { if (system.rules[c] === undefined) { constants[c] = c; } }); }); system.rules = Object.assign(Object.create(constants), system.rules); if (!system.order) { system.order = 2; } return system; }35:[] 2e:{"id":"31c29691005721ee","slug":"3d-l-systems","title":"3D L-systems","thumbnail":"1dfc84ff8f0da8b10350fc2b646b9f7050103f2dcd55d77dcf2a518bbf77e515","access_level":"public","create_time":"$D2018-03-11T15:16:48.882Z","update_time":"$D2026-07-13T22:16:25.798Z","view_time":null,"first_public_time":"$D2018-03-11T21:05:11.663Z","fork":{"id":"faeff14d1da6cfe3","slug":"projection-of-3d-models-using-javascript-and-html5-canvas","title":"Projection of 3D Models using JavaScript and HTML5 Canvas","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"stars":21,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1667,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"292860b4abec108d","slug":"visualizations","title":"Visualizations","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"title":"3D L-systems","cells":[{"id":0,"value":"md`# 3D L-systems\n\n**Note!** This image is just a static one, to please Observable's thumbailer :)
\nFor the interactive version, see below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1138,"value":"md`![](https://i.imgur.com/NIYDeew.png)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1584,"value":"html`\n

Interactive 3D L-system renderings

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1208,"value":"md`\n- The top two are canvas renderings, the bottom two are SVG renderings.\n- Drag left & right to rotate.\n- Click to animate / reset animation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":940,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":921,"value":"viewof fern3d = viewdef(L(parse(`\n order: 13\n axiom: EEEA\n angle: 4\n\n A -> [++++++++++++++EC]B^+B[--------------ED]B+BA\n C -> [---------EE][+++++++++EE]B&&+C\n D -> [---------EE][+++++++++EE]B&&-D\n`)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1322,"value":"html`\n

The L-systems involved

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":993,"value":"viewof tree3d = viewdef(L(parse(`\n order: 5\n axiom: BBBBBA\n angle: 18\n\n A -> [++BB[--C][++C][&&C][^^C]A]>>>>>+BBB[--C][++C][&&C][^^C]A\n C ->\n`)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":966,"value":"viewof vine3d = viewdef(L(parse(`\n order: 4\n axiom: A\n angle: 18\n\n A -> >A[++A]->A\n`)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"viewof hilbert3d = viewdef(L(parse(`\n order: 3\n axiom: X\n\n X -> ^>XFX&F+>>XFX-F>X->\n`)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1455,"value":"html`\n

Implementation

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1655,"value":"md`**Beware!**\n\nI really dislike 3D matrices, and especially quaternions, and although the L-systems above seem to be doing their work, I believe I really botched-up the 3D code. There will be bugs, please don't copy the code as-is.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1268,"value":"md`### L-systems`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1482,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1319,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1289,"value":"function boxfit (lines, t = { min: [-90,-90,-90], max: [90,90,90] }) {\n // b, t :: { min: [x,y,z], max: [x,y,z] }\n const b = bounds(lines);\n \n const curr_center = [\n b.max[0] - (b.max[0] - b.min[0]) / 2,\n b.max[1] - (b.max[1] - b.min[1]) / 2,\n b.max[2] - (b.max[2] - b.min[2]) / 2,\n ];\n \n const scale = Math.min(\n (t.max[0] - t.min[0]) / (b.max[0] - b.min[0]),\n (t.max[1] - t.min[1]) / (b.max[1] - b.min[1]),\n (t.max[2] - t.min[2]) / (b.max[2] - b.min[2])\n );\n \n const target_center = [\n t.max[0] - (t.max[0] - t.min[0]) / 2,\n t.max[1] - (t.max[1] - t.min[1]) / 2,\n t.max[2] - (t.max[2] - t.min[2]) / 2,\n ];\n \n const aux = glm.vec3.create();\n return lines.map(line => {\n return line.map(p => {\n return glm.vec3.clone(glm.vec3.add(aux, glm.vec3.scale(aux, glm.vec3.sub(aux, p, curr_center), scale), target_center));\n });\n });\n \n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1281,"value":"function viewdef (g) {\n const root = html`3D L-system specification

${g.system._text.replace(/&/g, '&').replace(//g, '>').replace(/([0-9]+)/g, '$1').replace(/([\\[\\]^+-]|<|>|&)/g, '$1').replace(/^([a-z]+)[ ]*:/gm, '$1:').replace(/([A-F])/g, '$1').replace(/([G-Z])/g, '$1')}

`;\n root.value = g;\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":656,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"function bounds (lines) {\n const min = [+Infinity, +Infinity, +Infinity];\n const max = [-Infinity, -Infinity, -Infinity];\n \n for (var line of lines) {\n for (var p of line) {\n if (p[0] < min[0]) min[0] = p[0];\n if (p[0] > max[0]) max[0] = p[0];\n \n if (p[1] < min[1]) min[1] = p[1];\n if (p[1] > max[1]) max[1] = p[1];\n \n if (p[2] < min[2]) min[2] = p[2];\n if (p[2] > max[2]) max[2] = p[2];\n }\n }\n \n return { min, max };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"function L (system = {}) {\n var gen;\n\n function reset () {\n gen = [system.axiom];\n }\n \n function g (n = 0) {\n return new Promise(resolve => {\n function go () {\n if (gen[n]) return resolve(gen[n]);\n gen.push(gen[gen.length-1].replace(/./g, c => system.rules[c]));\n setTimeout(go, 1);\n }\n go();\n });\n }\n\n reset();\n\n g.reset = reset;\n g.system = system;\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1259,"value":"md`### 3D stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"cube_faces = [\n [0, 1, 5, 4], // FRONT\n [2, 3, 7, 6], // REAR\n [0, 1, 3, 2], // BOTTOM\n [4, 5, 7, 6], // TOP\n [0, 2, 6, 4], // LEFT\n [1, 3, 7, 5], // RIGHT\n].map(face_indices => face_indices.map(i => cube_vertices[i]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"cube_vertices = [\n v(-1.0, -1.0, -1.0), // Front-Bottom-Left\n v( 1.0, -1.0, -1.0), // Front-Bottom-Right\n v(-1.0, -1.0, 1.0), // Rear-Bottom-Left\n v( 1.0, -1.0, 1.0), // Rear-Bottom-Right\n v(-1.0, 1.0, -1.0), // Front-Top-Left\n v( 1.0, 1.0, -1.0), // Front-Top-Right\n v(-1.0, 1.0, 1.0), // Rear-Top-Left\n v( 1.0, 1.0, 1.0) // Rear-Top-Right\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"function project (x, y, z, ...Ms) {\n const r = glm.vec3.fromValues(x, y, z);\n for (var i = 0; i < Ms.length; i++) {\n glm.vec3.transformMat4(r, r, Ms[i]);\n }\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"function v (x, y, z_opt) {\n return z_opt !== undefined ? glm.vec3.fromValues(x,y,z_opt) : glm.vec2.fromValues(x,y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"q = (rx, ry, rz) => glm.quat.fromEuler(glm.quat.create(), rx, ry, rz)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"qm = (rx, ry, rz) => glm.mat3.fromQuat(glm.mat3.create(), q(rx, ry, rz))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1262,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"glm = require('https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1009,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":756,"value":"md`### Resources\n\n- http://jobtalle.com/lindenmayer_systems.html`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"