https://soulwire.github.io/sketch.js/
Cross-Platform JavaScript Creative Coding Framework
https://soulwire.github.io/sketch.js/
Last synced: 13 days ago
JSON representation
Cross-Platform JavaScript Creative Coding Framework
- Host: GitHub
- URL: https://soulwire.github.io/sketch.js/
- Owner: soulwire
- License: mit
- Created: 2012-07-10T01:55:55.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2023-09-16T03:41:59.000Z (over 1 year ago)
- Last Synced: 2025-04-10T20:55:34.124Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 560 KB
- Stars: 4,115
- Watchers: 144
- Forks: 434
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- creative-coding-resources - Sketch.js - Minimal JavaScript creative coding framework. (Libraries)
- trackawesomelist - Sketch.js - Minimal JavaScript creative coding framework. (Recently Updated / [May 09, 2025](/content/2025/05/09/README.md))
README
## sketch.js
A tiny (~2kb gzipped) platform for JavaScript creative coding.
A few examples from the [showcase](http://soulwire.github.com/sketch.js/)
### 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:
````js
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)
}
})
````
[See it in action](http://jsfiddle.net/soulwire/7wtbm/)
### The Highlights
* 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](http://threejs.org/).
### The Rest
For more information, check out the [getting started guide](https://github.com/soulwire/sketch.js/wiki/Getting-Started), the [API](https://github.com/soulwire/sketch.js/wiki/API), the many examples in the [showcase](http://soulwire.github.com/sketch.js/) and the full [source](https://github.com/soulwire/sketch.js/blob/master/js/sketch.js).