Clumsy
Clumsy.js is a library for creating math figures on HTMLCanvas in XKCD style.
This library can be used with Node.js libraries canvas
and gifencoder
:
$ npm install canvas gifencoder
Contents
-
- new Clumsy(canvas)
- methods:
- axis
- background
- clean
- draw
- fillTextAtCenter
- overdraw
- padding
- seed
- range
- tabulate
- properties:
- background
- color
- defaultBoxAscent
- lineWidth
- radius
- step
It needs to create Canvas before drawing and pass this canvas to constructor of object Clumsy. By default clumsy object have padding in 100px and ranges [-1, 1] in both directions. This can be changed by special methods:
// Adds canvas module from npm repository for examplevar Canvas = ; // Adds this modulevar clumsy = ; // And some helpers for interaction with canvas and gifencoder modulesvar helpers = ; // Inits objectsvar canvas = 800 600var clumsy = canvas; // Sets padding and ranges before drawingclumsy;clumsy;
Pass arrays with points to method draw. Each point must consider x and y field, e.g. {x: 0, y: 0} - begin coordinate system.
var Canvas = ;var clumsy = ;var helpers = ; var canvas = 800 600var clumsy = canvas; clumsy;clumsy;clumsycolor'red';clumsy; var sine = clumsy;clumsy; helpers; // save as png of same name
The result:
## Drawing a figure with scaled axis and titlevar Canvas = ;var Clumsy = ;var helpers = ; var canvas = 800 600var clumsy = canvas; clumsy;clumsy;clumsy;clumsy; clumsyaxis'x' 0 7 05;clumsyaxis'y' -2 2 05; clumsycolor'red';var sine = clumsy;clumsy; clumsy; helpers;
The result:
## AnimationThis module also can be used for animation of figure. The best way is prepare a separate script with drawing function. The function must receive two arguments: a clumsy object and an animation param. So without any other dependencies this script can be used for rendering by both ways in a browser or node.js
Drawing script spiral.js:
{ clumsy; clumsy; clumsy; clumsy; clumsy; clumsy; clumsycolor'black'; clumsyaxis'x' -2 2 05; clumsyaxis'y' -2 2 05; var spiral = clumsy clumsycolor'red'; clumsy; clumsy;} iftypeof module != 'undefined' && moduleexports moduleexports = Spiral;
Preview script for browser:
spiral
Building script for node.js:
var Canvas = ;var GIFEncoder = ;var path = ;var fs = ; var Clumsy = ;var helpers = ; var Spiral = ; var canvas = 600 600;var clumsy = canvas;clumsy; var encoder = helpers;var phase = 0;var n = 10; encoderstart;forvar i = 0; i < n; i++ clumsy; clumsyclear'white'; ; phase += 2 * MathPI / n; encoder;; encoder;
The result:
API ### new Clumsy(canvas)
Creates new clumsy object.
canvas
- an instance of HTMLCanvas
var clumsy = canvas;
axis
may be 'x', 'y', {x: 1, y: 1}start
,end
- range of axisstep
- step of scaleoptions
- sets of options allowed by method:zero
- coordinates of zero point of the axisstep
- a step of the scalelimits
- limits of scale, [start + step, end - step] by defaulthide_zero
- hides zero if truetick_size
- size of scale ticks in px, default is 5pxmark
- a function that generate label for ticks
// Draws axis from -1 to 1 without a scaleclumsyaxis'x' -1 1;// Draws axis from -1 to 1 with a scale and step 0.2clumsyaxis'x' -1 1 02;// Draws axis with custom options:clumsyaxis'x' -1 1 zero: x: 0 y: 0 // default step: 01 limits: start + step end - step hide_zero: true // hide zero mark tick_size: 5 // in px { // default return + '.' + };
color
- new background color.
clumsy;
Draws a curve by array of point in {x: x, y: y}
format.
curve
is [{x: x0, y: y0}, ... {x: xn-1, yn-1}]
// Draws line from (0,0) to (1,1).clumsy;
Draws text at center (x, y).
- x, y - coordinates of text center
- text - a text for drawing
clumsy;
Draws a curve with clearing canvas under the curve by background color.
curve
is [{x: x0, y: y0}, ... {x: xn-1, yn-1}]
// Draws line from (0,0) to (1,1)clumsy;// Overdraws line from (0,1) to (0,1)clumsy;
Sets paddings from the edges of the canvas.
size
- size of all paddingsveritcal
,horizontal
- vertical and horizontal paddingsleft
,right
,bottom
,top
- vertical and horizontal paddings
// Sets all padding in 100pxclumsy;// Sets vertical paddings are 100px and horizontal are 200pxclumsy;// Sets left, right, bottom and top paddingsclumsy;
Sets ranges of the coordinate system.
// Sets same range for horizontal and vertical scalesclumsy;// Sets horizontal [-10,10] and vertical [-20,20] rangesclumsy;
// Sets the seedclumsy;// Gets current seedvar seed = clumsy;
properties
Properties with setters/getters:
// In pixelsclumsy;clumsy;clumsy;clumsy; // CSS colorclumsybackground'white';clumsycolor'black'; // CSS fontclumsy; // Seed number for the built-in pseudo random generatorclumsy;