https://sandpitjs.com

Announcing ⛱ Sandpit

A playground for creative coding using JavaScript and the canvas element.

I’ve long been fascinated with blurring the line between art and technology, and there are few places where exploring it is more easily achievable, or enjoyable, than the web. Browsers have come a long way since the heady days of IE6, and building complex visualisations and / or GPU-powered looping cat gifs is just a few tutorials away.

My experiments, over time, have relied more and more on the <canvas> tag. The wealth of incredible tools and resources available to manipulate this seemingly innocuous DOM element seem limitless, and I built Sandpit as a love letter to them.

🤓 So, what is it?

At its heart, Sandpit is a library that helps simplify creative coding. It does what it can to help, and gets out of the way when it can’t. Because you always have access to the <canvas> object, and to its context, you only have to use Sandpit when it benefits you. It looks like this:

const sandpit = new Sandpit('body', Sandpit.CANVAS)

The key features of Sandpit:

• Custom settings are easy to automagically configure, and then manipulate, with dat.GUI. For example, the following will give you a colour picker with red as a default:

sandpit.settings = {strokeColor: {value: 'red', color: true}}
console.log(sandpit.settings.strokeColor) // 'red'

• The current state is stored in the query string, making it simple to copy and paste your exact configuration to anyone who’s got the same settings as you—like in a staging environment, or locally. Tweak it, then paste it in Slack (👍, says your friend / client / co-worker).
• The animation loop is ready to go via sandpit.loop(), without needing you to write a single requestAnimationFrame.
• Inputs are normalised, from mouse to touch to gyroscope data, and there are event hooks, like sandpit.move(), to access them.
• Support for 2D or 3D canvases — it plays nice with libraries like Three.js, too, in case you just want simple access to touch inputs or the animation loop.
• Canvas resizing is automatically handled, with a preference towards setting and respecting the size in CSS (and a hook to override that).
• A bunch of related tools and libraries that are simple to access, including maths helpers, Color, and Victor.
• A growing suite of demos and documentation, and support for ES6, ES5, and the <script> tag.

An example from https://sandpitjs.com

👏 Why use it?

Good question. There are a number of tools that exist already that you should absolutely check out, but Sandpit offers a bunch of unique features, easy to use demos, examples and documentation at https://sandpitjs.com. That said, I’ve made a list of tools worth considering, because due diligence is a Very Good Thing.

I’d love you to try Sandpit (you can start playing with the demos here), suggest features by opening an issue, and generally let me know what you think. And if you wanna skip the setup and get straight to building stuff, fork this Codepen and check out the documentation.

Oh, and 100% comment with your experiments so I can tell you how great they are, you superhero. ✨

sandpit.start()

⛱ Sandpit: https://sandpitjs.com
⚡ Github: https://github.com/sandpit/sandpit
😍 Examples: https://github.com/sandpit/sandpit-site