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 and 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.
Since Processing.js can only access pixel-level data from images hosted on the same server as the sketch is rendered, Sketchpad (and other IDEs in the cloud) have limited support for images. Over the weekend, I decided to do something about this. You can now upload images (supported file types are: gif, jpg, tga, png) to the Sketchpad server, and access them from your sketches. Here's an example:
For the impatient, here's the punchline:
The catch? You need to be logged in to your private account to see the "Upload images" link in the sketch toolbar.
That's right, private accounts are now available! You can create one now at http://studio.sketchpad.cc/sp/account/create-account. More on this soon...
Every few days I take a look at the sketches recently created with studio sketchpad. At some point soon, you'll be able to do this, too. A sketch by Johan caught my eye, and I wanted to share it. Replaying the history of this sketch, I was struck by (1.) the progression towards increasingly complex behavior, and (2.) the various detours taken along the way. You can check out the full source history, detours and all. Here are a few highlights:
Unless otherwise specified by their author(s), works built on Sketchpad are distributed under the Creative Commons Attribution-ShareAlike 3.0 Unported license. This means that Sketchpad sketches can be cloned and modified by others, both on Sketchpad and elsewhere. This also means that sketches can build on other CC-BY works, such as those built using other wonderful Processing websites, such as SketchPatch and OpenProcessing.
I built the sketch below based on a work published on openprocessing (rainbowdrops by gift was licensed under Creative Commons Attribution-Share Alike 3.0 license. Original work License). One interesting note here is that the original sketch was built for the Java implementation of Processing, so the first step was porting it to processing.js. This particular sketch was easy enough to do manually, but for more complex sketches, Florian Jenett's processing.js exporter would be quite helpful.
I liked the idea of pre-populating the canvas with some drawing, if only to give a sense of what the sketch might look like after some mouse interaction. I also chose to vary the opacity of the circles to give it a bit more depth. As with all exported sketches, you can observe the process that went into this modification, re-rendering sketch at each step along the way. Check it out!
