Skip to content
Utilities for sketching in Canvas, WebGL and generative art
Branch: master
Clone or download
Latest commit 852fee9 Oct 3, 2019


Utilities for generative art in Canvas, WebGL and JavaScript.

This is designed to be used alongside the canvas-sketch toolset, but it is generic enough to work for various Node.js/Browser use cases.


You can require each module individually, and grab only the necessary functions.

Some examples:

const math = require('canvas-sketch-util/math');

console.log(math.clamp(1.25, 0, 1));
// 1

Or by using destructuring to grab only a select few functions:

const { fract, lerp } = require('canvas-sketch-util/math');

// 0.23

console.log(lerp(0, 50, 0.5));
// 25

The random utility has been inspired by Unity3D, as well as other engines.

const random = require('canvas-sketch-util/random');

// some random number between 0 (inclusive) and 1 (exclusive)

// Create a seeded random generator
const seeded = random.createRandom(25);

console.log(seeded.range(25, 50));
// some deterministic random number

console.log(seeded.shuffle([ 'a', 'b', 'c' ]));
// deterministically shuffles a copy of the array


The following modules have been implemented:

  • math - Math & interpolation utilities
  • random - A random number generator
  • color - RGB and HSL color utilities
  • geometry - Utilities for geometry & shapes
  • penplot - Utilities for working with pen plotters (e.g. AxiDraw)
  • shader - A full-screen GLSL shader utility

The following are planned but not yet implemented:

  • tween - Tweening, easing & animation utilities

And more to come...


Use npm to install.

npm install canvas-sketch-util --save


For full API documentation, see Documentation.

You can also see a few examples in ./test/examples.js.


MIT, see for details.

You can’t perform that action at this time.