3f:null 40:["$","title",null,{"children":"Fractals amb \"ADN\" | Jordi Saludes | Observable"}] 46:T4cc,function step(turtle, action) { let {cos, sin, PI } = Math; let ctx = turtle.context; let width = ctx.canvas.width; ctx.fillStyle = '#fff'; ctx.lineWidth = turtle.lineWidth; const s = d3.scaleLinear(); // // .domain([0, width/scale]) // .range([0, width]); function fd(dist) { ctx.beginPath(); ctx.moveTo(s(turtle.x), s(turtle.y)); turtle.x += cos(turtle.dir) * dist; turtle.y += sin(turtle.dir) * dist; ctx.lineTo(s(turtle.x), s(turtle.y)); ctx.stroke(); } function rt(a) { turtle.dir += a/180*PI; } function lt(a) { turtle.dir -= a/180*PI; } function save() { turtle.stack.unshift(turtle); } function restore() { turtle = turtle.stack.shift(); } function expandRules(rules) { var newRules = {} Object.keys(rules).forEach(k => [...k].forEach(c => newRules[c] = rules[k])); return newRules; } switch(action) { case '🏃': fd(turtle.distance); break; case '👉': rt(turtle.angle); break; case '👈': lt(turtle.angle); break; case 'empeny': save(); break; case 'estira': restore(); break; default: throw("No such action " + action) } } 47:T644,{ let width = 300, steps = 3, delay = 700, // ms length = 10, LM = iterate(gosper, steps), t = new turtle(LM, length); let theDiv = html``; */ let svg = d3.select(theDiv).select('svg'), tape = d3.select(theDiv).select('#tape'); t.showTape(tape); t.context = ctx1; //t.makeCompass(svg); ctx1.fillStyle = '#f00'; ctx1.strokeStyle = '#000'; ctx1.translate(width/3, width/2); for(var i=0; i= this.steps.length) return; if (this.compass) { let deg = 180/Math.PI; this.compass .attr('transform', `translate(20 20) rotate(${this.dir*deg})`); console.log(this.dir); }; let action = this.steps[this.index++]; switch(action) { case '🏃': fd(this.fdist); break; case '🦗': skip(this.fdist); break; case '👉': rt(this.angle); break; case '👈': lt(this.angle); break; default: throw('No such action: '+ action); } if (this.advanceTape) this.advanceTape(); } showTape (svg) { let t = this; let steps = this.steps; const dx = 30; svg.append('g') .append('rect') .attr('x', 0) .attr('y', 0) .attr('height', 30) .attr('width', 22) .attr('fill', 'none') .attr('stroke', 'blue'); const g = svg.append('g'); steps.forEach((a,i) => g.append('text').attr('x', i*dx).attr('y', 20).text(a)); this.advanceTape = () => { g.transition().duration(500) .attr('transform', `translate(-${t.index*dx}, 0)`); }; } makeCompass(svg) { let R = 20; svg.attr('width', 2*R) .attr('height', 2*R); let g = svg.append('g'); g.attr('transform', `translate(${R}, ${R})`); g.append('path') .attr('d', `M0 0 L${R} 0 M8 5 L${R} 0 M8 -5 L${R} 0`) .attr('stroke', 'blue'); this.compass = g; return g; } } 49:T6df,function drawLindenmeyer(ctx, scale, forwardDistance, L) { let {cos, sin, PI } = Math; let width = ctx.canvas.width; var turtle; ctx.fillStyle = '#fff'; ctx.lineWidth = 1/scale; const s = d3.scaleLinear(); // // .domain([0, width/scale]) // .range([0, width]); function fd(dist) { ctx.beginPath(); ctx.moveTo(s(turtle.x), s(turtle.y)); turtle.x += cos(turtle.dir) * dist; turtle.y += sin(turtle.dir) * dist; ctx.lineTo(s(turtle.x), s(turtle.y)); ctx.stroke(); } function skip(dist) { turtle.x += cos(turtle.dir) * dist; turtle.y += sin(turtle.dir) * dist; } function rt(a) { turtle.dir += a/180*PI; } function lt(a) { turtle.dir -= a/180*PI; } function save() { turtleStack.unshift(turtle); } function restore() { turtle = turtleStack.shift(); } function expandRules(rules) { var newRules = {} Object.keys(rules).forEach(k => [...k].forEach(c => newRules[c] = rules[k])); return newRules; } function doAction(a, angle) { switch(a) { case '🏃': fd(forwardDistance); break; case '👉': rt(angle); break; case '👈': lt(angle); break; case '🦗': skip(forwardDistance); break; case 'empeny': save(); break; case 'estira': restore(); break; default: throw("No such action " + a) } } let turtleActions = expandRules(L.rules); turtle = {x: 0, y: 0, dir: 0}; var turtleStack = []; // turtleStack.unshift(turtle); return [...L.axiom].forEach(c => { let action = turtleActions[c]; if (action === undefined) return; // throw("Action for '" + c + "' is undefined"); doAction(action, L.angle, 10) }); }4a:[] 44:{"id":"bb44c8ff4ef7351f","slug":"fractals-amb-adn","title":"Fractals amb \"ADN\"","thumbnail":"24a164c93611d25a57644920c1b564518726d8d4ff0434193285ad698962e3e5","access_level":"public","create_time":"$D2019-02-17T10:21:26.950Z","update_time":"$D2019-03-04T14:06:54.805Z","view_time":null,"first_public_time":"$D2019-02-19T11:05:14.690Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":"starter_2024","bio":"","following":false},"version":1125,"publish_version":1125,"role":null,"authored":false,"authors":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0510e92df0de01d0","login":"saludes","name":"Jordi Saludes","avatar_url":"https://avatars-next.observableusercontent.com/1d2477217e4b39f06cb2a19437f76e41d53331ab9b2d19b640c7d8be6b0cd950","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b6d5bde1dc981917","slug":"fractals","title":"Fractals","owner":{"id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes"}},"type":"notebook","body":{"titling":"auto","title":"Fractals amb \"ADN\"","cells":[{"id":0,"value":"md`# Fractals amb \"ADN\"\n[Corba de Gosper](https://en.wikipedia.org/wiki/Gosper_curve#Lindenmayer_System).\n\nVeure https://beta.observablehq.com/@tmcw/gosper-curve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"md`## la tortuga`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"md`## Sistemes de Lindenmayer\n\nVegeu https://en.wikipedia.org/wiki/L-system`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"md`### El sistema del **Fora el 6!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"Cantor6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"md`### El floc de neu`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"Koch","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"md`### La corba de Gosper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"gosper","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"viewof typeOfFractal = select({\n title: \"Fractal\",\n options: ['floc de neu', 'Sierpinsky', 'Gosper', 'Cantor 6'],\n value: 'floc de neu'})\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"viewof steps = slider({min:0, value:0, max: theFractal.steps, step: 1});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"{\n \n \n let obj = theFractal;\n \n \n let width = 600,\n l = obj.fdist || 300,\n sc = obj.scaling || 3,\n nIter = Math.min(steps, (obj.steps || 4)),\n LM = iterate(obj.lm, nIter);\n \n let canvas = DOM.canvas(width, width);\n let ctx = canvas.getContext('2d');\n ctx.fillStyle = '#fff'\n ctx.translate(width/2, width/2);\n \n d3.select(canvas).call(d3.zoom().scaleExtent([1, 20]).on(\"zoom\", zoom));\n \n // drawLindenmeyer(ctx, 10, iterate(gosper,3))\n const draw = t => drawLindenmeyer(ctx, t, l/sc**nIter, LM)\n // No va bé: drawLindenmeyer(ctx, 40, iterate(fern,1))\n // drawLindenmeyer(ctx, 10, iterate(Sierpinsky,4))\n \n draw(1);\n \n function zoom() {\n var transform = d3.event.transform;\n ctx.save();\n ctx.clearRect(-width/2, -width/2, width, width);\n // ctx.translate(transform.x, transform.y);\n ctx.scale(transform.k, transform.k);\n draw(transform.k);\n ctx.restore();\n}\n\n \n \n \n// svg.call(zoom);\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"Cantor6 = {\nvar rule = makeRules('P');\n rule['B'] = '🦗';\n\nlet f = {\n axiom: 'P',\n linden: {\n 'P': \"PPPPPPBPPP\",\n 'B': \"BBBBBBBBBB\",\n },\n angle: 0,\n rules: rule\n}\n\nreturn f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"Koch = {\n let f = {\n axiom: 'F--F--F',\n linden: {'F': \"F+F--F+F\" },\n rules: makeRules('F'),\n angle: 60\n };\n \n \nreturn f\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"gosper = {let obj = {\n axiom : 'A',\n angle: 60,\n linden : { 'A' : \"A-B--B+A++AA+B-\",\n 'B' : \"+A-BB--B-A++A+B\"},\n rules : makeRules('AB')\n}\nreturn obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"theFractal = {let dict = {\n 'floc de neu': {\n lm: Koch,\n steps: 6,\n scaling: 3,\n fdist: 200 },\n 'Sierpinsky': {\n lm: Sierpinsky,\n steps: 7,\n scaling: 2,\n fdist: 200},\n 'Gosper': {\n lm: gosper,\n steps: 5,\n scaling: 3,\n fd: 100},\n 'falguera': {\n lm: fern,\n steps: 3,\n fdist: 100},\n 'Cantor 6': {\n lm: Cantor6,\n fdist: 100,\n scaling: 10,\n lineWidth: 10,\n steps: 3\n }\n }\n\nreturn dict[typeOfFractal];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"function makeRules(avant, esquerra, dreta) {\n var rules = {};\n [...avant].forEach(c => rules[c] = '🏃');\n [...(esquerra || '-')].forEach(c => rules[c] = '👈');\n [...(dreta || '+')].forEach(c => rules[c] = '👉');\n \n return rules;\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"function passos(f) {\n return [...f.axiom].map(c => f.rules[c]).join('')\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"iterate","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function iterate(L, N) {\n \n const n = N == undefined? 1 : N; \n \n function applyRules(rules, s) {\n var news = [];\n [...s].forEach(c => news += rules[c] || c)\n return news;\n }\n \n function iterateLM(linden, n, base) {\n if (n ==0)\n return base;\n else\n return applyRules(linden, iterateLM(linden, n-1, base))\n }\n \n return {\n axiom: iterateLM(L.linden, n, L.axiom),\n linden: L.linden,\n angle: L.angle,\n rules: L.rules\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"Sierpinsky = {\n let f = {\n axiom: \"F-G-G\",\n linden: {\n 'F': \"F-G+F+G-F\",\n 'G': \"GG\"\n },\n rules: makeRules('FG'),\n angle: 120\n }\n \n return f\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"fern = {\n \nvar rule = makeRules('F');\nrule['['] = 'empeny';\nrule[']'] = 'estira';\n\nlet f = {\n axiom: 'X',\n linden: {\n 'X': \"F+[[X]-X]-F[-FX]+X\", \n 'F': \"FF\"\n },\n angle: 25,\n rules: rule\n}\n\nreturn f;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 45:"$44:body"