Sketchpad Blog2024-01-20T22:44:10+00:00https://blog.sketchpad.ccSketchpad BlogMulti-file sketches2015-10-26T07:00:00+00:00https://blog.sketchpad.cc/2015/10/multisketches<p>Last week, I posted that <a href="/2015/10/libraries-for-sketchpad/">you can now use external Javascript libraries</a> when creating sketches in the public studios (<a href="https://studio.sketchpad.cc">studio.sketchpad.cc</a> and <a href="https://p5js.sketchpad.cc">p5js.sketchpad.cc</a>.) I extended this functionality to support another <a href="https://sketchpad.uservoice.com/forums/51847-general/suggestions/1280665-put-in-an-option-to-add-a-new-tab-like-in-the-of" target="_blank">popular request</a>: <b>you can now create multi-file sketches by load code from one Sketchpad sketch into another Sketchpad sketch.</b> This means, among other things, that <i>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.</i></p>
<h3>How do I create a multi-file sketch?</h3>
<p>To load code from one sketch into another sketch, simply open up the new <b>HTML</b> menu in the editor above the code, click the <i>Load a Sketchpad sketch</i> link, paste in the URL of the other sketch, click <i>Load</i> and then <i>Save.</i></p>
<iframe width="640" height="480" src="https://www.youtube-nocookie.com/embed/fhNlHEfU3K0?rel=0" frameborder="0" allowfullscreen=""></iframe>
<p>This screencast demonstrates this using <a target="_blank" href="https://github.com/shiffman/The-Nature-of-Code-Examples-p5.js/tree/master/chp06_agents/NOC_6_03_StayWithinWalls">an example sketch</a> from Daniel Shiffman’s “<a href="https://natureofcode.com/" target="_blank">The Nature of Code</a>” book. You can view this <b><a href="https://p5js.sketchpad.cc/sp/pad/view/ro.C6m-n03ygFyxtb/rev.93" target="_blank">Stay Within Walls</a></b> sketch on Sketchpad or run it right here.</p>
<iframe id="ifr" width="640" height="395" scrolling="no" style="background: url(https://p5js.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="https://p5js.processingtogether.com/sp/pad/iframe/ro.C6m-n03ygFyxtb/rev.93?autostart=0"></iframe>
Libraries, finally!2015-10-19T07:00:00+00:00https://blog.sketchpad.cc/2015/10/libraries-for-sketchpad<p>When I launched <a href="https://blog.sketchpad.cc/2015/05/p5-for-5/">the new studio for P5.js</a> 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 <a href="https://p5js.org/libraries/" target="_blank">growing collection of P5.js libraries</a>. 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.</p>
<p>With the introduction of HTML Additions, the ability to load an external script is no longer limited to the public <a href="https://p5js.sketchpad.cc" target="_blank">P5.js studio.</a> The public Processing.js-based <a href="https://studio.sketchpad.cc" target="_blank">studio.sketchpad.cc</a> and select private studios now provide a way for you to load external libraries, scripts, HTML, CSS, etc. This has long been a <a href="https://sketchpad.uservoice.com/forums/51847-general/suggestions/4214825-loading-an-external-javascript-library" target="_blank">top request</a>, so I’m happy to finally make it available. <a name="usage"></a></p>
<h2>How do I load libraries?</h2>
<p>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 <b>HTML</b> link in the editor. Clicking this link opens a dialog that lets you input arbitrary HTML. Feel free to include <a href="https://developers.google.com/speed/libraries/#jquery" target="_blank">jQuery</a>, Paolo Pedercini’s <a href="http://p5play.molleindustria.org/" target="_blank">p5.play</a>, something from the <a href="https://sciutoalex.github.io/p5-D3-cookbook/" target="_blank">p5/D3 Cookbook</a> for P5.js, <a href="https://www.haptic-data.com/toxiclibsjs/examples/thread" target="_blank">ToxicLibs.js</a> (for Processing.js), or just add some DOM elements to manipulate and CSS to style them.</p>
<h3>Examples</h3>
<p>In <a href="https://p5js.sketchpad.cc/sp/pad/view/ro.CmwxXwIRqB4v-a/rev.1" target="_blank">this example</a>, the D3 Javascript library is hosted on a remote CDN, and included from that URL. <br /></p>
<p><img src="/images/2015/10/d3-example2.gif" style="border:1px solid #ccc; padding:0px; " /></p>
<center><iframe id="ifr" width="540" height="395" scrolling="no" style="background: url(https://p5js.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="https://p5js.processingtogether.com/sp/pad/iframe/ro.CmwxXwIRqB4v-a/rev.1?autostart=0"></iframe></center>
<p>In <a href="https://p5js.sketchpad.cc/sp/pad/view/ro.CgIQhrxPcfRmtN/rev.82" target="_blank">this example</a>, the Grafica Javascript library was first uploaded to Sketchpad as a resource, then included using the relative path of the uploaded script. <br /></p>
<p><img src="/images/2015/10/grafica-example.gif" style="border:1px solid #ccc; padding:0px; " /></p>
<p><br /></p>
<center><iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//p5js.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//p5js.processingtogether.com/sp/pad/iframe/ro.CgIQhrxPcfRmtN/rev.82?autostart=0"></iframe></center>
P5-for-52015-05-31T07:00:00+00:00https://blog.sketchpad.cc/2015/05/p5-for-5<center><blockquote class="twitter-tweet" lang="en" style="min-height:181px;"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/etherpad?src=hash">#etherpad</a> + <a href="https://twitter.com/hashtag/processing?src=hash">#processing</a> = https://sketchpad.cc/ The studio is open: https://blog.sketchpad.cc/2010/05/welcome/</p>— Studio Sketchpad (@studiosketchpad) <a href="https://twitter.com/studiosketchpad/status/15142815613">June 1, 2010</a></blockquote> <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script></center>
<p><br />
On this day in 2010, <a href="https://sketchpad.cc" target="_blank">Studio Sketchpad</a> debuted with a tweet. Today, five years and more than 200,000 sketches later, the studio is still open!</p>
<p><img style="float:right; padding-left:15px;" src="/images/2015/05/p5js-beta.svg" /> 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 <a href="https://p5js.org" target="_blank">P5.js</a> library. I’m happy to announce that this is now possible. <em>Sketchpad features a new public studio that has been custom-built for P5.js, open to anyone at <a href="https://p5js.sketchpad.cc"><b>p5js.sketchpad.cc</b></a></em></p>
<p>This new studio differs from the others on Sketchpad in order to support the use of p5.js instead of Processing.js:</p>
<ul>
<li>The p5.js, p5.dom.js, and p5.sound.js libraries are pre-loaded for every sketch.</li>
<li>Additional p5.js libraries can be uploaded and included as needed.</li>
<li>Arbitrary HTML (DOM elements, JS, etc) can be added to the page, as needed.</li>
<li>The embeddable iframe size can be specified, so it can be extend beyond the dimensions of the canvas.</li>
<li>All documentation and example links point to resources on the <a href="p5js.org">p5js.org</a> website.</li>
<li>The placeholder sketch was written with p5.js, and provides P5-specific hints.</li>
<li>p5.js sketches are visually identified with the p5.js asterisk in various parts of the site.</li>
</ul>
<p><br />
<b><a href="https://p5js.sketchpad.cc/sp/pad/view/ro.CrbQO-IXTlFIGe/latest" target="_blank">Generative Painting</a></b> is an example sketch in this Gallery (drawn from <a href="https://p5js.org/examples/demos/Hello_P5_Drawing.php" target="_blank">p5js.org</a>.)</p>
<p>For those in the P5.js community who are not familiar with Sketchpad, I recommend taking a look. While I realize that Sketchpad <i>as an IDE</i> leaves much to be desired, the site has quite a bit going for it:</p>
<ul>
<li>Sketchpad’s core feature, real-time collaborative sketching, remains fun and unique.</li>
<li>Each public sketch is displayed with a replayable <a href="https://blog.sketchpad.cc/2010/09/clone-your-own/">forkable</a> version history, so you can see how it was made and make it your own.</li>
<li>Forked sketches feature <a href="https://blog.sketchpad.cc/2010/05/default-cc-by-sa/">proper attribution</a> and visual <a href="https://aribadernatal.com/images/sketchpad_blog/tree_derivatives2.png">family trees</a>.</li>
<li>Customizable <a href="https://blog.sketchpad.cc/teaching/private-studios/">private studios</a> 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.</li>
<li>Sketchpad provides a very cool way to record and share pixel-free code <a href="https://aribadernatal.com/projects/Sketchcasting/">“sketchcasts”</a>, which viewers can pause then fork and modify at any point during playback.</li>
<li>You can see what others are working on in the <a href="https://blog.sketchpad.cc/2011/07/inspired-by-moo/">Moo-inspired</a> canvas cards.</li>
<li>Sketchpad offers a way to learn by “recreating” a canvas, my failed attempt at introducing <a href="https://blog.sketchpad.cc/2011/03/recreate/">a new participation verb.</a></li>
<li>Sketchpad canvases can easily be <a href="https://blog.sketchpad.cc/2015/01/sketches-everywhere/">embedded</a> in other websites.</li>
<li>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 <a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches?&begin=1&show=100">studio.sketchpad.cc Gallery</a>, and each private studio owner maintains their own.</li>
</ul>
<p>To those developing the P5.js community, please do be in touch. I’d love for the <a href="p5js.sketchpad.cc" target="_blank">p5js sketchpad studio</a> 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!</p>
Sketches everywhere2015-01-29T07:00:00+00:00https://blog.sketchpad.cc/2015/01/sketches-everywhere<p>After rebuilding my <a href="https://aribadernatal.com">personal website</a> 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 <a href="https://studio.sketchpad.cc">studio.sketchpad.cc</a> or created anonymously at <a href="https://sketchpad.cc">sketchpad.cc</a> can be embedded in a web page served over https (like this one!)</p>
<p>If you’d like to try embedding a sketch on your own site, here’s a cool game written by <a href="https://studio.sketchpad.cc/sp/padlist/edited-by?editorId=17094">Mitch Davis</a> 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!</p>
<iframe id="ifr" width="600" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9P2AwQrF-tPLz/rev.7280?autostart=0"></iframe>
Tidying up2014-10-22T07:00:00+00:00https://blog.sketchpad.cc/2014/10/tidying-up<p>The feature request sitting at the top of Sketchpad’s <a href="https://sketchpad.uservoice.com/forums/51847-general">UserVoice forum</a> 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 <a href="https://studio.sketchpad.cc/sp/padlist/my-sketches">your sketches</a>, 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!</p>
<p><img src="/images/2014/10/delete.jpg" alt="delete" /></p>
Gartner thinks Sketchpad is "cool"2013-05-18T14:47:21+00:00https://blog.sketchpad.cc/2013/05/gartner-thinks-sketchpad-is-cool<p><img src="/images/2013/05/gartner-cool-vendor-2013-300x205.png" alt="gartner-cool-vendor-2013" /></p>
<p>I was pleasantly surprised to hear from a Gartner analyst last month, who got in touch to share that <strong>Sketchpad is being featured as one of Gartner’s four <a href="https://www.gartner.com/id=2476316">Cool Vendors in Web Computing</a> in 2013</strong>. I’d include a snippet of the report itself, but it’s <a href="https://www.gartner.com/id=2476316">behind a $495 paywall.</a> 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.</p>
Sketchcasting: Next-generation screencasting for code2012-08-25T21:46:28+00:00https://blog.sketchpad.cc/2012/08/introducing-sketchcasting<p>This post is drawn from a longer <a href="https://aribadernatal.com/2012/08/20/khan-academy-computer-science/">post on my twosigma blog</a>.</p>
<p><a href="https://studio.sketchpad.cc/sp/pad/view/ro.9gAjbINR1Ar7$/latest?soundcloud_url=https://soundcloud.com/aribadernatal/sketchcast_1344200733170"><img src="/images/2012/08/sketchcast_screenshot2.png" alt="" title="Sketchcast" /></a></p>
<p>Thanks to a flash grant from the <a href="https://shuttleworthfoundation.org">Shuttleworth Foundation</a> (via <a href="https://sharing-nicely.net/bio/">Philipp Schmidt</a> of <a href="https://p2pu.org">P2PU</a> fame), I was able to take a few weeks off <a href="https://aribadernatal.com/2012/07/11/back-to-school/">between my time at Grockit and the Minerva Project</a> to build something brand new: <a href="/sketchcasting">sketchcasting</a>. What I built — inspired by an experience I had running a <a href="https://archive.p2pu.org/webcraft/programming-visual-media.html">P2PU course using Sketchpad</a> in 2010, and enabled by the great <a href="https://mozillapopcorn.org/">Mozilla Popcorn</a> project — functions a lot like the <a href="https://ejohn.org/blog/introducing-khan-cs/">new interactive code-casts on Khan Academy</a>. 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 <a href="https://bitly.com/sketchcasting">example</a>). The best part is that anyone can record a sketchcast, not just me.</p>
<ul>
<li><em>Anyone can record a sketchcast.</em> Open the normal code editor, press “record”, and talk as you code. You’ll get a unique URL to share with others.</li>
<li><em>Sketchcasting is collaborative.</em> 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.</li>
<li><em>All viewer comments and Q&A are automatically time-coded</em>. While I’ve <a href="https://aribadernatal.com/2011/12/18/learning-from-comments-on-youtube/">argued for</a> and hand-built <a href="https://www.slideshare.net/aribn/learning-from-youtube-how-pseudosynchronous-interactions-can-enhance-video-instruction">time-anchored Q&A learning tools</a> in the past, I got it here for free as a part of the excellent <a href="https://developers.soundcloud.com/">Soundcloud audio player</a>. Thanks, Soundcloud!</li>
</ul>
<p>Here’s how you can make your own sketchcasts:</p>
<iframe width="560" height="315" style="border:1px solid #000;" src="https://www.youtube.com/embed/xOhutNCdslQ?rel=0" frameborder="0" allowfullscreen=""></iframe>
<p>If you record a great sketchcast, tweet it a link to <a href="https://twitter.com/studiosketchpad">@studiosketchpad</a> and I’ll share it with others!</p>
<script src="/js/fluidvids.min.js"></script>
<script>fluidvids.init({selector:['iframe','object'],players:['www.youtube.com','player.vimeo.com']});</script>
Building four communities for learning, tinkering, and remixing with code2011-12-19T04:23:48+00:00https://blog.sketchpad.cc/2011/12/towards-dml-2012<p><em><strong>Update</strong>: Video slides from the presentation are now at the bottom of this post.</em></p>
<p>I’m excited to be participating in a panel discussion at the <a href="https://dml2012.dmlcentral.net/">Digital Media and Learning conference</a> in March to talk about <a href="https://sketchpad.cc">Studio Sketchpad</a> 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. <a href="https://twitter.com/#!/andresmh">Andrés Monroy-Hernández</a> (now of <a href="https://research.microsoft.com/en-us/">Microsoft Research</a>) will be talking about <a href="https://scratch.mit.edu/">Scratch Online</a> and <a href="https://fuse.microsoft.com/page/kodu">Kodu Game Lab</a>, <a href="https://twitter.com/#!/jdzamfi">J.D. Zamfirescu-Pereira</a> (<a href="https://learningu.org/">Learning Unlimited</a> & <a href="https://whatwillyoulearn.com/">What Will You Learn?</a>) will be talking about the origin of <a href="http://www.herby.sk/appjet/appjet-site/appjet.com/learn-to-program/lessons/intro.html">AppJet</a>, and <a href="https://twitter.com/#!/shellyshelly">Shelly Farnham</a> (<a href="https://research.microsoft.com/en-us/">Microsoft Research</a>) will be talking about peer learning projects at <a href="https://fuse.microsoft.com/">Microsoft Research FUSE Labs</a>. Here’s the gist:</p>
<blockquote>
<p>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 <a href="https://scratch.mit.edu/">Scratch Online</a>, <a href="https://studio.sketchpad.cc">Studio Sketchpad</a>, <a href="http://www.kodugamelab.com">Kodu</a>, and <a href="https://en.wikipedia.org/wiki/AppJet">AppJet</a>, 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.</p>
<p>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?</p>
<p>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.</p>
</blockquote>
<p>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 <a href="https://dml2012.dmlcentral.net/">2012 Digital Media and Learning conference</a>. It looks fantastic.</p>
<iframe src="//player.vimeo.com/video/39107307?title=0&byline=0&portrait=0" width="675" height="506" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
Inspired by a deck of cards2011-07-26T07:57:56+00:00https://blog.sketchpad.cc/2011/07/inspired-by-moo<p>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:</p>
<p><img src="/images/2011/07/Screen-shot-2011-07-24-at-10.24.28-PM.png" alt="" /></p>
<p>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:</p>
<p><img src="/images/2011/03/IMG_1197.png" alt="" /></p>
<p>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 <a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches?&begin=0&show=21">public studio</a>:</p>
<p><a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches?&begin=0&show=21"><img src="/images/2011/07/new_studio2.png" alt="" title="new_studio2" /></a></p>
<p>This layout works particularly well from displaying the set of all sketches cloned-and-modified from some template sketch:</p>
<p><a href="https://studio.sketchpad.cc/sp/padlist/originated-from?id=ro.9lKWehQncRKTk&sortBy=revisions"><img src="/images/2011/07/tree_derivatives2.png" alt="" /></a></p>
<p>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!</p>
MiniSketches2011-03-27T00:19:05+00:00https://blog.sketchpad.cc/2011/03/minisketches<p>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 <a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches">Studio Gallery</a> 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!</p>
<p><img src="/images/2011/03/IMG_1197.png" alt="" title="IMG_1197" /></p>
<p><img src="/images/2011/03/IMG_1191.png" alt="" title="IMG_1191" /></p>
"What I cannot create, I do not understand"2011-03-16T06:32:43+00:00https://blog.sketchpad.cc/2011/03/recreate<p>On the last blackboards of Richard Feynman:</p>
<p><img src="/images/2011/03/feynman-blackboard.jpg" alt="" title="feynman-blackboard" /> [<a href="https://talklikeaphysicist.com/2008/talk-like-a-physicist-what-i-can-not-create-i-do-not-understand/">more</a>]</p>
<p>Consider, for a moment, the core verbs of participation on the web today. I’m not talking about GET or POST. I’m talking about CREATE, REMIX, SHARE, and DISCUSS. Am I forgetting any? Each of these represents a form of engagement that is meaningful – and near-ubiquitous – for most any website built around “user-generated content” (I triple-shudder on that phrase.) While <a href="https://sketchpad.cc">Sketchpad</a> is still embarrassingly-deficient on letting people DISCUSS (stay tuned…), I’ve taken a slight detour to test out a new verb: <strong>RECREATE</strong>. This is not a general-purpose verb, but I think it’s worth trying out on Sketchpad and sites like it, where there’s interest in supporting learning and teaching.</p>
<p>In basketball, you’ve got games like <a href="https://en.wikipedia.org/wiki/H-O-R-S-E">H-O-R-S-E</a>. In art studios, you’ve got people attempting to replicate a masterpiece or copy a style. In music lessons, you’ve got students trying to repeat back what they hear their teachers play. I’m wondering if these types of learning exercises might make sense for creating things on the web. I can’t think of any examples of sites that support RECREATE as a top-level verb, so I thought I’d try it out right here on Sketchpad.</p>
<p>As of earlier today, every sketch has a little “recreate” link in the footer, giving you an entry-point to do just that. Click on it, and you’ll be given a blank canvas, the sketch editor, and the masterpiece of your choosing (drawn from any revision of any sketch found on the site). You can take a totally different path than the creator did, but the idea is to arrive at a finished version as close to the original as possible. Try your hand at making this tic-tac-toe game:</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9oZuLi6OQN$8T/rev.33?autostart=0"></iframe>
<p>Or replicating this bit of recursion:</p>
<iframe id="ifr" width="400" height="435" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9QmpG6paz8zzJ/rev.0?autostart=0"></iframe>
<p>This is a brand-new experiment. I’m not sure if anyone will use it, so I’ll wait a bit to see. I the meantime, I’m adding it to the list of useful techniques for <a href="https://blog.sketchpad.cc/teaching/">teaching with Sketchpad</a>. If you’re an educator interested in testing this out, please <a href="mailto:ari@sketchpad.cc">let me know</a>!</p>
Unlocking compliments with Google Translate2011-02-21T04:47:09+00:00https://blog.sketchpad.cc/2011/02/unlocking-compliments<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9G5SVilwGObn1/rev.1650?autostart=0"></iframe>
<p>I just added a new sketch by <a href="https://studio.sketchpad.cc/sp/padlist/edited-by?editorId=583">Ari Prasetyo</a> to the <a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches">Studio’s gallery</a>. If you look at the <a href="https://studio.sketchpad.cc/sp/pad/view/ro.9G5SVilwGObn1/latest">source code of this sketch</a>, you’ll see that all of the comments and variable names are written in Indonesian. A few months ago, <a href="https://twitter.com/#!/humphd/status/11087329645043712">humphd mentioned</a> that he was relying on <a href="https://translate.google.com/">Google Translate</a> to understand what people were saying about the Processing.js project. I’m starting to have a similar experience with Sketchpad (my little corner of the ecosystem), and I have to say, it’s a lot of fun!</p>
<p>In the past week, I translated a <a href="https://twitter.com/#!/erucipe/status/38795198976757760">Korean tweet</a>, a <a href="https://tipes.wordpress.com/2011/02/16/etherpad-vit-toujours/">French blog post</a>, these <a href="https://studio.sketchpad.cc/sp/pad/view/ro.9G5SVilwGObn1/rev.1650">Indonesian explanations</a>, and many of the <a href="https://codigodelaimagen.sketchpad.cc/sp/padlist/all-portfolio-sketches">Spanish sketches</a> in one of the new <a href="https://blog.sketchpad.cc/teaching/private-studios/">private studios</a>. My favorite part of Google’s tool is that it automatically detects the source language. <strong>It deciphers compliments in languages that I can’t even recognize.</strong> I find it both gratifying and embarrassing that I actually need this magical feature.</p>
Toss that sketch over the wall2011-02-20T02:56:44+00:00https://blog.sketchpad.cc/2011/02/toss-that-sketch<p>One of the great features of Etherpad is that you could create a new document with one click on the homepage, and share it with others by mailing them a URL. No signup hassle, no up-sell, just click and go. I left this in, of course, when I built Sketchpad, but the real action now happens inside the <a href="https://studio.sketchpad.cc">Studio</a>, which requires account sign-up/sign-in. I added some windows to the studio so outsiders can peer in, but there is still a real wall between the sketches created within the Studio and those created from the big button on the homepage. People do some great work outside of the studio, only to realize afterward that no one will see their creation. So I added a new feature that I think is a pretty nice solution: The ability to throw a sketch over the wall into the studio. To avoid metaphors and keep things clear, I just call this “save for later.”</p>
<p><img src="/images/2011/02/save_for_later.png" alt="" title="save_for_later" /></p>
<p>When you click the link, you create an account, and a copy of your sketch (with a pointer back to the original) is added to your new sketchbook in the studio. Now others can see the sketch, they can see who created it, you can give it a name, and make it a part of the studio. I think this is a subtle but effective way to move from the great one-click-to-start sketch to the real action inside of the studio. If you <a href="https://sketchpad.cc/sp/pad/newsketch">try it out</a>, please let me know what you think.</p>
Forget UserVoice and GetSatisfaction. Send me your feature requests through YouTube.2011-02-10T17:04:22+00:00https://blog.sketchpad.cc/2011/02/listening-to-user-requests<p><strong>Dennis Daniels is more effective than you are at getting his feature requests heard.</strong> Why? Because every one of his requests comes in the form of a screencast video uploaded to YouTube. He has, literally, <a href="https://www.youtube.com/user/pleabargain">thousands of them</a> online already, and he added seven to the count this week while looking at <a href="https://sketchpad.cc">Sketchpad</a> this week. I have to say, I have not seen a more effective way of requesting a new feature, suggesting a change, or demonstrating a bug. Each one the screencasts that Dennis recorded about Sketchpad has been both fun for me to watch – he appreciates many of the my favorite Sketchpad features – and difficult as well, as he struggles to find things that I built but didn’t make easy to discover. His screencasts are one part feature request and one part user testing session. For me, the guy who’s building the application, it’s a fascinating mix. Here are links to a few of them:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=5F8oYjMCtGo">sketchpad studio UI force save revisions for rollback</a></li>
<li><a href="https://www.youtube.com/watch?v=rF1GQmdUNLk">sketchpad UI request and plea for help</a></li>
<li><a href="https://www.youtube.com/watch?v=q4SSd4nKcsc">create javascript exercises for Kahn Academy with processing </a></li>
<li><a href="https://www.youtube.com/watch?v=yTlUwKAPwnU">Processing javascript open source and Kahn Academy</a></li>
<li><a href="https://www.youtube.com/watch?v=WLUpuFOmvWA">Processing for Education and Kahn Academy</a></li>
<li><a href="https://www.youtube.com/watch?v=rHAXwm-wPEE">Thanks to Marco Torchiano and his work!</a></li>
<li><a href="https://www.youtube.com/watch?v=V68_wS5HW1k">openprocessing and sketchpad: good ideas in both</a></li>
</ul>
<p>I continue to receive great suggestions and feedback from people using Sketchpad through the <a href="https://sketchpad.uservoice.com/forums/51847-general">UserVoice</a> page that I set up (which is a very useful service!) I always respond to these as they come in, many have already turned into new features, and many more are on near-term to-do list. But Dennis’s videos are different. I can’t seem to put off these fixes and requests. It’s difficult to watch someone flail when trying to use something that you built. Test this out: record a screencast in which you struggle to accomplish something reasonable and useful in a web application, upload the screencast to YouTube, and email the video link to the application’s developer. Then start your watch. Count the hours before the problem is fixed, the existing feature is made more discoverable, or your must-have feature appears on their production boxes. If you send your email to the right person, I think that this will happen pretty quickly. I, for one, felt compelled to act after watching the videos. Wouldn’t you?</p>
<p>Next time I find myself wanting to request a feature on someone else’s web application, I’ll test this out. Perhaps I’ll do a video request for video requests on <a href="https://uservoice.com">UserVoice</a>. Or maybe I should record a feature request for recording feature requests on <a href="https://usertesting.com">UserTesting</a>.</p>
<p>Feeling inspired by the medium, I recorded a video response to one of Dennis’s feature requests. <a href="https://www.youtube.com/watch?v=5F8oYjMCtGo">His request</a> is the first video, and <a href="https://www.youtube.com/watch?v=6rcBOmVkNVQ&feature=watch_response">my response</a> is the second. Enjoy!</p>
<iframe title="YouTube video player" width="640" height="390" style="border:1px solid #000000;" src="//www.youtube.com/embed/5F8oYjMCtGo?rel=0&hd=1" frameborder="0" allowfullscreen=""></iframe>
<iframe title="YouTube video player" width="640" height="390" style="border:1px solid #000000;" src="//www.youtube.com/embed/6rcBOmVkNVQ?rel=0&hd=1" frameborder="0" allowfullscreen=""></iframe>
<p>The sketch that I’m playing with in the video is <a href="https://studio.sketchpad.cc/sp/pad/view/ro.93DzrRzw3-CL8/rev.177">Modified clone of “Spinner”</a></p>
<script src="/js/fluidvids.min.js"></script>
<script>fluidvids.init({selector:['iframe','object'],players:['www.youtube.com','player.vimeo.com']});</script>
Super Disco Sketchin' - It's all about the process2011-01-27T18:22:16+00:00https://blog.sketchpad.cc/2011/01/disco<p>Part of what I love about <a href="https://sketchpad.cc">Studio Sketchpad</a> is that it’s an environment for creating digital animation that is focused <em>primarily on process</em>, and only <em>secondarily on the product</em>. When you find yourself impressed by the final version of something that someone built on sketchpad, you’ve only really scratched the surface. Don’t believe me?</p>
<p>I fired up ScreenFlow and started stepping through the history of a sketch recently created by a few talented people working together. Check out the resulting video clip:</p>
<iframe width="640" height="390" style="border:1px solid #000000;" src="//www.youtube-nocookie.com/embed/4BKbxJmzIOE?rel=0&hd=1" frameborder="0" allowfullscreen=""></iframe>
<p>Here’s the final sketch. Click through to <a href="https://sketchpad.cc/sp/pad/view/ro.X9z5IbEOTXA/rev.3525">view source code history of this sketch</a>.</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.X9z5IbEOTXA/rev.3525?autostart=0"></iframe>
<p>If you send me a link to some of your complex and interesting sketches, I may have to make another video. Looking for a place to begin? Take a look through the <a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches">sketches featured in the Gallery</a>. Feel free to clone-and-remix anything that catches your interest, and take it from there.</p>
Swim - the game2010-12-07T08:12:41+00:00https://blog.sketchpad.cc/2010/12/swim<p>Dan Ha recently uploaded a fantastic game called <a href="//studio.processingtogether.com/sp/pad/export/ro.9g1guI6Fao9Ye/rev.108"><strong>Swim</strong></a>, that he built with Nicole Roach and Cameron Teitelman. Complete with nicely-illustrated instructions! When I asked him about it, Dan said:</p>
<blockquote>
<p>The sketch was designed for our CS147 class at Stanford University: Human-Computer Interaction. We designed it the sketch with the goal of creating a simple, fun game that would give kids an intuitive sense of physics. The fish and turtle serve as a metaphor for vectors - the size and orientation of the fish projectiles represent the magnitude and direction of a vector. When they collide with the turtle, the resulting direction and distance that it moves is the combined vector of all the fish projectiles.</p>
</blockquote>
<p><strong><a href="//studio.processingtogether.com/sp/pad/export/ro.9g1guI6Fao9Ye/rev.108">Check out this full-screen version of Swim.</a></strong> Below the canvas, you’ll see the latest revision of their source code, complete with Processing syntax highlighting.</p>
<p>Great work, team!</p>
<iframe id="ifr" width="1024" height="725" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9g1guI6Fao9Ye/rev.108?autostart=0"></iframe>
Untitled, by anonymous2010-11-10T17:44:30+00:00https://blog.sketchpad.cc/2010/11/untitled-by-anonymous<p>I spotted a series of interesting sketches by <del datetime="2010-11-17T17:27:15+00:00">an unnamed author</del> <a href="https://twitter.com/#!/quitenice">Visa-Valtteri “visy” Pimiä</a> this morning that I wanted to point out. I thought it was interesting to see each sketch build on the previous one. As always, you can do the same, by cloning and modifying any version of any of these sketches. The “clone” link is in the footer of each canvas.</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.B4za6ScXMuP/rev.633?autostart=0"></iframe>
<p>was cloned and modified into:</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.-O5gjFh$oV7/rev.703?autostart=0"></iframe>
<p>and</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.Ko3a0W7jBAI/rev.644?autostart=0"></iframe>
<p>was cloned and modified to sidescroll:</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.aomzjcvpBjJ/rev.283?autostart=0"></iframe>
<p>and again cloned for a whirling variation:</p>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.AnzyV0u2$AW/rev.379?autostart=0"></iframe>
Sketch snapshots2010-11-07T17:30:23+00:00https://blog.sketchpad.cc/2010/11/sketch-snapshots<p>If you’ve been making your sketches in the <a href="https://studio.sketchpad.cc">Studio</a>, 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.</p>
<p><img src="/images/2010/11/snapshotter.png" alt="" title="snapshotter" /></p>
<p>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 <a href="/2010/09/sketchpad-hosts-images/">images uploaded</a> to the sketchpad server itself will work just fine.</p>
<iframe id="ifr" width="700" height="535" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9tCMI9ZFLIeGD/rev.253?autostart=0"></iframe>
<iframe id="ifr" width="640" height="515" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.90jz6w1EyU85f/rev.93?autostart=0"></iframe>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9UBJHW7N8ZH-h/rev.4991?autostart=0"></iframe>
<iframe id="ifr" width="800" height="635" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9I67Mz6kNCItg/rev.417?autostart=0"></iframe>
Mozilla Labs night talk, abbreviated2010-11-05T07:36:04+00:00https://blog.sketchpad.cc/2010/11/sketchpad-intro-talk<p><a href="https://www.toolness.com/wp/">Atul Varna</a> invited me to give a brief talk about <a href="https://sketchpad.cc">Sketchpad</a> and the <a href="https://archive.p2pu.org/webcraft/programming-visual-media.html">Programming Visual Media</a> course that I co-organized for the School of Webcraft at the <a href="https://mozillalabs.com/gaming/2010/10/26/mozilla-labs-night-halloween-i-mean-gaming-edition/">Mozilla Labs Night</a> 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 <a href="https://studio.sketchpad.cc">logged in</a> with your Studio account. Hope you enjoy!</p>
<iframe style="z-index:2; border:10px solid #ccc;" title="Sketchpad Intro" class="youtube-player" type="text/html" width="640" height="375" src="//www.youtube.com/embed/7kLT-og9DmE?rel=0&hd=1&ap=&fmt=22" frameborder="0"></iframe>
<p>Slides:</p>
<ul>
<li><a href="/images/2010/11/Screen-shot-2010-10-28-at-11.54.14-AM.png">Getting to the Game</a></li>
<li><a href="https://sketchpad.cc/">Introducing Sketchpad.cc</a></li>
<li><a href="https://sketchpad.cc/sp/pad/newsketch">The Sketchpad real-time sketch editor</a></li>
<li><a href="https://sketchpad.cc/sp/pad/view/ro.S8PTQ3KG1lV/rev.4">Reviewing the evolution of a sketch</a></li>
<li><a href="https://p2pu.org">P2PU </a><a href="https://www.drumbeat.org/p2pu-webcraft">/ Mozilla </a><a href="https://p2pu.org/webcraft/course-listing">School of Webcraft</a></li>
<li><a href="https://archive.p2pu.org/webcraft/programming-visual-media.html">School of Webcraft : Programming Visual Media </a></li>
<li><a href="https://pvm.ietherpad.com/ep/pad/view/ro.4OD$ikV/rev.87">Programming Visual Media class discussion about thinking like a programmer</a></li>
<li><a href="https://dl.dropbox.com/s/2k1ynv15gom7p4x/lesson-4.html">Programming Visual Media lesson & assignment on thinking like a programmer</a></li>
<li><a href="https://studio.sketchpad.cc/sp/pad/view/ro.9GKsGcBt9l9G1/rev.306">Using Sketchpad to prepare and examine worked examples</a></li>
<li><a href="/images/2010/11/Screen-shot-2010-10-28-at-2.04.48-PM.png">Programming Visual Media discussion question</a></li>
<li><a href="https://studio.sketchpad.cc/sp/pad/view/VwnX9uJDes/latest">Answering the question by playing with code</a></li>
<li><a href="https://sketchpad.cc/sp/pad/view/1XfE7b6Zyp/latest">A simple game built on Sketchpad</a></li>
<li><a href="https://fsoss.senecac.on.ca/2010/node/45">Andor’s workshop on building 3D games with processing.js</a></li>
<li><a href="https://studio.sketchpad.cc/sp/padlist/edited-by?editorId=95">A Sketchpad member’s public sketchbook</a></li>
<li><a href="https://studio.sketchpad.cc/sp/pad/view/01VrOOPONA/latest">A sketch using WebGL</a></li>
<li><a href="//studio.processingtogether.com/sp/pad/iframe/ro.9jjdy790EDV03/rev.1280?a=false&autostart=0">Supersnow, a USU class project</a></li>
<li><a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches">Sketchpad’s Gallery</a></li>
<li><a href="//studio.processingtogether.com/sp/pad/iframe/ro.9KiUgTqFVNFPZ/rev.925?a=false&autostart=0">Variations on a theme</a></li>
<li><a href="/images/2010/11/thanks.png">Acknowledgments</a></li>
</ul>
<script src="/js/fluidvids.min.js"></script>
<script>fluidvids.init({selector:['iframe','object'],players:['www.youtube.com','player.vimeo.com']});</script>
More sketches from USU2010-11-03T04:44:00+00:00https://blog.sketchpad.cc/2010/11/usu-projects<p>I wanted to share some sketches created by students in Doug Holton’s <a href="https://html5.wikispaces.com/">HTML5 course</a> at Utah State University. Nice work!</p>
<iframe id="ifr" width="552" height="395" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9jjdy790EDV03/rev.1280"></iframe>
<iframe id="ifr" width="400" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9AaDuBtvrrB3x/rev.361?autostart=0"></iframe>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9qJPojUdsqnKo/rev.12?autostart=0"></iframe>
<iframe id="ifr" width="500" height="360" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9jueZXviPK0a3/rev.141?autostart=0"></iframe>
<iframe id="ifr" width="400" height="435" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.96gSRLoi-4rLt/rev.1331?autostart=0"></iframe>
<iframe id="ifr" width="800" height="635" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.93esWadvTtXz8/rev.56?autostart=0"></iframe>
<iframe id="ifr" width="800" height="435" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.912pDbHe9k0iL/rev.4902?autostart=0"></iframe>
<iframe id="ifr" width="300" height="335" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9XeTKsiss$1D2/rev.534?autostart=0"></iframe>
Fancy footerwork2010-10-22T05:58:52+00:00https://blog.sketchpad.cc/2010/10/fancy-footerwork<p>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 <a href="https://dribbble.com">dribbble</a>. On hover, shots fade to reveal a nice overlay. Very snazzy:</p>
<p><a href="https://dribbble.com/studiosketchpad" title="view studiosketchpad screenshots on dribbble"><img src="/images/2010/10/Screen-shot-2010-10-23-at-8.08.12-PM.png" alt="" title="dribbble" /></a></p>
<p>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.</p>
<iframe id="ifr" width="600" height="285" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9c0Fpbu-0AYgG/rev.222?autostart=0"></iframe>
<p>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.)</p>
<p>I hope you find this useful!</p>
Code beautiful on a sunny day2010-10-07T05:52:11+00:00https://blog.sketchpad.cc/2010/10/code-beautiful-on-a-sunny-day<p>Motivated by a recent <a href="https://twitter.com/#!/johnmclear/status/26560441384">tweet</a> by John McLear, I fired up Liz’s new <a href="https://www.amazon.com/gp/product/B002FQJT3Q?ie=UTF8&tag=sketchpad-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=B002FQJT3Q">Kindle</a> and pointed it’s Webkit-based browser at <a href="https://sketchpad.cc">Sketchpad</a>. 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.</p>
<p><img src="https://www.assoc-amazon.com/e/ir?t=sketchpad-20&l=as2&o=1&a=B002FQJT3Q" alt="" />
<a href="https://studio.sketchpad.cc/sp/pad/view/ro.9lLPXTtBBKRSk/rev.0"><img src="/images/2010/10/IMG_0934.jpg" alt="" title="kindle_sun" /></a></p>
<iframe src="https://player.vimeo.com/video/15632271?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
<p><a href="https://studio.sketchpad.cc/sp/pad/view/ro.9Nz1AmRJSmykQ/rev.482"><img src="/images/2010/10/IMG_0908_2.jpg" alt="" title="k2" /></a></p>
Fork it, fix it, report back2010-09-28T15:23:17+00:00https://blog.sketchpad.cc/2010/09/fork-it-fix-it-report-back<p>Andrzej Koper created a new sketch on Sketchpad today, and included a question and a bug report in a comment in the header.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>////////////////////////////////////////////////////////////////////////////
// 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?
//
////////////////////////////////////////////////////////////////////////////
</code></pre></div></div>
<p><br /><iframe id='ifr' width='400' height='335' scrolling='no' style='background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;' src='//studio.processingtogether.com/sp/pad/iframe/ro.9DyPzmvF9GTcI/rev.747?autostart=0'></iframe></p>
<p>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.</p>
Clone your own2010-09-25T21:46:56+00:00https://blog.sketchpad.cc/2010/09/clone-your-own<p>Anil Dash argues that <a href="https://dashes.com/anil/2010/09/forking-is-a-feature.html">forking is a feature</a>, 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 <a href="https://sketchpad.cc"><strong>Studio Sketchpad</strong></a>: I started with Etherpad, cloned my own copy, and took it in an entirely new direction.</p>
<p>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 <a href="https://blog.sketchpad.cc/2010/05/default-cc-by-sa/">CC-BY-SA</a> licensing adopted platform-wide supports this pattern. Socially, riffing doesn’t fracture community when the goal is creative production.</p>
<p>The most critical view I’ve read about this remix paradigm was in Jaron Lanier’s book <a href="https://www.amazon.com/gp/product/0307269647?ie=UTF8&tag=sketchpad-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0307269647"><strong>You Are Not a Gadget.</strong></a><img src="https://www.assoc-amazon.com/e/ir?t=sketchpad-20&l=as2&o=1&a=0307269647" alt="" /> 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.</p>
<iframe id="ifr" width="600" height="335" scrolling="no" style="background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; border:1px solid #666666;" src="//processingtogether.com/sp/pad/iframe/ro.Au6uggVlrBr/rev.17?autostart=0"></iframe>
<p>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!</p>
"ashhh"2010-09-16T04:47:05+00:00https://blog.sketchpad.cc/2010/09/ashhh<p>This sketch was created by hernan and jjjolll in the Studio. I just added it to <a href="https://studio.sketchpad.cc/sp/padlist/all-portfolio-sketches">the Gallery</a>.</p>
<p>Big canvases like this one look best in <a href="//studio.processingtogether.com/sp/pad/iframe/ro.9Z2ySHH2PWKwR/rev.471"><strong>full-screen mode</strong></a>. (There’s a “full screen” link at the bottom of each canvas to do this, too.)</p>
<iframe id="ifr" width="800" height="835" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9Z2ySHH2PWKwR/rev.471?autostart=0"></iframe>
Welcome, USU!2010-09-16T03:57:26+00:00https://blog.sketchpad.cc/2010/09/welcome-usu<p>The students in <a href="https://twitter.com/edtechdev">Doug Holton</a>’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:</p>
<iframe id="ifr" width="800" height="835" scrolling="no" style="background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9KiUgTqFVNFPZ/rev.925?autostart=0"></iframe>
<p>To see how Joel built this, click through the “View Source” link at the bottom of his canvas. Nice work, Joel!</p>
Sketchpad's first game2010-09-09T05:35:25+00:00https://blog.sketchpad.cc/2010/09/sketchpads-first-game<p>I’m not sure who wrote this sketch, but I’m pretty sure it’s the first game written with Sketchpad:</p>
<CENTER>
<iframe id="ifr" width="300" height="335" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//processingtogether.com/sp/pad/iframe/ro.rrNceu1zOGs/rev.1317?autostart=0"></iframe>
</CENTER>
<p>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 <a href="https://archive.p2pu.org/webcraft/programming-visual-media.html">class that’s all about learning to write code and build games</a>. You’ll start seeing us in the <a href="https://studio.sketchpad.cc">Studio</a> 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 <a href="https://gaming.mozillalabs.com/">Game_On 2010 competition</a> sponsored by Mozilla Labs as part of their new <a href="https://mozillalabs.com/gaming">gaming initiative</a>:</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>It sounds like a great initiative and a fun competition. I look forward to participating.</p>
Sketchpad hosts images2010-09-06T16:14:31+00:00https://blog.sketchpad.cc/2010/09/sketchpad-hosts-images<p>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:</p>
<iframe id="ifr" width="600" height="356" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//studio.processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px;" src="//studio.processingtogether.com/sp/pad/iframe/ro.9PADgIaXj2Bsz/rev.187?autostart=0"></iframe>
<p>For the impatient, here’s the punchline:</p>
<p><a href="https://studio.sketchpad.cc/sp/pad/view/ro.9PADgIaXj2Bsz/rev.187"><img src="/images/2010/09/yosemite_finished.png" alt="" /></a></p>
<p>The catch? You need to be logged in to your private account to see the “Upload images” link in the sketch toolbar.</p>
<p><a href="https://studio.sketchpad.cc/sp/account/create-account"><img src="/images/2010/09/Screen-shot-2010-09-06-at-9.11.49-AM.png" alt="" title="header" /></a></p>
<p>That’s right, private accounts are now available! You can create one now at <a href="https://studio.sketchpad.cc/sp/account/create-account">https://studio.sketchpad.cc/sp/account/create-account</a>. More on this soon…</p>
Johan's waves2010-06-18T05:05:04+00:00https://blog.sketchpad.cc/2010/06/johan-waves<p>Every few days I take a look at the sketches recently created with <a href="https://sketchpad.cc/">studio sketchpad</a>. At some point soon, you’ll be able to do this, too. A <a href="https://sketchpad.cc/sp/pad/view/ro.7IH2NQLEfjI/rev.36">sketch by Johan</a> 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 <a href="https://sketchpad.cc/sp/pad/view/ro.7IH2NQLEfjI/latest">full source history</a>, detours and all. Here are a few highlights:</p>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.7"></iframe>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.39"></iframe>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.52"></iframe>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.274"></iframe>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.388?autostart=0"></iframe>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.507?autostart=0"></iframe>
<iframe width="720" height="235" scrolling="no" style="border:1px solid rgb(204, 204, 204); background: url(//processingtogether.com/static/img/jun09/pad/connectingbar.gif) no-repeat center 60px; " src="//processingtogether.com/sp/pad/iframe/ro.7IH2NQLEfjI/rev.700?autostart=0"></iframe>
building on other sketches licensed under CC-BY-SA2010-05-21T15:57:11+00:00https://blog.sketchpad.cc/2010/05/default-cc-by-sa<p>Unless otherwise specified by their author(s), works built on Sketchpad are distributed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported license</a>. 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 <a href="https://sketchpatch.net">SketchPatch</a> and <a href="https://openprocessing.org">OpenProcessing</a>.</p>
<p>I built the sketch below based on a work published on openprocessing (<em>rainbowdrops</em> by <em>gift</em> was licensed under Creative Commons Attribution-Share Alike 3.0 license. <a href="https://openprocessing.org/visuals/?visualID=9849">Original work</a> <a href="https://creativecommons.org/licenses/by-sa/3.0/">License</a>). 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 <a href="https://github.com/fjenett/processingjstool">processing.js exporter</a> would be quite helpful.</p>
<iframe style="border: 1px solid rgb(204, 204, 204);" src="//processingtogether.com/sp/pad/iframe/ro.JWdxcKGhyd0/rev.453?autostart=0" height="335" scrolling="no" width="300"></iframe>
<p>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. <a href="https://sketchpad.cc/sp/pad/view/ro.JWdxcKGhyd0/rev.453">Check it out!</a></p>
"The as yet undreamt of things that will be displayed"2010-05-21T03:16:58+00:00https://blog.sketchpad.cc/2010/05/the-as-yet-undreamt-of-things-that-will-be-displayed<p><a href="https://sketchpad.cc/"><strong>Studio Sketchpad</strong></a> was named after the two web technologies on which the application is built: the <strong>Sketch</strong> from <a href="https://processingjs.org/">Processing</a> and the <strong>Pad</strong> from <a href="https://etherpad.com/">EtherPad</a>. (The <strong>Studio</strong> metaphor used throughout the site was inspired by the writings of John Seely Brown, which I’ll save for another post.)</p>
<p>I’m embarrassed to say that when I chose the name, I was unfamiliar with Ivan Sutherland’s massively influential Sketchpad program, described in his <a href="https://www.cl.cam.ac.uk/techreports/UCAM-CL-TR-574.pdf">1963 PhD dissertation</a> at MIT. Sutherland demonstrated a new type of human-computer interaction, in which a person could create and manipulate graphical constructs by pointing a light pen at the computer display. The drawing programs on your brand-new iPad can’t do half of what this program did almost 50 years ago. Several video recordings of demonstrations of the system have recently found their way online, so you can see it for yourself.</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/495nCzxM9PI?si=T0Z0kZnOuIIjqjBr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<p>I should have learned about Sutherland’s Sketchpad program years ago. What other landmark systems am I still totally unaware of? Are students in computer science programs introduced to the defining systems in various sub-fields? Personally, I would have found a course on the history of influential computer systems to be a fascinating introduction to the discipline.</p>
Etherpad + Processing = Sketchpad. The studio is now open.2010-05-20T06:03:00+00:00https://blog.sketchpad.cc/2010/05/welcome<p>Consider the following canvas, created with <a href="https://processingjs.org/">Processing.js</a>:</p>
<iframe width="300" scrolling="no" height="335" src="//processingtogether.com/sp/pad/iframe/ro.vu$rBJJXb7lYGq/rev.70" style="border: 1px solid rgb(204, 204, 204);"></iframe>
<p>It’s pretty, it’s simple, and it looks a bit different each time it’s rendered. Can you mentally picture the code that would generate this canvas? <a href="https://sketchpad.cc/sp/pad/export/ro.vu$rBJJXb7lYGq/rev.70?format=txt">Here it is.</a> On the web, the ability to “view source” is an invaluable tool for understanding how something works. It is the difference between the transparency of HTML and Javascript and the opacity of Flash animations and Java applets.</p>
<p>Now look again at the canvas. Would access to the source code really tell you the full story? Did the author pre-envision this canvas, and then directly express this vision through code? I would argue that, more often than not, the canvas is the product of an iterative, non-linear process. If so, what can we learn from gaining access to the process itself?</p>
<p><a href="https://sketchpad.cc/sp/pad/view/ro.vu$rBJJXb7lYGq/rev.70"><img src="//processingtogether.com/static/img/sketchpadcc/new_screenshot_shadow.png" alt="" /></a></p>
<p>When you create a canvas in <a href="https://sketchpad.cc"><strong>studio sketchpad</strong></a>, every step along the way is recorded for others to observe. This behind-the-scenes look into the evolution of a canvas is enabled through a repurposing of the now <a href="https://github.com/ether/pad">open-source Etherpad</a> codebase (<a href="https://etherpad.com/">thanks, Google!</a>).</p>
<p>You’ll see that on the time-slider for the history of the canvas, a number of markers punctuate the line. Each marker corresponds to a point at which the authors viewed the canvas while creating it. These markers serve as guide-posts for others later exploring the evolution of the sketch.</p>
<p>There’s plenty more to come, but enough is in place for you to step inside and check it out. <a href="https://sketchpad.cc/"><strong>The studio is open.</strong></a></p>