LNum.js example

LNum.js is a simple javascript class to display numbers on a number line. The line will be drawn on a html5 canvas element and can be read as a string containing a base64-encoded image URL.

I created the class because I needed a simple and fast way to create dynamic representation of integers for a basic maths lecture.

Drawing numbers

By Default, LNum.js will plot a number line representing an interval [a, b] in gray. Tick marks on the line are automatically spaced in a more or less reasonable way.

Whole or decimal numbers in [a,b] can easily be drawn on the line using the method drawN( n, [ options]).

If you want to draw a rational number q = z/n use the method drawQ( z, n, [options]) where z is the dividend and n the divisor of of the quotient. 

var c = document.getElementById('canvas');
line = new LNum( -10, 10, c );
line.display();
line.drawN( 5 );
line.drawN( -5.5 );
line.drawQ( 6, 5 );

Options

The appearance of the line can be controlled using javascript options: here's a more complex example showing an interval of [-30,50] in black using a serif font with tick spacing set to 15. Some negative numbers starting from -29 to -2 are plotted in red, some natural numbers in green and a very special value is shown large in blue (yes, that's ugly).


Below is a copy of the canvas in an IMG-tag
(a base-64 encoded PNG image) - this one can easily
be copied or saved.
var c2 = document.getElementById('canvas2');
line2 = new LNum( -30, 50, c2 );
line2.display({ 
        color:"#000", 
        fontFamily: "serif", 
        tickSpacing:15 
});
for (n=-29; n<49; n+=3) {
        n<0?mycol="#F00":mycol="#0B0";        
        line2.drawN( n , {
                fontSize:10,
                color:mycol 
        });
}
line2.drawN(0 , {
        fontSize:24,
        color:"#00F",
        ticklen:25
});

Drawing sums

A simple addition of the form n + step can be shown using the method drawSum( n, step, [options]) where n is the number to start with, step the summand. The addition will be visualized as an arrow representing a step on the number line and the resulting number will be drawn automagically.

As an example, here is the visual representation of the expression 1 + 3·(-2) = -5 (guess you knew that already...)


	var c3 = document.getElementById('canvas3');
        line3 = new LNum( -8, 1, c3 );
        line3.display();
        line3.drawN( -5 );
        line3.drawSum(1,-2);
        line3.drawSum(-1,-2);
        line3.drawSum(-3,-2);