brushes.js

This is a simple Brush object framework that I wrote after seeing Mr. Doob's Harmony project.

Requirements

The only requirement for using ./src/brushes.js is to have a browser which supports HTML5 canvas 2d context.

To run the tests, you will need node.js and nodeunit installed.

Installing node.js

Instructions taken from Mastering Node. Be sure to check it out!

To build and install node from source, we first need to obtain the code. The first method of doing so is via git, if you have git installed you can execute:

$ git clone http://github.com/joyent/node.git && cd node
$ git checkout v0.4.0

For those without git, or who prefer not to use it, we can also download the source via curl, wget, or similar:

$ curl -# http://nodejs.org/dist/node-v0.4.0.tar.gz > node.tar.gz
$ tar -zxf node.tar.gz

Now that we have the source on our machine, we can run ./configure which discovers which libraries are available for node to utilize such as OpenSSL for transport security support, C and C++ compilers, etc. make which builds node, and finally make install which will install node.

$ ./configure && make && sudo make install

Getting nodeunit

Note: This has changed a bit. require.paths is removed in later versions of node. You'll have to either install modules locally or globally. You can now install using:

npm install -d

This installs all of the dependencies specified in package.json into the node_modules directory. When you run node, it traverses up the directory tree looking at all node_modules directories for the dependency.

Testing

After installing the dependencies, you can easily start the tests by running

$ make test

If you hate make, you can also run the test runner directly

$ node test/run.js

Minify

You can minify the script by running

$ make clean minify

This will output to src/brushes.min.js

brushes.js Usage

This is a snippet from examples/points/points.html:

	var points = [
		[50, 150],
		[150, 150],
		[150, 50],
		[50, 50],
		[50, 150]
	];

	var examples = ['blood', 'boxes', 'charcoal', 'hearts', 'marker', 'pen', 'pencil', 'stars'];

	for(var i = 0;i < points.length;i++){ 
		pointsDiv.html(pointsDiv.html() + "[" + points[i][0] + "," + points[i][1] + "]</br>");
	}

	for(var example = 0;example<examples.length; example++){
		var canvas = $('#canvas-' + examples[example]).get(0),
			ctx = canvas.getContext("2d"),
			brush = new Brushes[examples[example]]({
				context: ctx,
				size: 1,
				color: [244,14,68],
				randomize: true, /* color has to be set to randomize it */
				pressure: 2
			}),
			lastX = points[0][0],
			lastY = points[0][1],
			canvasPos = findPos(canvas, null);

		for (var i = 0; i < points.length; i++) {
			var x = points[i][0],
				y = points[i][1];
			brush.strokeStart(lastX, lastY);
			brush.stroke(x, y);
			lastX = x; 
			lastY = y;
		}
		brush.strokeEnd();
	}