JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 322
  • Score
    100M100P100Q93262F
  • License MIT

Utilities for sketching in Canvas, WebGL and generative art

Package Exports

  • canvas-sketch-util
  • canvas-sketch-util/color
  • canvas-sketch-util/geometry
  • canvas-sketch-util/math
  • canvas-sketch-util/penplot
  • canvas-sketch-util/random

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-sketch-util) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

canvas-sketch-util

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.

Example

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');

console.log(fract(51.23));
// 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');

console.log(random.value());
// 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

Features

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...

Install

Use npm to install.

npm install canvas-sketch-util --save

Docs

For full API documentation, see Documentation.

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

License

MIT, see LICENSE.md for details.