If you’ve been making your sketches in the Studio, you may have noticed a new camera icon in the top-right corner of your canvas. Clicking this little camera will take a snapshot of your sketch that can be used in a few different places. When a canvas is not running, your snapshot will act as a preview of what’s to come. Clicking the button still brings it to life, but now you have a sense of what that may do.

A few caveats: The snapshot functionality is only accessible while a sketch created in the studio is in Edit Mode. Sketches that import images from elsewhere on the web cannot be snapped, but images uploaded to the sketchpad server itself will work just fine.

Atul Varna invited me to give a brief talk about Sketchpad and the Programming Visual Media course that I co-organized for the School of Webcraft at the Mozilla Labs Night last week. Knowing the audience, I prepared my slides for the talk as a set of browser tabs (Minefield, of course) to flip between. Mostly for some live demos of the things that a static slide just couldn’t convey. The upside of a browser-based talk with interactive slides is that you can try everything out yourself: kick the tires, make your own variations, etc. So in addition to the screenflow that I recorded while I was talking, I’m including a set of links to each of the demo sketches that I was showing during the talk. For a few of these, you’ll need to be logged in with your Studio account. Hope you enjoy!

(I like the clarity on this 720p HD video, but scroll down further for another version if you need something smaller.)

Slides:

• Introducing Sketchpad.cc


• The Sketchpad real-time sketch editor


• Reviewing the evolution of a sketch


• P2PU / Mozilla School of Webcraft


• School of Webcraft : Programming Visual Media


• Programming Visual Media class discussion about thinking like a programmer


• Programming Visual Media lesson & assignment on thinking like a programmer


• Using Sketchpad to prepare and examine worked examples


• Programming Visual Media discussion question


• Answering the question by playing with code


• A simple game built on Sketchpad


• Andor’s workshop on building 3D games with processing.js


• A Sketchpad member’s public sketchbook


• A sketch using WebGL


• Supersnow, a USU class project


• Sketchpad’s Gallery


• Variations on a theme


• Acknowledgments

I wanted to share some sketches created by students in Doug Holton’s HTML5 course at Utah State University. Nice work!

I’ve been playing around recently with some modifications to canvas footer on sketches, and I’m now settled on a design that I like. It’s modeled loosely on web video players such as blip.tv and vimeo. I liked how Vimeo hides the controller entirely until you need it, but this turned out to be a bit problematic when the thing being controlled, the sketch, can itself be responding dynamically to mouse events. blip.tv offered an alternative model, where the controls are outside of the video itself, but are monochrome and minimalist, so as not to distract from the video itself. The other source of inspiration for the design was from the fine folks at dribbble. On hover, shots fade to reveal a nice overlay. Very snazzy:

My goal for the new footer, besides trying to look half as good as dribbble, was to make the canvas itself — particularly when embedded in another site — into a good starting point for exploring Sketchpad.

As you can see above, the play/pause, view source, full-screen, and clone actions remain, sketch title is now displayed, and a revamped link back to the homepage incorporates the Creative Commons logo for the CC TLD. Hovering over the controller expands the footer to reveal the license applied to the work, links to post the sketch to Twitter or Facebook, access to the canvas embed code, and a link to create a new sketch. (For you hover-free iPad/iPod users, you can click on the sketch title to toggle the state of the footer.)

I hope you find this useful!

Motivated by a recent tweet by John McLear, I fired up Liz’s new Kindle and pointed it’s Webkit-based browser at Sketchpad. Voila! Etherpad and Processing.js both run beautifully. Sketches are editable, the animations are e-inktastic, and the canvas is still visible in sunlight. Fun.

Andrzej Koper created a new sketch on Sketchpad today, and included a question and a bug report in a comment in the header.


////////////////////////////////////////////////////////////////////////////
// CircleSeq
// by: Andrzej Koper
// http://1000abstractmachines.pl
//
// click to make new circles
// press any key to reset
//
// a bug: if you wait long enough some circles will intersect
//        ... I have no idea why that happens
//
// a question: how to prevent from creating circle in circle?
//
////////////////////////////////////////////////////////////////////////////


Think you have an answer? Have an idea for about avoiding intersecting circles? Click on the “clone” link in the canvas footer, and you’re on your way. If you come up with an interesting variation, please report back with links to your modifications. I’ll share them with Andrzej.

Anil Dash argues that forking is a feature, and I whole-heartedly agree. Wikis are great tool for online collaboration when the goal is to arrive at a shared understanding or common resource, but it’s important to remember that not all collaborations have this goal of converging on the One True Version. Especially with creative endeavors. The musician who refines their own version of a Bob Dylan song, the chef who “reinvents” the common cheeseburger, and the DIYer who builds an electric shoebox guitar just a little bit differently — each of them knows the joy of taking something that’s already out there, and making it their own. For me, this has been half the fun of building Studio Sketchpad: I started with Etherpad, cloned my own copy, and took it in an entirely new direction.

When you start talking about { forking | riffing | branching | copying | cloning | recreating }, I see at least three dimensions to the process: technical, legal, and social. Technically, how easily can the work be forked, and how easily can it be rejoined? Legally, when is it or is it not allowed to make a variation to an existing work? Socially, how does forking affect the community of people involved in the process? For Sketchpad, the answers are remarkably straightforward. Technically, a simple GET request is enough to fork a work, but the branches cannot (currently) be merged back together. Legally, the CC-BY-SA licensing adopted platform-wide supports this pattern. Socially, riffing doesn’t fracture community when the goal is creative production.

The most critical view I’ve read about this remix paradigm was in Jaron Lanier’s book You Are Not a Gadget. It’s an eye-opening argument, and absolutely worth reading. Even after taking in his argument, I’m still quite excited to introduce the remix functionality on Sketchpad. While it may not result in original work, I believe that it does act as a precursor to creating original work. As your learning how to code with Processing.js, you can find a canvas that looks interesting, view the source code of that sketch, step through the evolution of that sketch, and now stop at any point in that evolution to see what happens when you tweak some variables and add something new. It makes the process of understanding how code works even more hands-on and interactive, and I like that. Do this a few times, and I bet you’ll be ready to start creating original work.

From now on, you’ll see a “clone” option next to the “view source” link in the footer of each Sketchpad canvas. Try it out, and let me know what you think!

This sketch was created by hernan & jjjolll in the Studio. I just added it to the Gallery.

Big canvases like this one look best in full-screen mode. (There’s a “full screen” link at the bottom of each canvas to do this, too.)

The students in Doug Holton‘s “Developing Multimedia Applications with HTML5″ class at Utah State University have been using Sketchpad recently, and they’ve been building some pretty cool things with it. I bumped into Joel Drake yesterday, who was in the middle of sketching this for class:

To see how Joel built this, click through the “View Source” link at the bottom of his canvas. Nice work, Joel!

I’m not sure who wrote this sketch, but I’m pretty sure it’s the first game written with Sketchpad:

While this is the first sketch that I’ve seen, it is most certainly not the last. In fact, I’ll soon be hosting a class that’s all about learning to write code and build games. You’ll start seeing us in the Studio soon, so feel free to jump in for a sketch or two. My goal is for everyone taking the class to submit the game that they build for their final project to the newly-announced Game_On 2010 competition sponsored by Mozilla Labs as part of their new gaming initiative:

Game On is all about games built, delivered and played on the Open Web and the browser. We want to explore the wider set of technologies which make immersive gaming on the Open Web possible. Whether you’re a student, indie game developer, or studio, you’re welcome to participate in creating awesome games for the Open Web.

It sounds like a great initiative and a fun competition. I look forward to participating.