Complex Function Plotter
This tool allows you to visualize, in real-time, in a browser, how complex functions distort the complex plane, like in the Conformal Pictures Wikipedia entry.
The rendered image is created by evaluating the user-supplied function and then using the results of that function to look up a color in an image which is infinitely tiled over the Complex Plane. By changing the expression in the input field, you can visualize how various functions distort the plane.
It's important to note that When rendering with these infinitely-tiled 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. (In fact, we are rendering a kind of "pull-back".) 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.
There are a large number of functions and variables at your disposal.
- Basic arithmetic operators -- "+ - * /" for combining various complex numbers
- Functions -- "sin, cos, log, ^" for computing sinus and cosine, along with complex power and logarithms
- Constants -- "<a,b>" for defining a complex number (a,b) from two real-values.
- Pre-Defined Constants -- "pi, e, a, b" for using common constants. a and b will take on the value of the real and complex part of the point in the complex plane.
- "Animated" Parameter -- "t" can be used in place of a real value to provide some animation to your plot. It slowly oscillates between -1 and 1.
- Quadratic and Inverse Functions
- Logarithmic Function and Complex-Valued Powers
- Rotations By Multiplying Powers of i
- Complex-Valued Trigonometric Functions
This tool runs in real-time thanks to a few other libraries.
- Expressions given by the user are parsed using the PEG.js library along with a grammar written specifically for this plotter 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.
- THREE.js is used to set up the full-window Quad, manage GLSL uniforms, shader compilation, etc. (Basically all the boilerplate display logic).
- jQuery is used for some very minor setup logic (could be easily removed...)