Multi-file sketches

October 26, 2015

Last week, I posted that you can now use external Javascript libraries when creating sketches in the public studios ( and I extended this functionality to support another popular request: you can now create multi-file sketches by load code from one Sketchpad sketch into another Sketchpad sketch. This means, among other things, that you can better organize your code into files that can be edited independently, you can reuse classes across multiple sketches, and you can even make use of classes built by others people on Sketchpad.

How do I create a multi-file sketch?

To load code from one sketch into another sketch, simply open up the new HTML menu in the editor above the code, click the Load a Sketchpad sketch link, paste in the URL of the other sketch, click Load and then Save.

This screencast demonstrates this using an example sketch from Daniel Shiffman's "The Nature of Code" book. You can view this Stay Within Walls sketch on Sketchpad or run it right here.

Libraries, finally!

October 19, 2015

When I launched the new studio for P5.js earlier this summer, I was happy to have finally addressed a long-time limitation of Sketchpad: sketches in this studio could include and make use of any of the growing collection of P5.js libraries. Unfortunately, the ability to load in external libraries and sketches came at the cost of additional confusion in using the editor, as each P5.js sketch needed to be wrapped in a <script> tag. In order to un-break this experience, I'm introducing a better, simpler, and <script>-free mechanism for loading Javascript libraries and other resources: HTML Additions.

With the introduction of HTML Additions, the ability to load an external script is no longer limited to the public P5.js studio. The public Processing.js-based and select private studios now provide a way for you to load external libraries, scripts, HTML, CSS, etc. This has long been a top request, so I'm happy to finally make it available.

How do I load libraries?

The mechanism is the same, regardless of the library. If you're logged in and working on a sketch in any Sketchpad studio, you'll see an HTML link in the editor. Clicking this link opens a dialog that lets you input arbitrary HTML. Feel free to include jQuery, Paolo Pedercini's, something from the p5/D3 Cookbook for P5.js, ToxicLibs.js (for Processing.js), or just add some DOM elements to manipulate and CSS to style them.


In this example, the D3 Javascript library is hosted on a remote CDN, and included from that URL.

In this example, the Grafica Javascript library was first uploaded to Sketchpad as a resource, then included using the relative path of the uploaded script.


May 31, 2015

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

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

Generative Painting is an example sketch in this Gallery (drawn from

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:

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!

Sketches everywhere

January 28, 2015

After rebuilding my personal website last month, I switched over to serving it over https. This had the unfortunate side effect of preventing me from embed Sketchpad sketches on my website, since the embedded iframe wasn't also served over https. This was enough motivation to make some changes. As of today, the "embed" code included in the footer of any canvas of a sketch created in the public studio at or created anonymously at can be embedded in a web page served over https (like this one!)

If you'd like to try embedding a sketch on your own site, here's a cool game written by Mitch Davis to use as you practice. Hover your mouse over the canvas footer and click on the "embed" link. Copy and paste the embed code into your own webpage and try out the game!

Tidying up

October 22, 2014

The feature request sitting at the top of Sketchpad's UserVoice forum is for the ability to remove a sketch from your studio account to keep things tidy. I finally had a chance to build this in yesterday. From the list of your sketches, click through to view the sketch that you'd like to remove. If you were the original author (rather than just a subsequent editor), you'll be able to click a "Delete this sketch" link to remove it from your account. Un-clutter away!


Gartner thinks Sketchpad is "cool"

May 18, 2013


I was pleasantly surprised to hear from a Gartner analyst last month, who got in touch to share that Sketchpad is being featured as one of Gartner's four Cool Vendors in Web Computing in 2013. I'd include a snippet of the report itself, but it's behind a $495 paywall. If one person buys this report, Gartner will have made more money on Sketchpad than I have. Still, I do appreciate the attention, and the write-up itself is quite nice.

Sketchcasting: Next-generation screencasting for code

August 25, 2012

This post is drawn from a longer post on my twosigma blog.

Thanks to a flash grant from the Shuttleworth Foundation (via Philipp Schmidt of P2PU fame), I was able to take a few weeks off between my time at Grockit and the Minerva Project to build something brand new: sketchcasting. What I built — inspired by an experience I had running a P2PU course using Sketchpad in 2010, and enabled by the great Mozilla Popcorn project — functions a lot like the new interactive code-casts on Khan Academy. Watch the code being typed as you listen to an accompanying audio narration, pause playback to fork and experiment yourself with the code at any moment, then show and share what you create (an example). The best part is that anyone can record a sketchcast, not just me.

Here's how you can make your own sketchcasts:

If you record a great sketchcast, tweet it a link to @studiosketchpad and I'll share it with others!

Building four communities for learning, tinkering, and remixing with code

December 18, 2011

Update: Video slides from the presentation are now at the bottom of this post.

I'm excited to be participating in a panel discussion at the Digital Media and Learning conference in March to talk about Studio Sketchpad and to publicly compare notes with three very talented people who have been instrumental in creating other web-based communities for learning, tinkering, and remixing with code. Andrés Monroy-Hernández (now of Microsoft Research) will be talking about Scratch Online and Kodu Game Lab, J.D. Zamfirescu-Pereira (Learning Unlimited & What Will You Learn?) will be talking about the origin of AppJet, and Shelly Farnham (Microsoft Research) will be talking about peer learning projects at Microsoft Research FUSE Labs. Here's the gist:

In this panel, we bring together four people who have actively engaged in making, tinkering, and remixing the designs of learning communities in which young people make, tinker, and remix with code. Drawing on experiences creating and experimenting with Scratch Online, Studio Sketchpad, Kodu, and AppJet, we seek to identify the socio-technical factors that impact peer learning with social media. We will talk about lessons learned and have a discussion about questions such as how to support young people's development of a maker mindset.

We will introduce each of the four systems, drawing particular attention to the various mechanisms built-in for remixing, iteratively refining, collaborating, and sharing with others. We then use this as a starting point for identifying commonalities and differences to discuss in more detail. What do we agree are valuable components in creating a remix culture? What have we discovered to be promising, but ultimately unsuccessful? What styles of remixing have emerged and what seems to be their purpose? How generalizable are our observations?

This panel aims at providing insights for meta-designers, practitioners and educators interested in learning how to support and inspire young people to learn to create computational artifacts within a community of peers.

I'm looking forward to this conference, and am particularly looking forward to having this panel discussion. We'll certainly post more about it as it approaches (and afterwards), but if you're planning to attend, definitely drop me a note. You can find more info online about the 2012 Digital Media and Learning conference. It looks fantastic.

Inspired by a deck of cards

July 26, 2011

Viewing sketches created by people in the Studio was always possible, but wasn't pretty or easy. Here's what you had to work with:

In stark contrast to this, I have a beautiful little deck of cards sitting on my desk at home, with each card featuring a colorful snippet of a canvas created in the sketchpad studios. When the deck first arrived, I spread the cards out on a table to get the full effect:

Looking at the table that afternoon, it was pretty clear that these cards offered a glimpse into the studio that was much better than what I was currently displaying online. So when I finally started to redesign the studio, I used these cards as inspiration. Like any renovation, everything started smoothly but then began to drag. Fast forward a few months, and today I find myself with a free afternoon and an itch to ship. The result? Here's what you'll see in the public studio:

This layout works particularly well from displaying the set of all sketches cloned-and-modified from some template sketch:

I'm excited about the new look, and I hope you like it, too. I'm going to order a new box of mini-cards to celebrate!


March 26, 2011

In an attempt to have something tangible to show for my time spent on Sketchpad, I picked a few of my favorite canvases from the Studio Gallery to print on a deck of MiniCards. A small box of sketch snapshots arrived in the mail today, and I'm liking these a lot. Nice work, sketchers!