2c:null 2d:["$","title",null,{"children":"L-systems | Kelley van Evert | Observable"}] 32:[] 30:{"id":"6086a7cbc8449a66","slug":"l-systems","title":"L-systems","thumbnail":"ecb5cdd7c70dc81bed6d1ca0e8ada42ef33723d9b89f6bdcab16067ad74dfdbf","access_level":"public","create_time":"$D2018-03-06T22:16:49.781Z","update_time":"$D2018-03-07T22:30:53.527Z","view_time":null,"first_public_time":"$D2018-03-06T22:24:23.932Z","has_unpublished_edits":null,"fork":{"id":"857f7c4634c0bef8","slug":"l-systems","title":"L-systems","owner":{"id":"157a1e3b7b68f77d","login":"jfirebaugh","name":"John Firebaugh"}},"stars":4,"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":563,"publish_version":563,"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,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"L-systems","cells":[{"id":542,"value":"md`# L-systems`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`![L-systems](https://i.imgur.com/qvOCe7Y.png)\n\n*^ This is just a static image, to please the Observable thumnailer. Please check out the interactiv version below :)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"viewof n = slider({ step: 1, min: 0, max: 7, value: 7 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof c = {\n const c = DOM.context2d(W, H);\n c.canvas.value = c;\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"W = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"H = 450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"render = {\n c.resetTransform();\n \n c.fillStyle = '#fcfcfc';\n c.fillRect(0, 0, W, H);\n \n drawkoch();\n \n c.resetTransform();\n c.translate(450, 0);\n drawsierpinski();\n \n c.resetTransform();\n c.translate(0, 250);\n drawcantor();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"function drawkoch () {\n const width = 430;\n const angle = Math.PI/2;\n const step = (width - 20) / Math.pow(3, n);\n \n c.strokeStyle = '#666';\n c.lineWidth = n < 4 ? 2 : 1;\n c.translate(10, 10);\n \n c.beginPath();\n c.moveTo(0, 0);\n const instructions = {\n 'F' () {\n c.lineTo(step, 0);\n c.translate(step, 0);\n },\n '+' () {\n c.rotate(angle);\n },\n '-' () {\n c.rotate(-angle);\n },\n };\n \n koch(n).split('').forEach(i => instructions[i]());\n c.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"function drawsierpinski () {\n const width = 430;\n const angle = 120 * Math.PI/180;\n const step = 430 / Math.pow(2, n);\n \n c.strokeStyle = '#444';\n c.lineWidth = n < 4 ? 2 : 1;\n c.lineCap = 'round';\n c.translate(10, 10);\n \n // Here, F and G both mean \"draw forward\", + means \"turn left by angle\", and − means \"turn right by angle\".\n const instructions = {\n 'F' () {\n c.beginPath();\n c.moveTo(0, 0);\n c.lineTo(step, 0);\n c.stroke();\n c.translate(step, 0);\n },\n '+' () {\n c.rotate(-angle);\n },\n '-' () {\n c.rotate(angle);\n },\n };\n instructions.G = instructions.F;\n \n sierpinski(n).split('').forEach(i => instructions[i]());\n \n return html`Use the slider above, to display the n-th Sierpinski triangle. (Currently showing #${n})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"function drawcantor () {\n const width = 430;\n var step;\n \n c.lineWidth = 2;\n c.lineCap = 'round';\n c.fillStyle = '#444';\n \n // Let A mean \"draw forward\" and B mean \"move forward\".\n const instructions = {\n 'A' () {\n c.fillRect(0, 0, step, 5);\n instructions.B();\n },\n 'B' () {\n c.translate(step, 0);\n },\n };\n \n for (var i = 0; i < n+1; i++) {\n c.translate(10, 20);\n step = (width - 20) / Math.pow(3, i);\n cantor(i).split('').forEach(i => instructions[i]());\n c.translate(-width + 10, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`## A small assortiment of L-systems\n\n(Simply taken from [the Wikipedia article](https://en.wikipedia.org/wiki/L-system).)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"plant = L('X', {\n X: 'F-[[X]-X]+F[+FX]-X',\n F: 'FF',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"cantor = L('A', {\n A: 'ABA',\n B: 'BBB',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"koch = L('F', {\n 'F': 'F+F-F-F+F',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"sierpinski = L('F-G-G', {\n F: 'F-G+F+G-F',\n G: 'GG',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"dragon_curve = L('FX', {\n X: 'X+YF+',\n Y: '-FX-Y',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`## L-systems\n\nMake a L-system generator, given an axiom and a set of production rules.\n\nL(axiom, rules) :: L-system\n\nThe returned L-system generator takes a natural number n, and returns the n-th iterated result. The zero-th result is the axiom itself.\n\nl-system( n ) :: String`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"function L (axiom, rules) {\n var gen;\n \n function reset () {\n gen = [axiom];\n }\n \n function lgen (n = 0) {\n for (var i = gen.length; i <= n; i++) {\n gen[i] = gen[i-1].replace(/./g, c => rules[c] || c);\n }\n return gen[n];\n }\n \n lgen.axiom = function (v) {\n return (v !== undefined)\n ? (axiom = v, reset(), lgen)\n : axiom;\n }\n \n lgen.rules = function (v) {\n return (v !== undefined)\n ? (rules = Object.create(v), reset(), lgen)\n : Object.create(rules);\n }\n \n reset();\n \n return lgen;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"