# canvas-sketch-util

> Utilities for sketching in Canvas, WebGL and generative art

Latest version **1.10.0** (published 2019-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvas-sketch-util
pnpm add canvas-sketch-util
yarn add canvas-sketch-util
bun add canvas-sketch-util
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.10.0 |
| Published | 2019-10-03 |
| First published | 2018-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 99 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 750 |
| Author | Matt DesLauriers |
| Maintainers | mattdesl |
| Keywords | genart, generative, art, canvas, sketch, code, canvas-sketch, geom, geometry, random |

## Links

- npm: https://www.npmjs.com/package/canvas-sketch-util
- Repository: https://github.com/mattdesl/canvas-sketch-util
- Issues: https://github.com/mattdesl/canvas-sketch-util/issues
- npm.io page: https://npm.io/package/canvas-sketch-util

## Dependencies (19)

- [regl](https://npm.io/package/regl.md) ^1.3.7
- [clone](https://npm.io/package/clone.md) ^2.1.2
- [d3-path](https://npm.io/package/d3-path.md) ^1.0.8
- [defined](https://npm.io/package/defined.md) ^1.0.0
- [lineclip](https://npm.io/package/lineclip.md) ^1.1.5
- [parse-color](https://npm.io/package/parse-color.md) ^1.0.0
- [seed-random](https://npm.io/package/seed-random.md) ^2.2.0
- [abs-svg-path](https://npm.io/package/abs-svg-path.md) ^0.1.1
- [almost-equal](https://npm.io/package/almost-equal.md) ^1.1.0
- [float-hsl2rgb](https://npm.io/package/float-hsl2rgb.md) ^1.0.2
- [float-rgb2hsl](https://npm.io/package/float-rgb2hsl.md) ^1.0.1
- [simplex-noise](https://npm.io/package/simplex-noise.md) ^2.4.0
- [convert-length](https://npm.io/package/convert-length.md) ^1.0.1
- [parse-svg-path](https://npm.io/package/parse-svg-path.md) ^0.1.2
- [primitive-quad](https://npm.io/package/primitive-quad.md) ^2.0.0
- [color-luminance](https://npm.io/package/color-luminance.md) ^2.1.0
- [svg-path-contours](https://npm.io/package/svg-path-contours.md) ^2.0.0
- [array-almost-equal](https://npm.io/package/array-almost-equal.md) ^1.0.0
- [normalize-svg-path](https://npm.io/package/normalize-svg-path.md) ^1.0.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.10.0 (latest) — 2019-10-03
- 1.9.0 — 2019-10-02
- 1.8.0 — 2019-04-20
- 1.7.0 — 2019-04-20
- 1.6.2 — 2019-02-26
- 1.6.0 — 2018-12-10
- 1.5.0 — 2018-11-02
- 1.4.2 — 2018-10-25
- 1.4.1 — 2018-10-22
- 1.4.0 — 2018-10-19
- 1.3.0 — 2018-10-10
- 1.2.0 — 2018-10-09
- 1.1.1 — 2018-10-09
- 1.1.0 — 2018-10-05
- 1.0.2 — 2018-08-16
- … 2 more at https://npm.io/package/canvas-sketch-util/versions

## README

# canvas-sketch-util

Utilities for generative art in Canvas, WebGL and JavaScript.

This is designed to be used alongside the [canvas-sketch](https://github.com/mattdesl/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:

```js
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:

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

```js
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`](./docs/math.md) - Math & interpolation utilities
- [`random`](./docs/random.md) - A random number generator
- [`color`](./docs/color.md) - RGB and HSL color utilities
- [`geometry`](./docs/geometry.md) - Utilities for geometry & shapes
- [`penplot`](./docs/penplot.md) - Utilities for working with pen plotters (e.g. AxiDraw)
- [`shader`](./docs/shader.md) - 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](https://npmjs.com/) to install.

```sh
npm install canvas-sketch-util --save
```

## Docs

For full API documentation, see [Documentation](./docs/README.md).

You can also see a few examples in [./test/examples.js](./test/examples.js).

## License

MIT, see [LICENSE.md](http://github.com/mattdesl/canvas-sketch-util/blob/master/LICENSE.md) for details.

---
_Source: https://npm.io/package/canvas-sketch-util · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._