/ Chart

Cross-Platform JavaScript Creative Coding Framework

Cross-Platform JavaScript Creative Coding Framework

sketch.js

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

687474703a2f2f736f756c776972652e6769746875622e696f2f736b657463682e6a732f6578616d706c65732f696d672f64726177696e672e6a7067

687474703a2f2f736f756c776972652e6769746875622e696f2f736b657463682e6a732f6578616d706c65732f696d672f7061727469636c65732e6a7067

687474703a2f2f736f756c776972652e6769746875622e696f2f736b657463682e6a732f6578616d706c65732f696d672f706c61736d612e6a7067

687474703a2f2f736f756c776972652e6769746875622e696f2f736b657463682e6a732f6578616d706c65732f696d672f74656e7461636c65732e6a7067

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)
  }
})

See it in action

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.

The Rest

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

GitHub

CodeTea

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More