Complex Function Plotter

What is this?

This tool allows you to visualize how complex functions distort the complex plane, as demonstrated in the Conformal Pictures Wikipedia entry.

Initially, when you first load the page, you see a plot of the complex identity function, f(z) = z. The rendered image is created by tiling an image infinitely over the Complex Plane. By changing the expression in the input field, you can visualize how other functions distort the plane.

When rendering with these infinitely-tiliing images, the mapping that is rendered is actually the inverse of the function given. This is because it is prohibitively expensive to compute images of the function itself. Specifically, when rendering a pixel in the image, the location of that pixel in the complex plane is passed to your function, which produces a complex value. That transformed value specifies a location in the original image. This procedure is fast, but plots the inverse of the function given. So, if you want to plot e.g. log(z), then you should instead put in e^z.

Available Functions and Variables

There are a large number of functions and variables at your disposal.

How does it work?

This tool runs in real-time thanks to a few other libraries.

1. Expressions given by the user are parsed using the PEG.js library along with a grammar that encapsulates complex-valued arithmetic and functions. The grammar is fed to PEG.js which produces a parser, and that parser is then used to transform mathematical expressions into a WebGL-compatible snippet of code. The generated code is placed into a WebGL shader template and compiled to give a new rendering based on the expression supplied by the user. All of this happens ~instantly, even on a phone.
2. THREE.js is used to set up the full-window Quad, manage GLSL uniforms, shader compilation, etc. (Basically all the boilerplate display logic).
3. jQuery is used for some very minor setup logic (could be easily removed...)