Announcing ⛱ Sandpit

Charlie Gleason
Feb 21, 2017 · 3 min read

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:

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:
  • 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. ✨

superhighfives

Tutorials and thoughts on front end development

Charlie Gleason

Written by

A thirty-something with feelings, interested in outer space and the acquisition and distribution of high fives.

superhighfives

Tutorials and thoughts on front end development

Charlie Gleason

Written by

A thirty-something with feelings, interested in outer space and the acquisition and distribution of high fives.

superhighfives

Tutorials and thoughts on front end development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store