A tiny (~2kb gzipped) platform for JavaScript creative coding.
A few examples from the showcase
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)
}
})
CanvasRenderingContext2D
, WebGLRenderingContext
or HTMLElement
) so it has all the expected drawing methods built in.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.update
and draw
loops run on the browser animation frame and can stop
and start
whenever you like.Math
functions and constants, plus extras like range and array enabled random
, map
and lerp
.context
, so it works well with libraries like THREE.For more information, check out the getting started guide, the API, the many examples in the showcase and the full source.