31:T5f3,md`Try editing the expression above, and share a link! Clicking the link will update your browser location to a permalink containing your edited expression. Your inputs are \`z\` (a complex number) and \`t\` (a scalar that increases by 0.01 each frame). The result must be a scalar for coloring, where the color depends on the fractional part of the output value (e.g. 0.54 for the value 5.54). Choices include: * \`().x\` - real part * \`().y\` - imaginary part * \`cpolar().x/(2.*PI)\` - polar angle * \`cpolar().y\` - magnitude Complex functions available (taken from [Domain Coloring for Complex Functions](https://beta.observablehq.com/@rreusser/domain-coloring-for-complex-functions) by [@rreusser](https://beta.observablehq.com/@rreusser)) include: * \`vec2 cmul (vec2 a, vec2 b)\` * \`vec2 cmul (vec2 a, vec2 b, vec2 c)\` * \`vec2 cdiv (vec2 a, vec2 b)\` * \`vec2 cinv (vec2 z)\` * \`vec2 cexp (vec2 z)\` * \`vec2 clog (vec2 z)\` * \`vec2 cpolar (vec2 z)\` * \`vec2 cpow (vec2 z, float x)\` * \`vec2 cpow (vec2 a, vec2 b)\` * \`vec2 csqrt (vec2 z)\` * \`vec2 csqr (vec2 z)\` * \`vec2 ccos (vec2 z)\` * \`vec2 csin (vec2 z)\` * \`vec2 ctan (vec2 z)\` * \`vec2 cacos (vec2 z)\` * \`vec2 casin (vec2 z)\` * \`vec2 catan (vec2 z)\` * \`vec2 ccosh (vec2 z)\` * \`vec2 csinh (vec2 z)\` * \`vec2 ctanh (vec2 z)\` `32:T11b5,fragmentShader = { const shader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(shader, ` precision highp float; #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 const float width = ${(width + 28).toFixed(1)}; // TODO uniform? const float height = ${height.toFixed(1)}; // TODO uniform? const vec2 center = vec2(width, height) / 2.0; uniform float t; 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)) ); } vec3 cubehelixDefault(float t) { return cubehelix(vec3(mix(300.0 / 180.0 * PI, -240.0 / 180.0 * PI, t), 0.5, t)); } vec3 cubehelixRainbow(float t) { if (t < 0.0 || t > 1.0) t -= floor(t); float ts = abs(t - 0.5); return cubehelix(vec3((360.0 * t - 100.0) / 180.0 * PI, 1.5 - 1.5 * ts, 0.8 - 0.9 * ts)); } 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); } 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); } // https://golang.org/src/math/cmplx/isinf.go vec2 cinf() { return vec2(1.0 / 0.0, 1.0 / 0.0); } // https://golang.org/src/math/cmplx/abs.go // https://golang.org/src/math/hypot.go float cabs(vec2 x) { float p = x.x; float q = x.y; if (p < 0.0) p = -p; if (q < 0.0) q = -q; if (p < q) { float t = p; p = q; q = t; } if (p == 0.0) return 0.0; q = q / p; return p * sqrt(1.0 + q * q); } float value(vec2 z) { return (${value}); } void main(void) { vec2 z = (gl_FragCoord.xy - center) / ${scale.toFixed(1)}; gl_FragColor = vec4(cubehelixRainbow(value(z.xy)), 1.0); } `); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader; throw new Error(gl.getShaderInfoLog(shader)); }33:[] 2f:{"title":"Complex Function Plot","cells":[{"id":0,"value":"md`# Complex Function Plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"canvas = {\n const canvas = DOM.canvas(width + 28, height);\n canvas.style.margin = \"0 -14px\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"legend = {\n const width = 386;\n const height = 33;\n\n const svg = d3.select(DOM.svg(width, height))\n .style(\"overflow\", \"visible\");\n\n const legend = svg.append(\"g\")\n .attr(\"transform\", `translate(0,10)`)\n .call(d3.axisBottom(d3.scaleLinear()\n .range([10, width - 10]))\n .tickSize(13)\n .ticks(null, \"+f\"))\n .call(g => g.selectAll(\".tick line\").attr(\"stroke\", \"#fff\"))\n .call(g => g.select(\".domain\").remove());\n\n legend.insert(\"image\", \"*\")\n .attr(\"x\", 10)\n .attr(\"width\", width - 20)\n .attr(\"height\", 13)\n .attr(\"preserveAspectRatio\", \"none\")\n .style(\"image-rendering\", \"pixelated\")\n .attr(\"xlink:href\", ramp(d3.scaleSequential(d3.interpolateRainbow).copy()).toDataURL());\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"viewof value = {\n const textarea = html`

${new URLSearchParams(html`<a href>`.search).get(\"f\") || `cpolar(cdiv(cmul(csqr(z/5.) - vec2(1, 0), csqr(z/5. - vec2(2, 1))), csqr(z/5.) + vec2(2, 2))).x/(2.*PI) + t`}`;\n  textarea.oninput = () => {\n    textarea.style.height = \"auto\";\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  };\n  yield textarea;\n  textarea.oninput();\n  yield textarea;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"scale = 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"draw = {\n  gl.useProgram(program);\n  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);\n  gl.enableVertexAttribArray(a_vertex);\n  gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);\n  let t = 0;\n  while (true) {\n    gl.uniform1f(gl.getUniformLocation(program, \"t\"), t);\n    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);\n    t += 0.01;\n    yield t;\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"gl = canvas.getContext(\"webgl\", {depth: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"vertexShader = {\n  const shader = gl.createShader(gl.VERTEX_SHADER);\n  gl.shaderSource(shader, `\nattribute vec2 a_vertex;\nvoid main(void) {\n  gl_Position = vec4(a_vertex, 0.0, 1.0);\n}\n`);\n  gl.compileShader(shader);\n  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;\n  throw new Error(gl.getShaderInfoLog(shader));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"program = {\n  const program = gl.createProgram();\n  gl.attachShader(program, vertexShader);\n  gl.attachShader(program, fragmentShader);\n  gl.linkProgram(program);\n  if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;\n  throw new Error(gl.getProgramInfoLog(program));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"vertexBuffer = {\n  const buffer = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n  gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);\n  return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"a_vertex = gl.getAttribLocation(program, \"a_vertex\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"style = html`<style>\n\ntextarea.source {\n  display: block;\n  box-sizing: border-box;\n  width: calc(100% + 28px);\n  font: var(--mono_fonts);\n  min-height: 33px;\n  border: none;\n  padding: 6px 10px;\n  margin: 0 -14px;\n  background: rgb(247,247,249);\n  tab-size: 2;\n  resize: none;\n}\n\ntextarea.source:focus {\n  outline: none;\n}\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>