CNum example

CNum.js is a javascript class to display a complex number in a Gaussian plane (sometimes called the z-plane or Argand diagram). The diagram is drawn on a html5 canvas element and can then be read as a base64-encoded image. Simple mathematics (a sum and a product of complex numbers) are supported - this is meant as an easy way to plot the results.

Want to use the force? You can do so by entering a complex number into the text field (maybe you would like to try some fancy stuff like 12*exp(2*i)+2i ):

complex number:

This is the default appearance: CNum will draw the complex number as an arrow in the z-plane, showing real and imaginary part in grey. By default, the radius of the pointer will be shown as a circle. 

  var cnv = document.getElementById('id_of_canvas');
  var str = document.getElementById('id_of_input').value;
  z = new CNum( str );
  z.setCanvas( cnv );
  z.displayGauss();

Usage

A CNum is an object containing a complex number created by a mathematical expression (well, not too surprising...) passed to its constructor. The expression will be parsed by mathjs to set the number's value. This implies that many functions like exp(), sqrt() or trigonometric functions will work, but one should keep in mind that CNum.js does not do any plausibility or nonsense checking.

CNum.js offers methods to create a text representation of its value in cartesian, trigonometric and polar representation (with a tiny bit of html formatting) - the spans in the second column of this table are updated dynamically by the given functions:

cartesian:
complex conjugate:
absolute value:
trigonometric:
polar:

Options

If you think your Gaussian plot looks a bit boring, you can use colors for arrows, angles or text in a plot.

Several CNums (resp. the complex values they carry) can be plotted on the same canvas by constructing a CNum, displaying its value on an existing canvas (this will create the cartesian axes automatically) and adding more CNums to the same canvas.

Have a look at this example to get an idea what the class is able to do:


        var o1 = { clear: true, coords: true, circle: false, color: "#F00", showDegree: true };
        z1 = new CNum( "2+3i" );
	var cnv2 = document.getElementById('id_of_canvas_2');
        z1.setCanvas( cnv2 );
        z1.displayGauss(o1);       
        
        // construct another one (z2) - when adding to an existing plot, options
        // clear, coords and circle are silently ignored.
        var o2 = { clear: false, coords: false, circle: false, color: '#0F0'};
        z2 = new CNum( "-2+2i" );
        z1.addToPlot( z2, o2 );
        
        // add a third number z3 to the plot and set the color to blue
        z3 = new CNum( "-1-3i" );
        z1.addToPlot( z3, { color: "#0000F3" });

Basic operations

Say, for example, that you want to show addition or multiplication of two complex numbers. The first step will probably be constructing the numbers themselves (read: the CNum objects) and defining some options used to plot them (just to satisfy the gods of aesthetics). 


        z5 = new CNum( "3+3i" );
        z6 = new CNum( "-2+i" );
        var Options = {
                ReIm: false, Ctext: false, arc: false
        };
Plot the numbers z5 and z6 onto a canvas with id "canvasVectors" as 

        var cnv3 = document.getElementById('id_of_canvas_3');
        z5.setCanvas( cnv3 );
        z5.displayGauss(Options );
        z5.addToPlot(z6, Options );
The result is a plot of vectors in a z-plane without any decoration.
Let's do some maths and have a look at a sum and a product of the numbers defined above. After declaring some more options used to plot the results 

        var OptionsResult = {
                ReIm: false, Ctext: true, 
                colarrow: true, color: '#A00',
                arc: true
        };
adding or multiplying the numbers and drawing the results is as simple as 

        var cnv4 = document.getElementById('id_of_canvas_4');
        z5.setCanvas( cnv4 );
        z5.addCNum(z6, Options , OptionsResult);
        
	var cnv5 = document.getElementById('id_of_canvas_5');
        z5.setCanvas( cnv5 );
        z5.multiplyCNum(z6, Options , OptionsResult);
The sum of two complex numbers z5 + z6.
The product of two complex numbers z5 · z6.