30:Tf80,viewof params = { const form = html`

	w	a	b	c	d	e	f	p
Stem	ƒ₁
Smaller leaflets	ƒ₂
Largest left-hand leaflet	ƒ₃
Largest right-hand leaflet	ƒ₄

`; form.oninput = () => form.value = { f1a: form.f1a.valueAsNumber, f1b: form.f1b.valueAsNumber, f1c: form.f1c.valueAsNumber, f1d: form.f1d.valueAsNumber, f1e: form.f1e.valueAsNumber, f1f: form.f1f.valueAsNumber, f1p: form.f1p.valueAsNumber, f2a: form.f2a.valueAsNumber, f2b: form.f2b.valueAsNumber, f2c: form.f2c.valueAsNumber, f2d: form.f2d.valueAsNumber, f2e: form.f2e.valueAsNumber, f2f: form.f2f.valueAsNumber, f2p: form.f2p.valueAsNumber, f3a: form.f3a.valueAsNumber, f3b: form.f3b.valueAsNumber, f3c: form.f3c.valueAsNumber, f3d: form.f3d.valueAsNumber, f3e: form.f3e.valueAsNumber, f3f: form.f3f.valueAsNumber, f3p: form.f3p.valueAsNumber, f4a: form.f4a.valueAsNumber, f4b: form.f4b.valueAsNumber, f4c: form.f4c.valueAsNumber, f4d: form.f4d.valueAsNumber, f4e: form.f4e.valueAsNumber, f4f: form.f4f.valueAsNumber, f4p: form.f4p.valueAsNumber }; form.oninput(); return form; } 31:[] 2e:{"title":"Barnsley Fern","cells":[{"id":0,"value":"md`# Barnsley Fern\n\n> The Barnsley fern is a fractal named after the British mathematician Michael Barnsley who first described it in his book Fractals Everywhere. He made it to resemble the black spleenwort, _Asplenium adiantum-nigrum_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof canvas = context.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof reset = button({value: \"Generate\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"viewof type = select({\n title: \"Presets\",\n options: [\"Barnsley\", \"Culcita\", \"Fishbone\", \"Cyclosorus\"],\n value: \"Barnsley\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"context = {\n \n reset;\n \n let ctx = DOM.context2d(width, height);\n ctx.canvas.width = width;\n ctx.canvas.height = height;\n ctx.canvas.id = \"canvas\";\n\n\n let radius = .4;\n let color = \"rgba(255,255,255, .25)\";\n let background = \"#242f3f\";\n\n let interval;\n let x = 0;\n let y = 0;\n\n ctx.fillStyle = background;\n ctx.fillRect(0, 0, width, height); \n \n let iterations = { current: 0, max: 500000 };\n \n function draw () {\n // draw many points per frame\n // to speed up the animation process\n for (var i=0; i<1000; ++i) {\n if (iterations.current >= iterations.max) {\n clearInterval(interval);\n }\n iterations.current += 1; \n let obj = move(x, y);\n ctx.beginPath();\n ctx.fillStyle = color;\n ctx.arc(xScale(obj.x), yScale(obj.y), radius, 0, 2 * Math.PI, true);\n x = obj.x;\n y = obj.y;\n ctx.fill();\n }\n };\n\n interval = setInterval(draw, 4);\n\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"function move (x, y) {\n\n let nextX, nextY;\n let r = Math.random();\n\n if (r < params.f1p) {\n nextX = params.f1a * x + params.f1b * y;\n nextY = params.f1c * x + params.f1d * y + params.f1f;\n } else if (r < params.f2p) {\n nextX = params.f2a * x + params.f2b * y;\n nextY = params.f2c * x + params.f2d * y + params.f2f;\n } else if (r < 0.93) {\n nextX = params.f3a * x + params.f3b * y;\n nextY = params.f3c * x + params.f3d * y + params.f3f;\n } else {\n nextX = params.f4a * x + params.f4b * y;\n nextY = params.f4c * x + params.f4d * y + params.f4f;\n }\n \n return { x: nextX, y: nextY };\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"yScale = (n) => height - (height * ((n + 2) / 14));","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"xScale = (n) => width * (n + 3) / 6;","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 400 * 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"width = 300 * 4","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"fern = presets[type]","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"presets = ({\n \"Barnsley\": [\n [0,0,0,.16,0,0,.01],\n [.85,.04,-.04,.85,0,1.6,.85],\n [.2,-.26,.23,.22,0,1.6,.93],\n [-.15,.28,.26,.24,0,.44,1]\n ],\n \"Culcita\": [\n [0,0,0,0.25,0,-0.14,0.02],\n [0.85,0.02,-0.02,0.83,0,1,0.84],\n [0.09,-0.28,0.3,0.11,0,0.6,0.93],\n [-0.09,0.28,0.3,0.09,0,0.7,1],\n ],\n \"Fishbone\": [\n [0,0,0,.25,0,-.4,.02],\n [.95,.002,-.002,.93,-.002,.5,.84],\n [.035,-.11,.27,.01,-.05,.005,.93],\n [ -.04,.11,.27,.01,.047,.06,1],\n ],\n \"Cyclosorus\": [\n [0,0,0,.25,0,-.4,.02],\n [.95,.005,-.005,.93,-.002,.5,.84],\n [.035,-.2,.16,.04,-.09,.02,.93],\n [-.04,.2,.16,.04,.083,.12,1]\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`### References\n\n- [Barnsley Fern on Wikipedia](https://en.wikipedia.org/wiki/Barnsley_fern)
\n- [Barnsley Fern on Math World](http://mathworld.wolfram.com/BarnsleysFern.html)
\n- [Fractal Ferns](http://www.home.aone.net.au/~byzantium/ferns/fractal.html)
\n- [Super Fractals](https://maths-people.anu.edu.au/~barnsley/pdfs/V-var_super_fractals.pdf)
\n- [Coloring the Barnsley Fern](https://stackoverflow.com/questions/24156288/coloring-the-barnsley-fern-fractal)
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"d3 = require(\"d3@5.9.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {button, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"import { debounce } from '@mbostock/debouncing-input'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}