P5-for-5

On this day in 2010, Studio Sketchpad debuted with a tweet. Today, five years and more than 200,000 sketches later, the studio is still open!

While I haven’t put much time into hacking on Sketchpad recently, I decided to find time to add something new, in honor of the website’s big birthday. When I started thinking about what a fitting addition might be, the clear winner was the idea of adding support to Sketchpad to allow people to write and collaborate on sketches created using the up-and-coming P5.js library. I’m happy to announce that this is now possible. Sketchpad features a new public studio that has been custom-built for P5.js, open to anyone at p5js.sketchpad.cc

This new studio differs from the others on Sketchpad in order to support the use of p5.js instead of Processing.js:

• The p5.js, p5.dom.js, and p5.sound.js libraries are pre-loaded for every sketch.
• Additional p5.js libraries can be uploaded and included as needed.
• Arbitrary HTML (DOM elements, JS, etc) can be added to the page, as needed.
• The embeddable iframe size can be specified, so it can be extend beyond the dimensions of the canvas.
• All documentation and example links point to resources on the p5js.org website.
• The placeholder sketch was written with p5.js, and provides P5-specific hints.
• p5.js sketches are visually identified with the p5.js asterisk in various parts of the site.

Generative Painting is an example sketch in this Gallery (drawn from p5js.org.)

For those in the P5.js community who are not familiar with Sketchpad, I recommend taking a look. While I realize that Sketchpad as an IDE leaves much to be desired, the site has quite a bit going for it:

• Sketchpad’s core feature, real-time collaborative sketching, remains fun and unique.
• Each public sketch is displayed with a replayable forkable version history, so you can see how it was made and make it your own.
• Forked sketches feature proper attribution and visual family trees.
• Customizable private studios are available for classes and groups. To date, 95 college courses, weekend workshops, high school classes, and other groups have set up private studios. These have been entirely free of charge, unless you asked me how much they cost.
• Sketchpad provides a very cool way to record and share pixel-free code “sketchcasts”, which viewers can pause then fork and modify at any point during playback.
• You can see what others are working on in the Moo-inspired canvas cards.
• Sketchpad offers a way to learn by “recreating” a canvas, my failed attempt at introducing a new participation verb.
• Sketchpad canvases can easily be embedded in other websites.
• Each studio includes a Gallery that the studio owner can use to feature great work that they find in their studio. I maintain the public studio.sketchpad.cc Gallery, and each private studio owner maintains their own.

To those developing the P5.js community, please do be in touch. I’d love for the p5js sketchpad studio to be a useful addition to the ecosystem. If there are ways that I can help make this studio even better for P5.js, I’d love to hear!