New JavaScript library invites coders to play with Canvas

The Sandpit library uses the canvas 2D element for creative coding

New JavaScript library invites coders to play with Canvas
Amanda B (CC BY 2.0)

Looking to blur the line between technology and art, the Sandpit library for creative coding uses JavaScript and the canvas 2D element.

Accessible on GitHub or via NPM, and built in ECMAScript 6, Sandpit is still in development with an API likely to change before the 1.0 release. "The goal of Sandpit is to normalize and simplify the process of creating coding -- using code to make pretty things," the documentation states. "This usually takes the form of drawing onto the Canvas element, in either a 2D or 3D context." Sandpit uses the dat.GUI, a lightweight GUI for changing variables in JavaScript, to manage settings.

To get started quickly with Sandpit in an ES6 environment, builders Charlie Gleason and Glen Maddern recommend using create-react-app, a Facebook incubator project for creating React JavaScript apps with no build configuration; a demo of Sandpit uses create-react-app. Sandpit manages inputs like touches, taps, and clicks, and it handles touch event-handling for multitouch on mobile devices. Other capabilities include making it easy to drop in settings with an API for specifying ranges, types, and defaults, and helpers that cover math, color, and vector manipulation. Settings are stored in the query string, enabling copying and pasting without touching any code, and developers can import their own work in canvas.

Sandpit supports modern browsers, including Microsoft's Internet Explorer 11 and Edge. The babel-polyfill is used when compiling for ECMAScript 5. The developers of Sandpit are encouraging community contributions and have provided usage examples.

Copyright © 2017 IDG Communications, Inc.