30:T69a,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, animate: () => true, colorful: () => true, stroke: String, fill: String, bg: String, }; // inherit defaults const system = Object.create(def); system.rules = {}; system._text = text; 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; } if (system.colorful) { const colorset = colorsets[Math.floor(Math.random() * colorsets.length)]; Object.assign(system, colorset); } return system; }31:T953,function edit (g, params = {}) { const S = 400; const t = Object.entries(g.system.rules).map(([k,v]) => `${k} -> ${v}`).join('\n'); const form = html``; const svg = d3.select(DOM.svg(S, S)); svg.node().style = 'display: inline-block; background: #fafafa;'; form.querySelector('.c').appendChild(svg.node()); const a_png = form.querySelector('a.d.png'); a_png.onclick = function (e) { var url = a_png.href = URL.createObjectURL(svg._pngblob); setTimeout(function() { URL.revokeObjectURL(url); }, 50); } const a_svg = form.querySelector('a.d.svg'); a_svg.onclick = function (e) { var url = a_svg.href = URL.createObjectURL(svg._svgblob); setTimeout(function() { URL.revokeObjectURL(url); }, 50); } const textarea = form.querySelector('textarea'); const verb = 'oninput'; form[verb] = (e) => { e && e.preventDefault(); var system; try { system = parse(textarea.value); } catch (e) { textarea.style['color'] = '#d00'; } if (system) { g = L(system); textarea.style['color'] = '#333'; draw(g, S, svg); if (form.output) form.output.value = g; form.value = g; if (verb != "oninput") form.dispatchEvent(new CustomEvent("input")); } }; form[verb](); form.value = g; return form; }32:T852,function linedata (g, order = g.system.order) { const lines = []; const polygons = []; const editpolys = []; const mat = [new Matrix()]; mat[0]._step = 1; const start_new_line = () => lines.unshift([ mat[0].applyToPoint(0, 0) ]); const draw_line = () => lines[0].push(mat[0].applyToPoint(mat[0]._step, 0)); const just_move = () => mat[0].translate(mat[0]._step, 0); const add_poly_dot = () => { if (!editpolys.length) throw 'No polygon [add_poly_dot]'; editpolys[0].push(mat[0].applyToPoint(0, 0)); } const start_polygon = () => editpolys.unshift([]); const close_polygon = () => { if (!editpolys.length) throw 'No polygon [close_polyong]'; var polygon = editpolys.shift(); polygon.push(polygon[0]); polygons.push(polygon); } 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 '+': () => mat[0].rotateDeg(g.system.angle), // rotate right '-': () => mat[0].rotateDeg(-g.system.angle), // rotate left '|': () => mat[0].rotateDeg(180), '[': () => { mat.unshift(mat[0].clone()); mat[0]._step = mat[1]._step; }, // push matrix ']': () => (mat.shift(), start_new_line()), // pop matrix '.': () => add_poly_dot(), '{': () => start_polygon(), '}': () => close_polygon(), }; start_new_line(); return new Promise(resolve => { g(order).then(str => { var m; while (m = str.match(/^([^@]|@[IQ]?[0-9\.]+\^?)/)) { str = str.slice(m[1].length); if (m[1][0] == '@') { m = m[1].match(/^@([IQ]?)([0-9\.]+)(\^?)/); var mod = m[1]; var n = parseFloat(m[2]); if (m[3]) n = Math.pow(n, g.system.order); if (mod == 'I') n = 1/n; if (mod == 'Q') n = Math.sqrt(n); mat[0]._step *= n; } else { if (instructions[m[1]]) { instructions[m[1]](); } } } resolve({ lines, polygons }); }); }); }33:Tbea,function draw (lgen, S = 300, svg = d3.select(DOM.svg(S, S))) { svg.selectAll('path').interrupt(); const node = svg.node(); while(node.lastChild) node.removeChild(node.lastChild); svg.append('rect') .attr('x', 0).attr('width', S) .attr('y', 0).attr('height', S) .attr('fill', lgen.system.bg) .attr('stroke', 'none'); return new Promise(resolve => { linedata(lgen).then(data => { const b = bounds(data.lines); var sx = S / (b[2]-b[0]); var sy = S / (b[3]-b[1]); var diff = (b[2]-b[0]) - (b[3]-b[1]); if (sx > sy) { b[2] -= diff/2; b[0] += diff/2; } else { b[3] += diff/2; b[1] -= diff/2; } const scaleX = d3.scaleLinear().domain([b[0], b[2]]).range([10, S-10]); const scaleY = d3.scaleLinear().domain([b[1], b[3]]).range([10, S-10]); const T = 1500; // total animation time const line = d3.line().x(d => scaleX(d.x)).y(d => scaleY(d.y)); //svg.select('rect').remove(); //svg.selectAll('path').remove(); // svg.append('rect').attr('x', 0).attr('y', 0).attr('width', S).attr('height', S) // .attr('fill', lgen.system.bg) // .attr('stroke', 'none'); // draw polygons const polygons = data.polygons.reverse(); var polypaths = svg .append('g') .attr('class', 'poly') .attr('fill', lgen.system.fill) .attr('stroke', lgen.system.stroke) .attr('stroke-width', '1') .attr("stroke-dasharray", '3 3') .selectAll('path').data(polygons) .enter().append('path').attr('d', line); // draw lines const lines = data.lines.reverse(); var paths = svg .append('g') .attr('class', 'line') .attr('fill', 'none') .attr('stroke', lgen.system.stroke) .attr('stroke-width', '1') .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll('path').data(lines.filter(line => line.length > 1)) .enter().append('path').attr('d', line); function animate () { var total_len = 0; paths .interrupt() .attr("stroke-dashoffset", function (d) { d._prevt = total_len; total_len += (d._len = this.getTotalLength()); return d._len; }) .attr("stroke-dasharray", d => d._len + ' ' + d._len); var u = T / total_len; paths .transition() .delay(line => line._prevt * u) .duration(line => line._len * u) .ease(d3.easeLinear) .attr("stroke-dashoffset", 0); } // Create rasterized blobs *before* animation svg._svgblob = serialize(svg.node()); rasterize(svg.node(), 2).then(b => { svg._pngblob = b; if (lgen.system.animate) { animate(); } }); svg.on("click", null).on("click", animate); resolve(svg.node()); }); }); }34:[] 2e:{"title":"L-systems #2 — using SVG","cells":[{"id":542,"value":"md`# L-systems #2 — using SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"md`These L-systems are built from the following meaningful syntax:\n\n

\n  Moving & drawing                      Turning\n    F  draw & move forward                +  turn right\n    f  draw without moving forward        -  turn left\n    g  just go forward                    |  turn 180 deg\n    {  begin polygon (dotted line)\n    .  add polygon point\n    }  end polygon (dotted line)\n                                        State\n  Step length                           (position, heading (${tex`\\mathop{\\to}`}), angle (${tex`90^\\circ`}), step length)\n    @${tex`n`}   step := step${tex`~\\times~n`}                 [  save current state\n    @I${tex`n`}  step := step${tex`~\\times~(\\frac{1}{n})`}               ]  restore state\n    @Q${tex`n`}  step := step${tex`~\\times~\\sqrt{n}`}\n

\n\nAny other symbols can be used as well, to control the production rules, but will be treated as meaningless at draw-time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"md`## Interactive L-system editors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"md`The editors below can be used to interactively edit L-systems.\n\n- *Redraw on edit*. The structure is redrawn on every succesful edit of the system specification. (I.e., when there is a syntax error, the previous structure is kept displayed.)\n- *Animate*. You can animate the drawing by clicking the SVG, or including the animate flag in the specification.\n- *Colors*. Use the stroke and bg options to color the drawing (and the fill option to fill polygons); or use the colorful flag to get some random colors :)\n- *Download SVG / PNG*. You can down the image as an SVG or PNG by clicking on the button in the bottom-right corner on the image.\n\nBe careful with large order numbers: the computation time grows exponentially, and you might hang your browser :)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"md`### Koch curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"md`You can define an L-system like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"koch = L(parse(`order: 3\naxiom: F+F+F+F\nangle: 90\nstroke: #fff\nbg: #222\n\nF -> F+F-F-FF+F+F-F`))","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"md`And draw it like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"draw(koch)","pinned":true,"hidden":false,"mode":"ojs"},{"id":979,"value":"md`But, for a tad bit more interactivity, use the edit function to create an interactive editor, which returns an Observable viewof-able dom element:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"viewof koch2 = edit(koch)","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`### Sierpinski triangle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"viewof sierpinski = edit(L(parse(`order: 7\naxiom: AF\nangle: 60\ncolorful\nanimate\n\nA -> BF-AF-B\nB -> AF+BF+A`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"md`### Dragon curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"viewof dragoncurve = edit(L(parse(`order: 10\naxiom: FX\nangle: 90\ncolorful\nanimate\n\nX -> X+YF+\nY -> -FX-Y`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`### Hexagonal gosper`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"viewof hexg = edit(L(parse(`order: 4\naxiom: XF\nangle: 60\ncolorful\n\nX -> X+YF++YF-FX--FXFX-YF+\nY -> -FX+YFYF++YF+FX--FX-Y`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"md`### Cube `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"viewof cubes = edit(L(parse(`order: 10\naxiom: Y\nangle: 120\ncolorful\n\nX -> F+gF\nY -> XY-XY`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"md`### Sierpinski Square`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"viewof sierpinski_sq = edit(L(parse(`order: 10\naxiom: X--F--X--F\nangle: 45\ncolorful\n\nX -> +Y-F-Y+\nY -> -X+F+X-`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"md`### Koch snowflake`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"viewof koch_snowflake = edit(L(parse(`order: 4\naxiom: F++F++F\nangle: 60\ncolorful\n\nF -> F-F++F-F`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"md`### Hilbert Curve`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"viewof hilbert_curve = edit(L(parse(`order: 6\naxiom: X\nangle: 90\ncolorful\n\nX -> -YF+XFX+FY-\nY -> +XF-YFY-FX+`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"md`### Fractal plant`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"viewof plant = edit(L(parse(`order: 5\naxiom: ---X\nangle: 25\n\nX -> F[-X][X]F[-X]+FX\nF -> FF`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"md`### Penrose P3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"viewof penrose = edit(L(parse(`order: 5\naxiom: [N]++[N]++[N]++[N]++[N]\nangle: 36\ncolorful\n\nM -> OF++PF----NF[-OF----MF]++\nN -> +OF--PF[---MF--NF]+\nO -> -MF++NF[+++OF++PF]-\nP -> --OF++++MF[+PF++++NF]--NF\nF ->`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"md`### Box`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"viewof box = edit(L(parse(`order: 4\naxiom: F+F+F+F\nangle: 90\ncolorful\n\nF -> FF+F+F+F+FF`)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"md`### Leaves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"viewof leaf1 = edit(\n L(\n parse(`order: 7\naxiom: F[A][B]\nangle: 10\nanimate\n\nA -> [+A{.].C.}\nB -> [-B{.].C.}\nC -> FC`)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"viewof leaf2 = edit(\n L(\n parse(`order: 13\naxiom: ----+FF+FF+FF+FF[A][B]\nangle: 10\nanimate\n\nA -> [+A{.].C.}\nB -> [-B{.].C.}\nC -> C@1.2F`)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"md`This one is not working as expected. I want to put leaves where I now have circular polygons, but for some reason I can't succesfully exchange [L] for C. The drawing code is getting messier as well...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"viewof leafed_tree = edit(\n L(\n parse(`order: 11\naxiom: ---------A\nangle: 10\nanimate\n\nT -> TF\nA -> TF[+++X]TFB\nB -> TF[---Y]TFA\nX -> A\nY -> BC\nC -> [{g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.++g.}]\nL -> [N][M]\nN -> [+N{.].O.}\nM -> [-M{.].O.}\nO -> O@1.2F`)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"md`The goal is to have something like this:\n\n![](http://www.gib.uni-tuebingen.de/own/journal/img/upload/507944a4dbc01f7468c24b2db605fcb8.png)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"md`Types involved:\n\n

  System    := { order^{${tex`\\mathbb{N}`}}, axiom^String, angle^{${tex`\\mathbb{N}`} (degrees)}, rules^{{Var: String}*} }\n  Generator := (${tex`\\mathbb{N}`} -> String)  w/  .system^System

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"md`L :: System -> Generator\n\nCreates an L-system generator form a system specification.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1114,"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"},{"id":1113,"value":"function L_old (system = {}) {\n var gen;\n\n function reset () {\n gen = [system.axiom];\n }\n \n function g (n = 0) {\n var rule;\n for (var i = gen.length; i <= n; i++) {\n gen[i] = gen[i-1].replace(/./g, c => system.rules[c]);\n }\n return gen[n];\n }\n\n reset();\n\n g.reset = reset;\n g.system = system;\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"md`L :: System -> String\n\nPretty-prints an L-system.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"function stringify (system) {\n return `order: ${system.order}\naxiom: ${system.axiom}\nangle: ${system.angle}${system.animate === 'no' ? `\nanimate: no`: ''}${system.colorful ? `\ncolorful` : ''}\n\n${Object.entries(system.rules).map(([k,v]) => `${k} -> ${v}`).join('\\n')}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"md`parse :: String -> System\n\nParses an L-system. The accepted grammar is, approximately:\n\n ::= ( | )*\n ::= (\"order\" | \"axiom\" | \"angle\" | \"animate\"): VALUE\n ::= \"->\" \n ::= \"F\" | \"f\" | \"g\" | \"+\" | \"-\" | \"[\" | \"]\"\n | \"@\" NUMBER | \"@I\" NUMBER | \"@Q\" NUMBER`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1109,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"md`edit :: Generator -> viewof Generator\n\nDisplays an interactive editor for the given L-system generator. You can use Observable's viewof operator to use the resulting generator reactively.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"md`linedata :: Generator [, order^{${tex`\\mathbb{N}`}}] -> Promise({ lines^Array(Line), polygons^{Array(Polygon)} })\n\n Line := Array( { x, y } )\n Polygon := Array( { x, y } ) \n\nRender the result of the generation as an array of lines. The points live in a coordinate system where generation started at (0, 0) and to the right, and the step size started at 1. The bounds depend entirely on the generated result. To display, you'll have to scale accordingly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1126,"value":"md`bounds :: Array(Line) -> [ min_x, min_y, max_x, max_y ]\n\nComputes the bounds of a set of lines.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"function bounds (lines) {\n const b = [0, 0, 0, 0]; // minx, miny, maxx, maxy\n \n for (var line of lines) {\n for (var p of line) {\n if (p.x < b[0]) b[0] = p.x;\n if (p.y < b[1]) b[1] = p.y;\n if (p.x > b[2]) b[2] = p.x;\n if (p.y > b[3]) b[3] = p.y;\n }\n }\n \n return b;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1129,"value":"md`draw :: { lines, polygons } [, x] [, y] [, w] [, h] [, d3svg] [, animate] [, colorful] -> SVGElement\n\nDraws the given lines to an SVG element (reusing the given d3-wrapped element if provided). The structure is positioned in the center of the specified rectangle, making sure to scale both axes the same amount.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"colorsets = [\n { bg: 'yellow', stroke: 'orange', fill: '#db1717' },\n //{ bg: 'lightblue', stroke: 'darkblue', fill: 'lightblue' },\n { bg: 'lightgreen', stroke: 'darkgreen', fill: 'lightgreen' },\n { bg: '#345fa1', stroke: '#d0e8e9', fill: '#adb16c' },\n { bg: '#34a17e', stroke: '#f4f6d1', fill: '#adb16c' },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"Matrix = require('transformation-matrix-js').catch(e => window.Matrix)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"d3 = require('https://d3js.org/d3.v5.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"function rasterize(svg, scale = 1) {\n let resolve, reject;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width * scale, rect.height * scale);\n context.drawImage(image, 0, 0, rect.width * scale, rect.height * scale);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"md`## Some resources / references\n\n- https://10klsystems.wordpress.com/examples/\n- http://www.kevs3d.co.uk/dev/lsystems/\n- http://www.cs.brandeis.edu/~storer/JimPuzzles/PACK/CzechFarms/PenroseTilingWikipedia.pdf\n- http://codeboje.de/lindenmayer-systems-using-python/\n- http://paulbourke.net/fractals/lsys/\n- https://cgjennings.ca/articles/l-systems.html\n- https://n-e-r-v-o-u-s.com/blog/?p=3983`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}