3f:null 40:["$","title",null,{"children":"Conjunt de Mandelbrot | Jordi Saludes | Observable"}] 46:T664,viewof C = { let centerX = -0.75, centerY = 0; const height = 2/3*width; const ctx = DOM.context2d(width, height); const D = new Detox(ctx); const mb = ctx.canvas; var mousedown = false; const iz = ([px,py]) => { let x = (px - width/2)/zoom + centerX, y = (py - height/2)/zoom + centerY; return [x,y] }; const dz = z => { let px = zoom*(z[0]-centerX) + width/2, py = zoom*(z[1]-centerY) + height/2; return [px, py] } let mandelbrotPixel = (px,py) => { const val = mandelbrotValue(iz([px,py])); return d3.interpolateLab('#fff', '#000')(val/maxIterations); // Viridis(val/maxIteration); } for (let x = 0; x < width; x++) { for (let y = 0; y < height; y++) { D.fill(mandelbrotPixel(x, y)); D.point(x, y); } } D.stroke("yellow"); D.line(width/2, 0, width/2, height); D.line(0, height/2, width, height/2); mb.onmousedown = event => { mousedown = true; mb.onmousemove(event); }; mb.onmousemove = event => { if (!mousedown) return; let mouseX, mouseY; if ( event.offsetX == null ) { // Firefox mouseX = event.originalEvent.layerX; mouseY = event.originalEvent.layerY; } else { // Other browsers mouseX = event.offsetX; mouseY = event.offsetY; } //mb.value = mandelbrotPixel(mouseX, mouseY); mb.value = iz([mouseX, mouseY]); mb.dispatchEvent(new CustomEvent("input")); }; mb.onmouseup = event => { mb.dispatchEvent(new CustomEvent("input")); mousedown = false; }; return ctx.canvas; }47:[] 44:{"id":"f24866668e8828b3","slug":"conjunt-de-mandelbrot","title":"Conjunt de Mandelbrot","thumbnail":"b4c9b00e12f96a9666f0f469aea4d153916ca804110aeabf28d0e0caed97f06e","access_level":"public","create_time":"$D2019-01-10T14:32:41.200Z","update_time":"$D2019-03-08T15:01:21.427Z","view_time":null,"first_public_time":"$D2019-03-03T19:16:44.216Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":1030,"publish_version":1030,"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":1,"collection":{"id":"b6d5bde1dc981917","slug":"fractals","title":"Fractals","owner":{"id":"f4b4b938baf27882","login":"saludes","name":"Jordi Saludes"}},"type":"notebook","body":{"titling":"auto","title":"Conjunt de Mandelbrot","cells":[{"id":0,"value":"md`# Conjunt de Mandelbrot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`Taken from https://progur.com/2017/02/create-mandelbrot-fractal-javascript.html.\nSee also [examples of d3-dragging](https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"viewof zoom = slider({min:150, value:300, max: 2000, step: 100});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"maxIterations = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":" function mandelbrotValue(c) {\n let [x, y] = [0, 0];\n let iteration = 0;\n while (x*x + y*y < 4 && iteration < maxIterations) {\n [x, y] = [x*x - y*y + c[0], 2*x*y + c[1]];\n iteration++;\n }\n return iteration;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"C","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"{ let w = 0.5*width; \n \n let svg = DOM.svg(w, w);\n const R = 2;\n \n let x = d3.scaleLinear().domain([-3,3]).range([0,w]),\n zd = z => z.map(x);\n \n d3.select(svg).append('circle')\n .attr('cx', x(0))\n .attr('cy', x(0))\n .attr('r', x(R)-x(0))\n .attr('fill', '#f4f4f4');\n\n let dw = 3,\n chColor = '#aaa';\n const ch = d3.select(svg).append('g');\n \n ch.append('line')\n .attr('x1', x(0)-dw).attr('y1', x(0))\n .attr('x2', x(0)+dw).attr('y2', x(0))\n .attr('stroke', chColor);\n \n ch.append('line')\n .attr('x1', x(0)).attr('y1', x(0)-dw)\n .attr('x2', x(0)).attr('y2', x(0)+dw)\n .attr('stroke', chColor);\n\n\n \n drawOrbit(svg, zd, C, R);\n \n return svg;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md`Vegeu també https://observablehq.com/@fjdumont/mandelbrot i https://observablehq.com/@shaunlebron/minimal-d3-zoom-replacement`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"{\n let fix = x => x.toFixed(2);\n let c1 = fix(C[0]),\n c2 = fix(C[1]);\n return md`El procés ${tex`z\\mapsto z^2+c`} s'escriu en coordenades reals,\nsabent que ${tex`c=${c1} + ${c2}i`} i ${tex`z=x+yi`} com:\n${tex.block`\\begin{array}{ccl}\n x& \\leftarrow & x^2-y^2 + ${c1}\\\\\n y& \\leftarrow &2xy + ${c2}\\end{array}`\n}\n\nLes iteracions sempre comencen a ${tex`z=0`}, és a dir a ${tex`x=y=0`}.`\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"function drawOrbit(svg, zd, c, r=2, N=maxIterations) {\n let g = d3.select(svg).append('g').attr('class', 'orbit')\n let abs2 = z => z[0]**2 + z[1]**2;\n \n var path = [];\n for(let z of itera(c,N)) {\n path.push(z)\n if (abs2(z) > r*r) break;\n }\n g.append('polyline')\n .attr('points', path.map(z => zd(z).join(',')).join(' '))\n \n let spot = g.append('circle')\n .attr('class', 'spot')\n .attr('cx', zd([0,0])[0])\n .attr('cy', zd([0,0])[1]);\n \n var trans = spot;\n for (var j=1; j r*r) {\n trans.transition().remove();\n break } \n }\n \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"function mandelbrot(c) {\n return z => {\n let [x,y] = z;\n return [x*x - y*y + c[0], 2*x*y + c[1]];\n };\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"function* itera(c, n=Infinity) {\n let f = mandelbrot(c);\n var i = 0,\n z = [0,0];\n while(i < n) {\n yield z\n z = f(z);\n i++;\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"html`

Style

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"{\n var i = 0;\n var zt = 0;\n let abs2 = z => z[0]**2 + z[1]**2;\n for (let z of itera(C, 28)) {\n i++;\n zt = abs2(z);\n }\n let mandelbrotValue = (x0, y0) => {\n let [x, y] = [0, 0];\n let iteration = 0;\n while (x*x + y*y < 4 && iteration < maxIterations) {\n [x, y] = [x*x - y*y + x0, 2*x*y + y0];\n iteration++;\n }\n return [x,y, iteration];\n }\n return [i, zt, mandelbrotValue(C[0], C[1])]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"import {Detox} from \"@fjdumont/detox\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"