sketch.js
A tiny (~2kb gzipped) platform for JavaScript creative coding.
A few examples from the showcase
Start Coding Faster
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:
Sketch.create({
setup() {
this.r = this.g = this.b = random(100, 200)
},
mousemove() {
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() {
this.fillStyle = `rgb(${~~this.r},${~~this.g},${~~this.b})`
this.fillRect(0, 0, this.width, this.height)
}
})
The Highlights
- A sketch is an augmented drawing context (
CanvasRenderingContext2D,WebGLRenderingContextorHTMLElement) so it has all the expected drawing methods built in. - The
mouseproperty is also the first element of thetouchesarray and vice versa, so you can code to one standard and get touch and multi-touch support for free. - The
updateanddrawloops run on the browser animation frame and canstopandstartwhenever you like. - You get fast access to
Mathfunctions and constants, plus extras like range and array enabledrandom,mapandlerp. - Simple and configurable. You can even bring your own
context, so it works well with libraries like THREE.
The Rest
For more information, check out the getting started guide, the API, the many examples in the showcase and the full source.