sketch-js

sketch.js

A tiny (~2kb gzipped) platform for JavaScript creative coding.

A few examples from the showcase

$3

sketch.js lets you get straight to the fun parts of creative coding, without ever having to worry about shims or boilerplate code.

It gives you a graphics context, an animation loop, normalised input events and a host of useful callbacks to hook into.

Here's an example:
```javascript
Sketch.create({
setup: function() {
this.r = this.g = this.b = random( 100, 200 );
},
mousemove: function() {
this.r = 255 * ( this.mouse.x / this.width );
this.g = 255 * ( this.mouse.y / this.height );
this.b = 255 abs( cos( PI this.mouse.y / this.width ) );
},
draw: function() {
this.fillStyle = 'rgb(' + ~~this.r + ',' + ~~this.g + ',' + ~~this.b + ')';
this.fillRect( 0, 0, this.width, this.height );
}
});
``

See it in action

$3

* A sketch is an augmented drawing context (CanvasRenderingContext2D, WebGLRenderingContext or HTMLElement) so it has all the expected drawing methods built in.
* The mouse property is also the first element of the touches array and vice versa, so you can code to one standard and get touch and multi-touch support for free.
* The update and draw loops run on the browser animation frame and can stop and start whenever you like.
* You get fast access to Math functions and constants, plus extras like range and array enabled random, map and lerp.
* Simple and configurable. You can even bring your own context`, so it works well with libraries like THREE.

$3

For more information, check out the getting started guide, the API, the many examples in the showcase and the full source.