3e:null 3f:["$","title",null,{"children":"Recursive fractal from complex number algorithm (Mandelbrot set) | onepisya | Observable"}] 45:T45f,{ const svg = d3.create('svg') .attr('width', width) .attr('height', 40) const gCircles = svg.append('g').attr('transform', 'translate(15, 0)') gCircles.selectAll('circle') .data(Array.from({length: 11})) .join('circle') .attr('r', (_, i) => 2 + i / 2) .attr('cx', (_, i) => (i / 11) * width) .attr('cy', 25) .attr('stroke', 'black') .attr('stroke-width', 0.2) .attr('fill', (_, i) => d3.rgb(d3.interpolateInferno((i / 10)))) const gLabels = svg.append('g').attr('transform', 'translate(15,0)') gLabels.selectAll('text') .data(Array.from({length: 11})) .join('text') .text((_, i) => i === 10 ? `${maxIter} / ∞` : `${Math.round((i / 10) * maxIter)}`) .attr('x', (_, i) => (i / 11) * width) .attr('y', 15) .attr('text-anchor', 'middle') .attr('stroke', 'black') .attr('stroke-width', 0.3) .attr('fill', (_, i) => d3.rgb(d3.interpolateInferno((i / 10)))) return svg.node() }46:Tc3d,chart = { const container = html`

` const svg = d3.select(container).selectAll('svg') const gx = d3.create('svg:g') const gy = d3.create('svg:g') let transformed const zoomed = ({transform, sourceEvent}) => { const zx = transform.rescaleX(x).interpolate(d3.interpolateRound) const zy = transform.rescaleY(y).interpolate(d3.interpolateRound) gx.call(xAxis, zx) gy.call(yAxis, zy) redraw(zx, zy) transformed = transform if(sourceEvent) recursionSteps(sourceEvent) } const zoom = d3.zoom() .scaleExtent([1, Infinity]) .on("zoom", zoomed) const canvas = d3.select(container) .selectAll('canvas') .attr('width', `${w}`) .attr('height', `${h}`) const ctx = canvas.node().getContext('2d') const canvasData = ctx.createImageData(w, h) const redraw = (zx, zy) => { let minIter = maxIter Array.from({length: zx.range()[1]}).forEach((_, i) => { Array.from({length: zy.range()[0]}).forEach((_, j) => { const xi = zx.invert(i) const yi = zy.invert(j) const iterCount = mandelbrotCount([xi, yi]) if(iterCount < minIter) minIter = iterCount const iterRatio = d3.rgb(d3.interpolateInferno(iterCount / maxIter)) fillPixel(canvasData, w, iterRatio, i, j) }) }) ctx.putImageData(canvasData, 0, 0) } d3.select(container) .call(zoom) .call(zoom.transform, d3.zoomIdentity) svg.attr('viewBox', [0, 0, w, h]) .attr('class', 'axis') .call(zoom) const recursionSteps = (e) => { svg.select('.recursed').remove() const g = svg.append('g') .classed('recursed', true) const point = d3.pointer(e) const zx = transformed.rescaleX(x).interpolate(d3.interpolateRound) const zy = transformed.rescaleY(y).interpolate(d3.interpolateRound) const xi = zx.invert(point[0]) const yi = zy.invert(point[1]) const steps = mandelbrotSteps([xi, yi]) let i = 0 let previous = [zx.invert(point[0]), zy.invert(point[1])] while(i < steps.length) { const step = steps[i] g.append('circle') .attr('r', 2 + i / (maxIter / 10)) .attr('cx', zx(step[0])) .attr('cy', zy(step[1])) .attr('stroke', 'black') .attr('fill', `${d3.interpolateInferno(i / maxIter)}`) if(previous) { g.append('line') .attr('x1', zx(previous[0])) .attr('y1', zy(previous[1])) .attr('x2', zx(step[0])) .attr('y2', zy(step[1])) .attr('stroke', `${d3.interpolateInferno(i / maxIter)}`) } previous = step ++i } } svg.on('mousemove', recursionSteps) svg.append(() => gx.node()) svg.append(() => gy.node()) return container }47:[] 43:{"id":"a60d585bb74f9050","slug":null,"title":"Recursive fractal from complex number algorithm (Mandelbrot set)","thumbnail":"b5bb340fe4f5be787e2f6618c3f53e2dcb75aa387c65d8051a67f018644c9e27","access_level":"public","create_time":"$D2023-04-01T16:04:15.642Z","update_time":"$D2023-04-01T16:04:15.642Z","view_time":null,"first_public_time":"$D2023-04-01T16:04:15.642Z","has_unpublished_edits":null,"fork":{"id":"9bc30b68e7e67116","slug":"mandelbrot","title":"Fractal – Mandelbrot set","owner":{"id":"f948834a8c29c2f9","login":"dextersjab","name":"Dexter Awoyemi"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":2080,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Recursive fractal from complex number algorithm (Mandelbrot set)","cells":[{"id":0,"value":"md`# Recursive fractal from complex number algorithm (Mandelbrot set)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md`\n## Mandelbrot algorithm\n\nStart at any complex number ${tex`z=a+bi`}.\n\nSquare it and add it to itself.\n\nRepeat.\n${tex.block`z`}\n${tex.block`z^2+z`}\n${tex.block`(z^2+z)^2+z`}\n${tex.block`((z^2+z)^2+z)^2+z`}\n\nIf the resulting number *doesn't* grow unbounded towards ${tex`\\infty`}, it's in the set.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1822,"value":"## Mandelbrot set","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"Each pixel in the interactive image below represents a coordinate on the complex plane. The x-axis is the real axis (the ${tex`a`} value) and the y-axis is the imaginary axis (${tex`b`} value) component.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"md`Number of iterations represented by colour:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1884,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2063,"value":"### Controls\n\nHover over any coordinate to see the recursive steps used to determine the colour displayed.\n\nZoom in and out using mouse/touch gestures.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"### Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1803,"value":"viewof w = Inputs.select([width / 2, width], {label: \"Size\", format: (_, i) => i === 0 ? \"Half (faster)\" : \"Full\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`Resolution/max number of iterations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof maxIter = slider({min: 0, max: 1000, value: 100, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1873,"value":"## Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"- I saw a version of the recursion circles in a [3blue1brown video](https://www.youtube.com/watch?v=LqbZpur38nw) that he credited to [Numberphile](https://www.numberphile.com/videos/whats-special-about-the-mandelbrot-set).\n\nOther inspirations\n- [Professor Mark McClure's (@mcmcclur) Julia and Mandelbrot sets](https://observablehq.com/@mcmcclur/julia-sets-and-the-mandelbrot-set)\n- [Frank Dumont's (@fjdumont) Mandelbrot](https://observablehq.com/@fjdumont/mandelbrot)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1844,"value":"#### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"h = w","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"#### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"x = d3.scaleLinear()\n .domain([-2, 2])\n .range([0, w])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"y = d3.scaleLinear()\n .domain([-2, 2])\n .range([h, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"xAxis = (g, x) => \n g.call(d3.axisTop(x).ticks(10))\n .attr('transform', `translate(0, ${h-10})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"yAxis = (g, y) =>\n g.call(d3.axisRight(y).ticks(10))\n .attr('transform', `translate(${10}, ${0})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"mandelbrotCount = ([a, b]) => {\n const a0 = a\n const b0 = b\n let iter = 0\n while (a * a + b * b <= 4 && ++iter < maxIter) {\n [a, b] = [a * a - b * b + a0, 2 * a * b + b0]\n }\n return iter\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"mandelbrotSteps = ([a, b]) => {\n const a0 = a\n const b0 = b\n const steps = []\n while (a * a + b * b <= 4 && steps.length < maxIter) {\n [a, b] = [a * a - b * b + a0, 2 * a * b + b0]\n steps.push([a, b])\n }\n return steps\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"// don't use... slow\nfunction mandelbrotCountRecursive([a, b], a0, b0, count) {\n const magnitudeZ = a * a + b * b\n if (magnitudeZ > 4) return count\n if (count + 1 > maxIter) return count\n return mandelbrotCountRecursive([a * a - b * b + a0, 2 * a * b + b0], a0, b0, count + 1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"fillPixel = (canvasData, width, colour, x, y) => {\n const ix = (x + y * w) * 4\n canvasData.data[ix + 0] = colour.r\n canvasData.data[ix + 1] = colour.g\n canvasData.data[ix + 2] = colour.b\n canvasData.data[ix + 3] = 255\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"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"},{"id":106,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"