2c:null 2d:["$","title",null,{"children":"Exploring a Complex Rational Function | nathanabram | Observable"}] 32:[{"id":"18340a13dbdd81a3840676562f505d9f7e84196344e32b872fd9ef9d7c6bf90aa8df09e12a174d26cd995e3c2816686bd68c11c4c1ee0c822ca8ae2d22b87d1c","href":"https://static.observableusercontent.com/files/18340a13dbdd81a3840676562f505d9f7e84196344e32b872fd9ef9d7c6bf90aa8df09e12a174d26cd995e3c2816686bd68c11c4c1ee0c822ca8ae2d22b87d1c","name":"parameter_pic.png","type":"image/png","lastModified":1588615473179.395,"size":91104}] 30:{"id":"bcaa2d92dc451022","slug":"exploring-a-complex-rational-function","title":"Exploring a Complex Rational Function","thumbnail":"75e4f85950e4cc6531782f74501b7cd7d4cc5c6bc0b327f08e39317926867377","access_level":"public","create_time":"$D2020-01-04T18:08:42.681Z","update_time":"$D2020-05-07T02:44:51.169Z","view_time":null,"first_public_time":"$D2020-01-15T16:05:51.357Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"f27d2b04265c023c","login":"nathanabram","name":"nathanabram","avatar_url":"https://avatars-next.observableusercontent.com/efd63c8a1c38eac2570a9c2c9cb995194c87924f23ae8d42666f41f71cd176c2","tier":"starter_2024","bio":""},"version":620,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfd028ac035c9738","login":"nathanabram","name":"nathanabram","avatar_url":"https://avatars-next.observableusercontent.com/efd63c8a1c38eac2570a9c2c9cb995194c87924f23ae8d42666f41f71cd176c2","tier":null,"bio":""}],"members":[{"type":"individual","id":"dfd028ac035c9738","login":"nathanabram","name":"nathanabram","avatar_url":"https://avatars-next.observableusercontent.com/efd63c8a1c38eac2570a9c2c9cb995194c87924f23ae8d42666f41f71cd176c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Exploring a Complex Rational Function","cells":[{"id":0,"value":"md`# Exploring a Complex Rational Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"md `### This app generates julia sets of ${tex`F(z) = \\large \\frac{z^2+c}{z}`} , given ${tex`c \\in \\mathbb{C}`}.

\n\nOn the left is an image of the parameter space for ${tex`F(z) = \\large \\frac{z^2+c}{z}`}.
\nClick any point in the graph of the complex plane on the left to select it as the ${tex`c`} value, which will then be used to generate the coorisponding Julia set on the right. \n\n_Due to computation limits, the image doesn't appear instantaneously! Just wait a second and it will show up._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"make_images()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md `Making these pictures requires iterating the function ${tex`F(z) = \\Large \\frac{z^2+c}{z}`}, so the first step is to make some code for that function.
\n\nNote that ${tex`F(z)`} returns [complex numbers](https://en.wikipedia.org/wiki/Complex_number), so the numbers used have two components: a real part, and an imaginary part. To account for those in code, use vector variables with two components.
\n\nSince the numbers have two parts, then the function must have two parts as well: a real part and an imaginary part, both with their respective inputs and outputs.
\n\nNote that
\n${tex`Re(F(z)) = \\large \\frac{x^4 - y^4 + ax + by}{x^2 + y^2} `}, and
\n${tex`Im(F(z)) = \\large \\frac{2x^3y + 2xy^3 - ay + bx}{x^2 + y^2} `}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"// z=x+iy and c=a+bi, so \n// arrays [x,y] and [a,b] and do the complex arithmetic there.\n\nF_z = function([x, y], [a, b]) {\n let denominator = x * x + y * y;\n let re = (x ** 4 - y ** 4 + x * a + y * b) / denominator;\n let im = (2 * x ** 3 * y + 2 * x * y ** 3 - y * a + x * b) / denominator;\n return [re, im];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md ` ### The Parameter Space
\nAfter defining that function, the parameter space picture (left) can be generated. To generate a parameter space picture for a complex function ${tex`F(c,z)`}, there is the following algorithm:\n\nGiven a point ${tex`\\hat{c}`} in the plane, let ${tex`\\bar{F}(z) = F(\\hat{c},z)`}.
\nIterate ${tex`\\bar{F}(z)`} from a critical point, ${tex`\\bar{z}`}.
\nIf the orbit of ${tex`\\bar{z}`} diverges, color ${tex`\\hat{c}`} white.
\nIf the orbit stays bounded, color ${tex`\\hat{c}`} black.
\n\nDo that for every point in the view window and _viola_! The parameter space picture appears. \n\nGenerating this image takes computation — enough to be noticeable in the user experience. To keep load times down, an uploaded image was used here. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Here's the file upload of the parameter space image.\nparameter_pic = FileAttachment('parameter_pic.png').image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md ` ### Turning Pixels into Numbers
\nConvert each pixel into the complex number it represents. This is needed to color pixles in the view window according to the behavior of the numbers they represent. This is also used to determine the number a user selects from the parameter space picture. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"// Convert canvas coordinates to xy coordinates \n// - i.e. real and imaginary parts\nfunction canvas_to_xy(ij, xmin, xmax, ymin, ymax, canvas) {\n return [\n ((xmax - xmin) / (canvas.width - 1)) * ij[0] + xmin,\n ((ymin - ymax) / (canvas.height - 1)) * ij[1] + ymax\n ];\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md ` ### Generating Julia Sets
\n\nSimilar to the generation of the parameter space image, generating images of Julia sets is done with iteration of a complex function. When generating the parameter space, for each point ${tex`\\hat{c}`} in the plane, the function ${tex`\\bar{F}(z) = F(\\hat{c},z)`} was defined. This function is used to generate the Julia set particular to ${tex`\\hat{c}`}, through a similar algorithm: \n\nChoose a complex point ${tex`\\bar{z}`} from the plane.\nIterate ${tex`\\bar{F}(z)`} from the seed value ${tex`\\bar{z}`}.
\nIf the orbit of ${tex`\\bar{z}`} diverges, color ${tex`\\hat{c}`} white.
\nIf the orbit stays bounded, color ${tex`\\hat{c}`} black.
\n\nDo that for each ${tex`\\bar{z}`} in the view window and _viola_! The _unique_ Julia set for that point in the parameter space appears.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"function juliaOrbitCount(cre, cim, x0, y0, bail) {\n var c = [cre, cim];\n var z = [x0, y0];\n var cnt = 0;\n while (z[0] * z[0] + z[1] * z[1] < 16 && cnt++ < bail) {\n z = F_z(z, c);\n }\n return cnt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md ` ### Piecing Things Together
\nThis code combs through the Julia set view window, calculating if each point should be shaded or not and coloring the canvas pixles accordingly. This pulls in some other blocks, defined below, that build out the graphical tools that allow the math to do its thing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"// A function to draw the Julia set\nfunction draw_julia_set(c, canvas, bail = 200) {\n let xmin = -2;\n let xmax = 2;\n let ymin = -2;\n let ymax = 2;\n let context = canvas.getContext(\"2d\");\n let canvasData = context.createImageData(canvas.width, canvas.height);\n\n for (let i = 0; i < canvas.width; i++) {\n for (let j = 0; j < canvas.height; j++) {\n let xy = canvas_to_xy([i, j], xmin, xmax, ymin, ymax, canvas, bail);\n let it_cnt = juliaOrbitCount(c.re, c.im, xy[0], xy[1], bail);\n let color = 255 - (255 * it_cnt) / (bail + 1);\n let idx = (i + j * canvas.width) * 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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md `### Code to Enable Picture-Making\n\nBelow are a number of pieces that get Javascript to display the math.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// A fixed width is used here, because the parameter space is an uploaded image (not generated by this code)\nwidth = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"// A place to draw the Julia set\njulia_canvas = {\n let xmin = -2;\n let xmax = 2;\n let ymin = -2;\n let ymax = 2;\n let canvas = d3\n .create('canvas')\n .attr('width', 0.5 * width)\n .attr('height', 0.5 * width);\n return canvas.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"parameter_div = {\n let xmin = -.7;\n let xmax = 0.3;\n let ymin = -.5;\n let ymax = .5;\n let x_scale = d3\n .scaleLinear()\n .domain([0, width / 2])\n .range([xmin, xmax]);\n let y_scale = d3\n .scaleLinear()\n .domain([width / 2, 0])\n .range([ymin, ymax]);\n\n let div = d3\n .create('div')\n .style('width', `${width / 2}px`)\n .style('height', `${width / 2}px`)\n .style('display', 'inline-block')\n .style('float', 'left');\n div.append(() => parameter_pic);\n div.on('click', function() {\n let [i, j] = d3.mouse(this);\n let x = x_scale(i);\n let y = y_scale(j);\n draw_julia_set({ re: x, im: y }, julia_canvas, 200);\n c_display.html(`c = ${d3.format('.2f')(x)} + ${d3.format('.2f')(y)} i`);\n });\n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"function make_images() {\n let container = d3\n .create('div')\n .style('width', `${width}px`)\n .style('height', `${30 + width / 2}px`);\n let julia_container = d3\n .create('div')\n .style('width', `${width / 2}px`)\n .style('height', `${width / 2}px`)\n .style('display', 'inline-block');\n julia_container.append(() => julia_canvas);\n container.append(() => parameter_div);\n container.append(() => julia_container.node());\n container.append(() => c_display.node());\n return container.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"// A place to display c value chosen by user click\nc_display = d3\n .create('div')\n .style('width', width + 'px')\n .style('height', '30px') // Added a height specification\n .style('text-align', 'center')\n .style('background-color', '#eee')\n .text('c = ?') // c isn't defined yet, will be defined after the user clicks a point in the parameter space.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md `# Additional Notes
\n\n\n### On the Speed of Image Generation\nIf you click somewhere that is not shaded black in the left picture, the image generates quicker. This is because these images have fewer points that are not going to infinity, and points that do not go to infinity necessarily run the \"while\" loop until it reaches its bail value. \n### Difficulties in Development\nOriginally, I coded this using the Math.js complex objects as the variables that went between everything. This simplified the code, since it meant that I didn't have to break down the function into its real and imaginary components. \nTurns out making objects and passing them between blocks thousands of times is pretty demanding, so that iteration of the program got scrapped. It was taking more that 30 seconds to generate a single picture!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md `### Actually Making the Parameter Space Image\nHere is some code used to generate the image of the parameter space.
Running this code in the same notebook as the Julia set generator slows the user experience, so I choose to keep it separate.
\nNote that this code is using the Math.js complex objects, which makes it quite slow. I am working on a version of this that only uses javascript numbers. My current obstacle there seems to have something to do with getting the critical point. _I suspect my issue is with the complex cube root._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"// // A function to draw the mandelbrot set\n// function draw_mandelbrot_set(canvas, xmin, xmax, ymin, ymax) {\n// let bail = 100;\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 = canvas_to_xy([i, j], xmin, xmax, ymin, ymax, canvas);\n// var it_cnt = orbitCnt(c[0], c[1], bail);\n// var scaled_it_cnt = 255 - (255 * it_cnt) / (bail + 1);\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"// orbitCnt = function paramSpace_iteration_count(cre, cim, bail) {\n// var c = math.complex(cre, cim);\n// (\"use strict\");\n// var cnt = 0;\n// //var c = math.complex(x0,y0); // Initial value of c, the point choosen to try iteration from. Later on, this point will be colored based on the result of its coorisponding critical orbit (found by this function)\n\n// // Note that z = (c/2)^(1/3) is the most basic of the three critical points from which to find critical orbits in F_z\n// var Re = math.re(math.cbrt(math.divide(c, 2)));\n// var Im = math.im(math.cbrt(math.divide(c, 2)));\n// var T = math.complex(Re, Im); // now T is set as the most basic of the three critical points of the function [T = (c/2)^(1/3)]\n\n// while (math.abs(T) <= 3 && cnt++ < bail) {\n// T = F_z(T, c);\n// }\n// return cnt;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"// F_z = function F_z(z, c) {\n// z = math.divide(math.add(math.cube(z), c), z); // Sets z to F(z) = (z^3 + c)/z\n// return z;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"// This is required to run the code above but I've\n// math = require('mathjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"