Last week, I posted that you can now use external Javascript libraries when creating sketches in the public studios (studio.sketchpad.cc and p5js.sketchpad.cc.) 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.
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 studio.sketchpad.cc 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 p5.play, 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.
Examples
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.
#etherpad + #processing = http://sketchpad.cc/ The studio is open: http://blog.sketchpad.cc/2010/05/welcome/
— Studio Sketchpad (@studiosketchpad) June 1, 2010
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.
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.
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!
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 studio.sketchpad.cc or created anonymously at sketchpad.cc 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!
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!
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.
Anyone can record a sketchcast. Open the normal code editor, press “record”, and talk as you code. You’ll get a unique URL to share with others.
Sketchcasting is collaborative. Groups of people can code together while recording a sketchcast, and groups of people can code together while experimenting with forked versions of existing sketchcasts.
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.
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!
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!
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 
