2e:null 2f:["$","title",null,{"children":"Julia sets and the Mandelbrot set | Mark McClure | Observable"}] 34:T511,// A canvas to draw the Mandelbrot set mandel_canvas = { let xmin = -2; let xmax = 0.6; let ymin = -1.3; let ymax = 1.3; let w = 0.5 * total_width; let canvas = d3.create("canvas").attr("width", w).attr("height", w); draw_mandelbrot_set(canvas.node(), xmin, xmax, ymin, ymax); let context = canvas.node().getContext("2d"); context.fillStyle = "#f30"; let ij = xy_to_ij([-1, 0], xmin, xmax, ymin, ymax, w); context.fillRect(ij[0] + 1, ij[1] - 1, 3, 3); const render = function (ij) { let xy = ij_to_xy(ij, xmin, xmax, ymin, ymax, w); // The lazy programmer's way to cover up the previous clicked point draw_mandelbrot_set(canvas.node(), xmin, xmax, ymin, ymax); context.fillRect(ij[0] + 1, ij[1] - 1, 3, 3); d3.select(julia_svg) .attr("c", ij_to_xy(ij, xmin, xmax, ymin, ymax, w)) .select("image") .attr("xlink:href", generate_julia_im_url({ re: xy[0], im: xy[1] })); c.html(`c = ${d3.format(".2f")(xy[0])} + ${d3.format(".2f")(xy[1])} i`); }; let clicked = false; canvas.on("mousedown", function () { clicked = true; render(d3.mouse(this)); }); canvas.on("mousemove", function () { if (clicked) render(d3.mouse(this)); }); canvas.on("mouseup", function () { clicked = false; }); return canvas; }35:T96e,// A place to draw the Julia set // The picture of the Julia set is drawn to a canvas which becomes the background of an SVG. // The orbit is drawn as a path in the SVG on hover. julia_svg = { let w = total_width / 2; const xScale = d3.scaleLinear().domain([-2, 2]).range([0, w]); const yScale = d3.scaleLinear().domain([-2, 2]).range([w, 0]); const rScale = d3.scaleLinear().domain([0, 4]).range([0, w]); const pts_to_path = d3 .line() .x(function (d) { return xScale(d[0]); }) .y(function (d) { return yScale(d[1]); }); let svg = d3.create("svg").attr("width", w).attr("height", w); if (!svg.attr("c")) { svg.attr("c", "-1,0"); } // Set up the SVG background const mapbg = DOM.uid("mapbg"); svg .append("defs") .append("pattern") .attr("id", mapbg.id) .attr("patternUnits", "userSpaceOnUse") .attr("width", w) .attr("height", w) .append("image") .attr("xlink:href", generate_julia_im_url({ re: -1, im: 0 })) .attr("width", w) .attr("height", w); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", w) .attr("height", w) .attr("fill", mapbg); svg .on("mousemove", function () { svg.selectAll(".orbit").remove(); let c = svg.attr("c").split(",").map(parseFloat); let xy = ij_to_xy(d3.mouse(this), -2, 2, -2, 2, w); let orbit = compute_orbit(c, xy); for (let i = 0; i < orbit.length; i++) { svg .append("path") .attr("class", "orbit") .attr("d", pts_to_path(orbit.slice(i, i + 2))) .attr("stroke", "#8888FF") .attr("stroke-width", 2) .attr("fill", "none") .style("opacity", 0.5); svg .append("circle") .attr("class", "orbit") .attr("cx", xScale(orbit[i][0])) .attr("cy", yScale(orbit[i][1])) .attr("r", 4) .attr("fill", "red") .attr("stroke", "none") .attr("fill-opacity", 0.03); } svg .append("circle") .attr("class", "orbit") .attr("cx", xScale(orbit[0][0])) .attr("cy", yScale(orbit[0][1])) .attr("r", 4) .attr("fill", "green") .attr("stroke", "black") .attr("stroke-width", 1); }) .on("mouseleave", function () { svg.selectAll(".orbit").remove(); }); return svg.node(); }36:[] 32:{"id":"f2a6b763619ee450","slug":"julia-sets-and-the-mandelbrot-set","title":"Julia sets and the Mandelbrot set","thumbnail":"d6e112eddafc4c06f57ef0e916639cb7639de972843794fceb8457d321f50103","access_level":"public","create_time":"$D2020-01-24T19:08:43.699Z","update_time":"$D2025-05-29T14:24:04.887Z","view_time":null,"first_public_time":"$D2020-01-26T16:04:38.866Z","has_unpublished_edits":null,"fork":true,"stars":32,"starred":false,"owner":{"type":"team","id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":"starter_2024"},"version":690,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"8acc996ecd7d2157","slug":"complex-dynamics","title":"Complex Dynamics","owner":{"id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure"}},"type":"notebook","body":{"title":"Julia sets and the Mandelbrot set","cells":[{"id":0,"value":"topmatter = md`# Julia sets and the Mandelbrot set\n\nClick on or drag in the Mandelbrot set on the left to generate the corresponding Julia set. Hover over the Julia set on the right to see the orbit of the corresponding point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"widget = put_it_all_together()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`## Notes\n\nThe Mandelbrot set is a famous fractal object that has probably been generated on computers millions of times since its appearance in [Scientific American's computer recreations column](http://miriam-english.org/files/Dewdney_Mandelbrot/Dewdney_Mandelbrot.html) in 1985. Naturally, it's been implemented [here on Observable](https://observablehq.com/@jashkenas/the-mandelbrot-set), where the emphasis is on interactive exploration of the set by panning and zooming. The Mandelbrot set arose, though, as an attempt to understand more fundamental objects called Julia sets. This little app explores the relationship between the Mandelbrot set and Julia sets.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function put_it_all_together() {\n let container = d3\n .create(\"div\")\n .style(\"width\", `${total_width}px`)\n .style(\"height\", `${0.54 * total_width}px`);\n container.append(() => mandel_canvas.node()).style(\"float\", \"left\");\n container.append(() => julia_svg);\n container.append(() => c.node());\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`### Mandelbrot code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// A function to draw the mandelbrot set\nfunction draw_mandelbrot_set(canvas, xmin, xmax, ymin, ymax) {\n let bail = 100;\n let w = total_width / 2;\n let mandel_context = canvas.getContext(\"2d\");\n let canvasData = mandel_context.createImageData(canvas.width, canvas.height);\n for (let i = 0; i < canvas.width; i++) {\n for (let j = 0; j < canvas.height; j++) {\n var c = ij_to_xy([i, j], xmin, xmax, ymin, ymax, w);\n var it_cnt = mandelbrot_iteration_count(c[0], c[1], bail);\n let scaled_it_cnt = 255 - (255 * it_cnt) / (bail + 1);\n // let scaled_it_cnt =\n // it_cnt == bail ? 0 : ((255 * it_cnt) / (bail + 1)) ** 1.5;\n var idx = (i + j * canvas.width) * 4;\n canvasData.data[idx + 0] = scaled_it_cnt;\n canvasData.data[idx + 1] = scaled_it_cnt;\n canvasData.data[idx + 2] = scaled_it_cnt;\n canvasData.data[idx + 3] = 255;\n }\n }\n mandel_context.putImageData(canvasData, 0, 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// Compute the iteration count from z=0 for a given z^2+c\nfunction mandelbrot_iteration_count(cre, cim, bail = 100) {\n let x = cre;\n let y = cim;\n let xtemp;\n let ytemp;\n let cnt = 0;\n while (x * x + y * y <= 4 && ++cnt < bail) {\n xtemp = x;\n ytemp = y;\n x = xtemp * xtemp - ytemp * ytemp + cre;\n y = 2 * xtemp * ytemp + cim;\n }\n return cnt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`### Julia code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"// Generate the dataURL that holds an image of the Julia set.\nfunction generate_julia_im_url(c, bail = 150) {\n let w = Math.floor(width / 2);\n let context = DOM.context2d(w, w);\n context.canvas.width = w;\n context.canvas.height = w;\n let xmin = -2;\n let xmax = 2;\n let ymin = -2;\n let ymax = 2;\n let canvasData = context.createImageData(w, w);\n\n for (let i = 0; i < w; i = i + 1) {\n for (let j = 0; j < w; j = j + 1) {\n let xy = ij_to_xy([i, j], xmin, xmax, ymin, ymax, w);\n let it_cnt = julia_iteration_count(c.re, c.im, xy[0], xy[1], bail);\n let color = 255 - (255 * it_cnt) / (bail + 1);\n // let color = it_cnt == bail ? 0 : ((255 * it_cnt) / (bail + 1)) ** 4;\n let idx = (i + j * w) * 4;\n canvasData.data[idx + 0] = color;\n canvasData.data[idx + 1] = color;\n canvasData.data[idx + 2] = color;\n canvasData.data[idx + 3] = 255;\n }\n }\n context.putImageData(canvasData, 0, 0);\n return context.canvas.toDataURL();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"// Compute the iteration count for a given z^2+c and given z0\nfunction julia_iteration_count(cre, cim, x0, y0, bail) {\n let x = x0;\n let y = y0;\n let xtemp;\n let ytemp;\n let cnt = 0;\n while (x * x + y * y <= 4 && ++cnt < bail) {\n xtemp = x;\n ytemp = y;\n x = xtemp * xtemp - ytemp * ytemp + cre;\n y = 2 * xtemp * ytemp + cim;\n }\n return cnt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"md`#### Compute the orbit to overlay on the Julia set.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"function f(c, z) {\n let cx = c[0];\n let cy = c[1];\n let x = z[0];\n let y = z[1];\n return [x * x - y * y + cx, 2 * x * y + cy];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"function compute_orbit(c, z0) {\n let z = z0;\n let orbit = [z0];\n let cnt = 0;\n while (z[0] * z[0] + z[1] * z[1] < 20 && cnt < 500) {\n z = f(c, z);\n orbit.push(z);\n cnt = cnt + 1;\n }\n return orbit;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`### Display the value of c`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"// A place to display c\nc = d3\n .create(\"div\")\n .style(\"width\", \"100%\")\n .style(\"height\", \"30px\")\n .style(\"text-align\", \"center\")\n .text(\"c = -1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`### Translate between canvas coordinates and complex coordinates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"function ij_to_xy(ij, xmin, xmax, ymin, ymax, w) {\n return [\n ((xmax - xmin) / (w - 1)) * ij[0] + xmin,\n ((ymin - ymax) / (w - 1)) * ij[1] + ymax\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function xy_to_ij(xy, xmin, xmax, ymin, ymax, w) {\n return [\n ((w - 1) * (xy[0] - xmin)) / (xmax - xmin),\n ((1 - w) * (xy[1] - ymax)) / (ymax - ymin)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"total_width = width < 850 ? width : 850","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"