# Domkol: HTML5 Complex Function Visualisation

Domkol works best in Chrome/Chromium. It can be used in other browsers, but the rendering and painting of the domain colouring is considerably slower in non-Chrome/Chromium browsers. To make the UI more responsive in a slower browser, uncheck the "Repaint domain colouring continuously" checkbox.

## Explanation

Domkol is an HTML5/Javascript/SVG/Canvas/JQuery application which displays a complex function as a colouring of the complex plane (a technique known as domain colouring), with additional interactivity to show values as a graph on a 1-dimensional subset of the domain (i.e. a 1-dimensional subset of the complex numbers considered as a 2-dimensional Real number space). Initially the function f(z) = z3 is shown (but you can change the function by moving the zeroes around with the mouse).

The 1-dimensional curve showing currently is a circle. (Other options, such as a straight line, may eventually be added.)

The circle is controlled by two draggable handles: a centre handle that moves the circle as a whole, and an edge handle that controls the radius of the circle. The values of f for values of z on the circle are shown in terms of distance from the centre of the circle, where f = 0 is on the circumference itself, positive is outside the circle and negative is inside the circle. Real is blue; imaginary is dark brown. The scale of the mapping from the value of f to radius is controlled by the slider, which has a logarithmic scale.

If the graph of f goes through the centre, then the graph becomes ambiguous, and you should use the slider to reduce the scale factor.

A polar grid defines the scale of values for the real and imaginary components f, where the outer-most circle of the grid represents 1 and the inner-most circle represents -1 (if it is visible, which depends on the domain circle size and the chosen scale factor for f).

The "colour scale" specifies how the imaginary and real parts of f map to colour intensities. When the scale value is 1.0, a value of +1 or -1 maps to maximum colour intensity (which with the current colour scheme corresponds to the colours yellow, green, red and black for 1+i, -1+i, 1-i and -1-i respectively).

### 3D View and 2D View of the Function Graph

The 3D view of the graph of f on the circular domain is implemented by three different 3D clues:

1. A 3D "wiggle" animation
2. Over and under colouration of the graph
3. Two faint shadows (from two hypothetical light sources coming from the top left corner)

If the 3D option is unchecked, then the circle graph will display two graphs, one for the real component and one for the imaginary component of the value of the function f.

### Residue Theorem

It is a consequence of the Residue theorem that the number of times the phase of an analytic complex function f rotates while travelling around a closed curve is equal to the number of simple zeroes of the function inside the curve. You can check that this holds for the white circle by dragging both the circle and the zeroes of the polynomial around, and seeing that the number of times that the 3D representation of f winds around the circle is always equal to the number of zeroes inside the circle (it may sometimes be necessary, after changing the zeroes and the location of the circle, to adjust the graph scale to see this more clearly).

### F Value Rotation

F value rotation is an experimental feature that lets you rotate the values of f in the complex plane. Although it looks a bit like the graph on the circular domain is rotating around the origin, actually it is a rotation of the f values around the axis defined (locally) by the circumference of the white domain circle.

## Issues and Browser Compatibility

So far I have tested Domkol on the latest versions of various browsers, including:

• In Linux (Ubuntu 12.10): Chromium, Chrome and Firefox.
• In Windows (Vista): Chrome, Firefox, Opera, Safari and Internet Explorer.

I am using Chromium on Linux to develop the application, so at any particular time it is likely to work most correctly on that browser.

Known issues are:

• Performance: There are some noticeable performance variations between browsers, especially when doing interactions which cause the coloured bitmap to be redrawn, i.e. changing the colour scale, or moving the function zeroes around. In fact, the only browsers that give acceptable performance for redrawing the bitmap are Chrome and Chromium. So for the moment, Domkol should be considered to be primarily a Chrome/Chromium application.
• Touch screens: The handles and slider do not (yet) work on a touch screen. I tried Touch Punch, which worked for the slider, but not very well for the draggable handles.

TL;DR: Domkol works best with Chrome or Chromium on a desktop with a mouse.

## GitHub Repository

The source code for Domkol is available for forking at https://github.com/pdorrell/domkol.

## Video

You can watch a screencast of me using Domkol at https://vimeo.com/75552934.

## Project Write-up

For a more detailed notes on Domkol, how it's structured, and how I wrote it, see Notes On Programming Complex Function Visualization in HTML5 (Javascript, Canvas and SVG).

Last updated: 21 May 2013