2c:null 2d:["$","title",null,{"children":"Domain Coloring for Complex Functions | Ricky Reusser | Observable"}] 32:Tb29,md` ## Motivation Domain coloring is a technique for visualizing complex functions. Plotting a function of one variable on a two dimensional page is straightforward, but a complex function doubles the number of dimensions by mapping each complex number to another complex number—for a total of four dimensions. That's one more than we can represent with a two-dimensional heat map or contour plot, so we'll need to resort to some other tricks. [Complex *analytic* functions](https://en.wikipedia.org/wiki/Analytic_function) are for the most part just regular functions evaluated in the complex plane and which don't resort to forbidden operations like treating the real and imaginary components separately (this is *not at all* a technical definition!). For example, ${tex`f(z) = \sqrt{z}`} is complex analytic while ${tex`f(z) = \sqrt{\mathrm{Re}(z)}`} is complex but not analytic. If our function is analytic, then the behavior constrained by the [Cauchy-Riemann](https://en.wikipedia.org/wiki/Cauchy–Riemann_equations) equations and we can take a bit more targeted approach to focus on conveying the characteristics of the complex analytic function that aid interpretation. Roughly speaking, the rules of domain coloring are: - Dark grid lines represent inputs ${tex `z`} with integer real or imaginary values. I'll refer to these as **rectangular grid lines**. - Light grid lines represent the argument (a.k.a. the phase) and modulus (a.k.a. the magnitude) of the input ${tex `z`}. (Well, more precisely the *log* of the modulus, to make it scale-independent.) I'll refer to these as **polar grid lines**. - The hue represents the complex phase, with red corresponding to a positive real value - Values with a small modulus are dark - Values with a large modulus are light That's a lot to pack into one plot! There are additional tricks like indicating direction with gradients, but I find that more distracting than anything. You can [read more about domain coloring on wikipedia](https://en.wikipedia.org/wiki/Domain_coloring) (and see their version of the above plot). Though the task is straightforward, getting the coloring just right is really tricky. I've given it another shot in this notebook, but there's still room for improvement. ***Edit***: *I'm starting to second guess my take on gradients. It's just so hard to get the scaling right otherwise, especially on the GPU where it's not straightforward to calculate stats and scale the coloring by the actual range displayed. I've [tried the gradient approach here](http://rreusser.github.io/lamb-wave-dispersion/). It's not so bad as long as you aim for a bit of subtlety. Though it still seems more difficult to interpret to me.* Let's work through this and start simple. ## Visualizing zeros Using the domain coloring technique, the plot of ${tex `f(z) = z`} looks like this: `33:T51c,md` For ${tex`n = -1`}, the zero of the previous plot has become a pole, indicated by the light spot at the origin. Since the values have been simply inverted, the light lines representing the modulus and argument are visually unchanged. The rectangular grid lines though have been inverted so that they lie within the unit circle. The clustering of rectangular grid lines near a pole (there are a lot of integers between one and infinity!) and absence of rectangular grid lines near a zero (there aren't any integers between 1 and 0) helps distinguish poles from zeros. If you set ${tex`n = 2`}, you can see the multiplicity of the zero (or of the pole, similarly, for ${tex`n = -2`}) by the number of radial lines. If there are twice the number of lines, there are twice the number of zeros (or poles, respectively). This is covered very nicely by 3blue1brown in the video [Solving 2D equations using color](https://www.youtube.com/watch?v=b7FxPsqfkOY). The discontinuity for non-integer powers results in a [branch cut](https://flothesof.github.io/branch-cuts-with-square-roots.html) since the function is multiple-valued, but to visualize branch cuts, you need to move into the third dimension and [Riemann surfaces](https://en.wikipedia.org/wiki/Riemann_surface), so we won't delve into that here. ` 34:T544,md` ## An aside on the implementation To create these plots, I've used [regl](https://github.com/regl-project/regl), some GLSL helpers for tedious complex arithmetic (careful, they don't try too hard to avoid floating point overflow/underflow!), and a nice-looking but slightly nasty ad-hoc function for domain coloring in GLSL. It's all done in a fragment shader, so there's no meshing or computation of lines. You can find the source at the bottom, naturally. 😉 The biggest tricks in the domain coloring function are the use of [OES_standard_derivatives](https://www.khronos.org/registry/OpenGL/extensions/OES/OES_standard_derivatives.txt) for the single-pixel-width lines (adapted from [glsl-solid-wireframe](https://github.com/rreusser/glsl-solid-wireframe), though it's a fairly common technique), and lots of tricky [mixes](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/mix.xhtml) to get the layering and interaction of lines just right. It's not perfect, but I'm reasonably happy at this point. And a big shout out to [@mbostock](https://twitter.com/mbostock) for the [cubehelix-rainbow](https://beta.observablehq.com/@mbostock/complex-plot) in his complex function plotting experiment, which I've modified slightly here to use a smoother ramp and avoid discontinuities. It's not perfect, but it's absolutely lovely. 🌈 `35:T1fe8,glsl = ({ useStandardDerivatives: ` #extension GL_OES_standard_derivatives : enable `, constants: ` #define PI 3.141592653589793238 #define HALF_PI 1.57079632679 #define HALF_PI_INV 0.15915494309 #define LOG_2 0.69314718056 #define C_ONE (vec2(1.0, 0.0)) #define C_I (vec2(0.0, 1.0)) #define TO_RADIANS 0.01745329251 `, precision: ` precision highp float; `, domainColoring: ` vec3 domainColoring ( vec2 z, vec2 polarGridSpacing, float polarGridStrength, vec2 rectGridSpacing, float rectGridStrength, float poleLightening, float poleLighteningSharpness, float rootDarkening, float rootDarkeningSharpness, float lineWidth ) { vec2 zpolar = cpolar(z); float carg = zpolar.x * HALF_PI_INV; float logmag = log2(zpolar.y) * 0.5 / LOG_2; float rootDarkeningFactor = pow(2.0, -zpolar.y * rootDarkeningSharpness); float rootDarkness = 1.0 - rootDarkening * rootDarkeningFactor; float poleLighteningFactor = 1.0 - pow(2.0, -zpolar.y / poleLighteningSharpness); float poleLightness = 1.0 - poleLightening * poleLighteningFactor; float polarGridFactor = wireframe((vec2(carg, logmag) / polarGridSpacing), lineWidth, 1.0); float polarGrid = mix(1.0 - polarGridStrength, 1.0, polarGridFactor); float rectGridFactor = 1.0 - (1.0 - poleLighteningFactor) * (1.0 - wireframe((z / rectGridSpacing), lineWidth, 1.0)); float rectGrid = mix(1.0 - rectGridStrength, 1.0, rectGridFactor); return mix( vec3(1.0), mix( vec3(0.0), mix(vec3(1.0), cubehelixRainbow(carg + 0.25) * rootDarkness, poleLightness), mix(rectGrid, max(rectGrid, 1.0 - polarGridFactor), polarGridStrength) ), polarGrid ); } `, hsv2rgb: ` vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } `, hypot: ` float hypot (vec2 z) { float t; float x = abs(z.x); float y = abs(z.y); t = min(x, y); x = max(x, y); t = t / x; return x * sqrt(1.0 + t * t); } `, complex: ` float cosh (float x) { return 0.5 * (exp(x) + exp(-x)); } float sinh (float x) { return 0.5 * (exp(x) - exp(-x)); } vec2 sinhcosh (float x) { float ex = exp(x); float emx = exp(-x); return 0.5 * vec2( ex + emx, ex - emx ); } vec2 cmul (vec2 a, vec2 b) { return vec2( a.x * b.x - a.y * b.y, a.y * b.x + a.x * b.y ); } vec2 cmul (vec2 a, vec2 b, vec2 c) { return cmul(cmul(a, b), c); } vec2 cdiv (vec2 a, vec2 b) { return vec2( a.y * b.y + a.x * b.x, a.y * b.x - a.x * b.y ) / dot(b, b); } vec2 cinv (vec2 z) { return vec2(z.x, -z.y) / dot(z, z); } vec2 cexp (vec2 z) { return vec2(cos(z.y), sin(z.y)) * exp(z.x); } vec2 clog (vec2 z) { return vec2( log(hypot(z)), atan(z.y, z.x) ); } vec2 cpolar (vec2 z) { return vec2( atan(z.y, z.x), hypot(z) ); } vec2 cpow (vec2 z, float x) { float r = hypot(z); float theta = atan(z.y, z.x) * x; return vec2(cos(theta), sin(theta)) * pow(r, x); } vec2 cpow (vec2 a, vec2 b) { float aarg = atan(a.y, a.x); float amod = hypot(a); float theta = log(amod) * b.y + aarg * b.x; return vec2(cos(theta), sin(theta)) * pow(amod, b.x) * exp(-aarg * b.y); } vec2 csqrt (vec2 z) { vec2 zpolar = cpolar(z); float theta = zpolar.x * 0.5; float mod = sqrt(zpolar.y); return vec2(cos(theta), sin(theta)) * mod; } vec2 csqr (vec2 z) { return vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y); } vec2 ccos (vec2 z) { return sinhcosh(z.y) * vec2(cos(z.x), -sin(z.x)); } vec2 csin (vec2 z) { return sinhcosh(z.y).yx * vec2(sin(z.x), cos(z.x)); } vec2 ctan (vec2 z) { vec2 e2iz = cexp(2.0 * vec2(-z.y, z.x)); return cdiv(e2iz - C_ONE, cmul(C_I, C_ONE + e2iz)); } vec2 cacos (vec2 z) { vec2 t1 = csqrt(vec2(z.y * z.y - z.x * z.x + 1.0, -2.0 * z.x * z.y)); vec2 t2 = clog(vec2(t1.x - z.y, t1.y + z.x)); return vec2(HALF_PI - t2.y, t2.x); } vec2 casin (vec2 z) { vec2 t1 = csqrt(vec2(z.y * z.y - z.x * z.x + 1.0, -2.0 * z.x * z.y)); vec2 t2 = clog(vec2(t1.x - z.y, t1.y + z.x)); return vec2(t2.y, -t2.x); } vec2 catan (vec2 z) { float d = z.x * z.x + (1.0 - z.y) * (1.0 - z.y); vec2 t1 = clog(vec2(1.0 - z.y * z.y - z.x * z.x, -2.0 * z.x) / d); return 0.5 * vec2(-t1.y, t1.x); } vec2 ccosh (vec2 z) { return sinhcosh(z.x).yx * vec2(cos(z.y), sin(z.y)); } vec2 csinh (vec2 z) { return sinhcosh(z.x) * vec2(cos(z.y), sin(z.y)); } vec2 ctanh (vec2 z) { vec2 ez = cexp(z); vec2 emz = cexp(-z); return cdiv(ez - emz, ez + emz); } `, cubeHelix: ` // https://github.com/d3/d3-color vec3 cubehelix(vec3 c) { float a = c.y * c.z * (1.0 - c.z); float cosh = cos(c.x + PI / 2.0); float sinh = sin(c.x + PI / 2.0); return vec3( (c.z + a * (1.78277 * sinh - 0.14861 * cosh)), (c.z - a * (0.29227 * cosh + 0.90649 * sinh)), (c.z + a * (1.97294 * cosh)) ); } // https://github.com/d3/d3-scale-chromatic vec3 cubehelixRainbow(float t) { float ts = 0.25 - 0.25 * cos((t - 0.5) * PI * 2.0); return cubehelix(vec3( (360.0 * t - 100.0) * TO_RADIANS, 1.5 - 1.5 * ts, (0.8 - 0.9 * ts) )); } `, wireframe: ` // https://github.com/rreusser/glsl-solid-wireframe float wireframe (float parameter, float width, float feather) { float w1 = width - feather * 0.5; float d = fwidth(parameter); float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); return smoothstep(d * w1, d * (w1 + feather), looped); } float wireframe (vec2 parameter, float width, float feather) { float w1 = width - feather * 0.5; vec2 d = fwidth(parameter); vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec2 a2 = smoothstep(d * w1, d * (w1 + feather), looped); return min(a2.x, a2.y); } float wireframe (vec3 parameter, float width, float feather) { float w1 = width - feather * 0.5; vec3 d = fwidth(parameter); vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec3 a3 = smoothstep(d * w1, d * (w1 + feather), looped); return min(min(a3.x, a3.y), a3.z); } float wireframe (vec4 parameter, float width, float feather) { float w1 = width - feather * 0.5; vec4 d = fwidth(parameter); vec4 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec4 a4 = smoothstep(d * w1, d * (w1 + feather), looped); return min(min(min(a4.x, a4.y), a4.z), a4.w); } float wireframe (float parameter, float width) { float d = fwidth(parameter); float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); return smoothstep(d * (width - 0.5), d * (width + 0.5), looped); } float wireframe (vec2 parameter, float width) { vec2 d = fwidth(parameter); vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec2 a2 = smoothstep(d * (width - 0.5), d * (width + 0.5), looped); return min(a2.x, a2.y); } float wireframe (vec3 parameter, float width) { vec3 d = fwidth(parameter); vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec3 a3 = smoothstep(d * (width - 0.5), d * (width + 0.5), looped); return min(min(a3.x, a3.y), a3.z); } float wireframe (vec4 parameter, float width) { vec4 d = fwidth(parameter); vec4 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec4 a4 = smoothstep(d * (width - 0.5), d * (width + 0.5), looped); return min(min(min(a4.x, a4.y), a4.z), a4.z); } `, })36:Tb42,function createPlot () { let w = width; let h = width / 1.6; let pixelRatio = 2; let canvas = DOM.canvas(w * pixelRatio, h * pixelRatio); canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; let regl = wrapREGL({ canvas: canvas, pixelRatio: pixelRatio, extensions: ['oes_standard_derivatives'] }); canvas.value = { regl: regl, createDrawFunction: function createPlotter (f) { var drawField = regl({ vert: ` precision mediump float; uniform vec2 aspectRatio; attribute vec2 xy; varying vec2 z; void main () { z = xy * aspectRatio; gl_Position = vec4(xy, 0, 1); } `, frag: ` ${glsl.useStandardDerivatives} ${glsl.constants} ${glsl.precision} ${glsl.hypot} ${glsl.complex} ${glsl.wireframe} ${glsl.hsv2rgb} ${glsl.cubeHelix} ${glsl.domainColoring} uniform float rootDarkening, poleLightening; uniform float rootDarkeningSharpness, poleLighteningSharpness; uniform float rectangularGridOpacity, polarGridOpacity; varying vec2 z; uniform float pixelRatio; ${f} void main () { gl_FragColor = vec4(domainColoring( f(2.0 * z), // The evaluated function! vec2(0.125, 1.0), // Polar grid spacing polarGridOpacity, // Polar grid strength vec2(1.0), // Rectangular grid spacing rectangularGridOpacity, // Rectangular grid strength poleLightening, // Pole lightening strength poleLighteningSharpness, // Pole ligthening sharpness rootDarkening, // Root darkening strength rootDarkeningSharpness, // Root darkening sharpness 0.5 * pixelRatio // Line thickness ), 1.0); } `, attributes: { xy: [-4, -4, 4, -4, 0, 4], }, uniforms: { pixelRatio: regl.context('pixelRatio'), aspectRatio: ctx => [ctx.framebufferWidth / ctx.framebufferHeight, 1], rootDarkening: regl.prop('rootDarkening'), poleLightening: regl.prop('poleLightening'), rootDarkeningSharpness: regl.prop('rootDarkeningSharpness'), poleLighteningSharpness: regl.prop('poleLighteningSharpness'), rectangularGridOpacity: regl.prop('rectangularGridOpacity'), polarGridOpacity: regl.prop('polarGridOpacity'), n: (ctx, props) => props.n || 0, t: regl.prop('t'), }, count: 3 }); return function drawPlot (props) { regl.poll() drawField(props || {}); } } }; return canvas; }37:[] 30:{"id":"2cb5abc2e28e7796","slug":"domain-coloring-for-complex-functions","title":"Domain Coloring for Complex Functions","thumbnail":"4656d0de4c0057a2b97c5c743930450794bea254fe3aec47a2259d0acfce26c5","access_level":"public","create_time":"$D2018-06-16T21:04:57.533Z","update_time":"$D2020-07-26T03:11:44.550Z","view_time":null,"first_public_time":"$D2018-06-17T18:02:05.931Z","has_unpublished_edits":null,"fork":false,"stars":116,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024","bio":""},"version":2173,"publish_version":2173,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"bio":""}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":54,"collection":{"id":"2ef792b9227476b4","slug":"webgl","title":"WebGL","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"titling":"auto","title":"Domain Coloring for Complex Functions","cells":[{"id":1320,"value":"md`# Domain Coloring for Complex Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"viewof plot3 = createPlot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"md`**Figure**: A plot of the function ${tex`f(z) = \\displaystyle \\frac{(z^2 - 1)(z - 2 - i)^2}{z^2 + 2 + 2i}`}, where the horizontal axis is ${tex`\\mathrm{Re}(z)`} and the vertical axis is ${tex`\\mathrm{Im}(z)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"drawPlot3(domainColoringParameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"drawPlot3 = plot3.createDrawFunction(`vec2 f (vec2 z) {\n return cdiv(cmul(csqr(z) - vec2(1, 0), csqr(z - vec2(2, 1))), csqr(z) + vec2(2, 2));\n}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"viewof plot1 = createPlot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"drawPlot1 = plot1.createDrawFunction(`\n vec2 f (vec2 z) {\n return z;\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2065,"value":"drawPlot1(domainColoringParameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"md`\nThere are a few things to note about this plot. The dark grid lines remain a uniformly spaced rectangular grid since ${tex `f(z) = z`} is the identity function. These are just inputs ${tex`z`} with integer real or imaginary parts.\n\nThe light grid lines represent the modulus and argument of the input ${tex `z`}. The eight radial lines representing the argument are spaced in equal ${tex `45^\\circ`} increments, while the modulus is displayed as concentric rings (equally spaced in the logarithmic sense).\n\nThe dark region in the center represents the zero, ${tex `f(0) = 0`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"md`\n## Visualizing poles\n\nNext, we'll plot the inverse, ${tex `f(z) = 1 / z`}. In fact, let's cut to the chase and plot ${tex `f(z) = z^n`} and start with ${tex `n = -1`} so that we can draw some additional conclusions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"value":"viewof plot2 = createPlot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"tex`f(z) = z^{${n}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"drawPlot2 = plot2.createDrawFunction(`\n uniform float n;\n vec2 f (vec2 z) {\n return cpow(z, n);\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"drawPlot2(Object.assign({n}, domainColoringParameters))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1967,"value":"md`\n## Putting the pieces together\n\nFinally, we'll plot a more complicated function and animate it. Feel free to modify the function. The GLSL code at the bottom defines a number of functions (\\`cmul\\`, \\`cdiv\\`, \\`cinv\\`, \\`cpow\\`, \\`csqrt\\`, \\`clog\\`), trig functions (\\`ccos\\`, \\`csin\\`, \\`ctan\\`, \\`cacos\\`, \\`casin\\`, \\`catan\\`), and hyperbolic trig functions (\\`csinh\\`, \\`ccosh\\`, \\`ctanh\\`). They're fun and easy to implement, but please note that they're not very robust if you're into floating point rigor.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"viewof plot4 = createPlot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"md`**Figure:** Can you locate the poles? The zeros? The zero with multiplicity 2?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"viewof button = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"paused = {\n button;\n return !this;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"drawPlot4 = plot4.createDrawFunction(`\n uniform float t;\n vec2 f (vec2 z) {\n vec2 fz = C_ONE;\n vec2 a0 = cexp(vec2(0.375, -0.125 * t));\n fz = cmul(fz, z - cexp(vec2(0.0, t)));\n fz = cdiv(fz, z - cexp(vec2(0.5, 0.5 * t)));\n fz = cmul(fz, z - cexp(vec2(0.125, -0.625 * t)));\n fz = cdiv(fz, z - cexp(vec2(0.25, -0.25 * t)));\n fz = cmul(fz, csqr(z - a0));\n return fz;\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1939,"value":"drawPlot4(Object.assign({t: 6}, domainColoringParameters))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"!paused && drawPlot4(Object.assign({t: (now / 1000) % 1000}, domainColoringParameters))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1978,"value":"md`\n## Customizing the coloring\n\nBy dragging the sliders below, you can customize the details of the domain coloring. It's a bit difficult to make all the plots on the page look nice at the same time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"viewof rectangularGridOpacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"viewof polarGridOpacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"viewof rootDarkening = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"viewof rootDarkeningSharpness = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1576,"value":"viewof poleLightening = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"viewof poleLighteningSharpness = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1997,"value":"viewof plot5 = createPlot()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"md`**Figure**: A plot of ${tex`f(z) = \\sin(1/z)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2000,"value":"drawPlot5 = plot5.createDrawFunction(`\n vec2 f (vec2 z) {\n z /= 16.0;\n return csin(cinv(z));\n }\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2003,"value":"drawPlot5(domainColoringParameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2010,"value":"md`\n## The implementation details\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"domainColoringParameters = ({\n rootDarkening,\n poleLightening,\n rectangularGridOpacity,\n polarGridOpacity,\n rootDarkeningSharpness,\n poleLighteningSharpness\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"wrapREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"