ComplexFunctions

The other day in my Complex Analysis class someone asked: “what is the
graphical meaning of a residue?” Then the lecturer went on about how complex
functions of a complex variable are hard to interpret graphically, since they
are mappings from a 2-dimensional space to another. That is how this repo was
born.

I immediately started thinking about how to build an interactive graphing tool
that would help give an intuitive meaning to functions from one complex
variable to another. Then one could differentiate them, and then integrate
them, and then… who knows, maybe even visualise the residue of a function at
a singularity.

The code in this repo is under development. There is a high
chance that it will substantially change in the near future!

The framework

The code in this repo basically consists of two types of JavaScript objects:
variables and graphics. Variables have values that can be read by
other variables and graphics. These values are usually a function of other
variables’, but they can also be derived from the mouse position or be set
manually. Variables also have names, which allow you to use them in equations.
Classes that fall under the variable category are:

• Variable - No surprises here. These are the
  bread and butter of this framework: they can be used for mouse input, as
  functions of other variables or they can be managed by other wrappers (which
  we’ll meet very soon). They can be drawn on Plot objects as position vectors.
• Interval - This is a rather special type of variable. It represents an
  interval in the real line, with a beginning and an end. It is mostly used for
  animations, since you can make variables take it as a parameter to their
  function. It can optionally manage a midpoint Variable, which can be very
  useful for estimating integrals using the
  midpoint rule.
• DeltaVar - This is used to represent the difference between consecutive
  values of another variable. I am sure you can already imagine what the
  purpose of this one is.
• CumVar - This variable is used to represent the sum of the different values
  of another variable. It acts as an accumulator, whence the name. Again, if
  you have ever estimated an integral numerically, you know what this is used
  for.
• Contour - This one is very similar to Variable in functionality. The
  difference is that is can only depend on one parameter which must be of type
  Interval. It is also plotted differently: instead of a position vector it
  draws the path its value follows as its paramater spans its domain.

Enough about variables. Let’s talk about graphics! They are used to
interact with the DOM in order to show the user the state of its dear
variables. Currently, there are two types of graphics:

• Plot - Give it a <canvas> element and it will do wonders with it! It
  draws a grid representing the complex plane and, on top of it, it will draw
  any variables that you give to it, that includes objects of types Variable,
  DeltaVar, CumVar and Contour mentioned above. Plot objects are
  interactive: you can zoom in and out and pan them around using the wheel and
  the middle button (alternatively you can use the left button while pressing
  SHIFT for panning) or using two fingers on your touchscreen (!). Each Plot
  can be given a Variable for it to pass it the position of the mouse when the
  user presses the left mouse button over the plot. [This in turn allows for
  the estimation of integrals along arbitrary hand drawn contours. Now, if that’s
  not the epitome of interactivity I don’t know what is.]
• Display - This simple class can be given a DOM element (such as a <span>)
  and the numerical value of a variable of your choice will be printed to it
  each time the variable is updated.

Apart from this, the framework also provides the class FreehandContour which
could be regarded as a radioactive hybrid between Interval and Contour (and
most probably a poor design choice). You can pass it a Variable which is
linked to the mouse position of some Plot and it will draw (and store) the
contour described by the mouse as it moves. This class doesn’t have a value per
se; instead, it manages a Variable and a DeltaVar (suspiciously named z
and dz) which can be accessed for further mischief.

Each of these objects updates and is updated by others using the observer
pattern. Every object has a
list of listeners, to which it notifies when its own value is updated.
Essentially, the variables and graphics used will form a dependency graph,
which should be a directed acyclic
graph (or else you will
have variables updating each other in a cycle ad stack-overflow-um). This
creates some synchronisation challenges, since there might be more than one
path to a descendant variable, causing it to update twice for each signal of
the original variable (and this could cause or integral estimation to
manifold). This is handled in two ways:

• During animations, all objects involved keep track of the current tick. An
  object will only update its state with respect to their parameters once all
  of them have reached the same tick.
• Variable objects (which, conveniently, are the only ones that can depend on
  two or more other variables) have an optional field wait. If it is set to
  true, the variable will only update its state once it has received
  notifications from all its parameters.

The article

I hope that someday Soon I will write a not-so-short
article about complex functions and how to visualise them which demonstrates
the potential and usage of this framework. Until that day comes, you can get a
sneak peak of what it can do by visiting this
page.

Dependencies

Currently, the only dependency of this project is the
Math.js library.