CompGeoJS Demo: Interactive Number Line
I’m pleased to announce that the first CompGeoJS demo is now line. One possible use of the CompGeoJS library is for educational applications in mathematics that may involve anything from number lines to graph axes. The CompGeoJS Axis class provides a convenient means to manage the computations and number formatting involved with creating and managing axis-like constructs.
The number line demo illustrates a simple, interactive number line that can be zoomed or panned. Since CompGeoJS is a pure computational library, rendering in the demo is completely separated from library operations. I chose the popular EaselJS library to render the number line into an HTML 5 Canvas. Since this is a CompGeoJS demo and not an EaselJS or even an HTML 5 demo, it strictly adheres to the KISS principle. No psycho animation or unnecessary visual FX. The JS code is written for easy readability and directly linked so that you can quickly see how the CompGeoJS library integrates with an HTML5-based rendering environment.
All the computations are handled internally by the Axis class, even the formatting of tic labels (using the CompGeoJS NumberFormatter class). The programmer need not be concerned with anything other than managing the inputs into the Axis class. In fact, the only actual computations that are performed in the demo code are for centering the tic labels (the coordinates of the major and minor tics are computed by the Axis class). I am, btw, using the term ‘class’ loosely since CompGeoJS is written in Haxe and exported to JS.
The demo should work in any Canvas-enabled browser, i.e. IE 9+ and late-model Firefox/Chome/Safari. There is no browser sniffer in the demo page as most readers of this blog should be more than capable of knowing what runs on their browsers.
Please feel free to expand on the demo yourself and make it into something more impressive. Please contact me at theAlgorithmist [at] gmail [dot] com if you do so.