Getting Started

A Basic Example

If you’ve used libraries like Processing and Open Frameworks before, sketch.js will be especially quick to get going with. You can simply hook onto methods like setup, draw and mousemove to start playing:

var ctx = Sketch.create();

ctx.draw = function() {
	ctx.beginPath();
	ctx.arc( random( ctx.width ), random( ctx.height ), 10, 0, TWO_PI );
	ctx.fill();
}

Or if you prefer the syntax, you can also pass all the methods you want to use directly to the create method:

Sketch.create({

	draw: function() {
		this.beginPath();
		this.arc( random( this.width ), random( this.height ), 10, 0, TWO_PI );
		this.fill();
	}

});

Events

Mouse, touch and keyboard events are augmented for convenience and certain properties are also stored in the sketch for when you need them outside event handlers.

The x and y properties represent the mouse or touch coordinates, relative to the window (clientX / clientY).

ctx.mousemove = function( e ) {
	ctx.lineTo( e.x, e.y );
}

If you're supporting touches, just handle them - on the desktop, the 0th element will be the mouse so your code will work the same accross devices and platforms.

ctx.mousemove = function( e ) {
	for ( var i = 0, n = e.touches.length; i < n; i++ ) {
		ctx.arc( e.touches[i].x, e.touches[i].y, 10, 0, TWO_PI );
	}
}

Touches and mouse position are also stored in the sketch for access outside event handlers.

ctx.draw = function() {
	for ( var i = 0, n = ctx.touches.length; i < n; i++ ) {
		ctx.arc( ctx.touches[i].x, ctx.touches[i].y, 10, 0, TWO_PI );
	}
}

Previous x and y values (ox and oy) and the deltas (dx and dy) are also sent in events and stored in the sketch

ctx.mousemove = function( e ) {
	ctx.moveTo( e.ox, e.oy ); // or ctx.mouse.ox, ctx.mouse.oy
	ctx.lineTo( e.x, e.y ); // or ctx.mouse.x, ctx.mouse.y
}

All keys are enumerated and common function keys are mapped to constants.

ctx.keydown = function() {
	if ( ctx.keys.SPACE ) ctx.reset();
	if ( ctx.keys.C ) ctx.clear();
}

Build

If you modify the source and want to produce your own build, just run npm build (after npm install if you hadn't already done that.)