Studio Sketchpad
Processing on Etherpad
(2010-now)
@studiosketchpad
Blog RSS
In 2010, I started Studio Sketchpad as a website for creative coders to collaboratively author and share interactive animations and data visualizations written in Processing.
I designed Sketchpad to be a venue focused more on process than on product. The Etherpad-based editor automatically saves every revision of your code, and Sketchpad makes this history available to anyone who wants to look. For every interesting canvas on Sketchpad, you can view the sketch’s source code at any point in its history:
Anyone can view the history of any sketch on the site, and is free to fork a copy from any revision in the history. Sketchpad keeps track of the derivations, and lets you see everyone's variations in one place:
Gartner listed Sketchpad as one of four Cool Vendors in Web Computing in 2013. Buy their $495 report to find out why.
I keep an eye on what people are building in Sketchpad, and feature some of the sketches that catch my eye in the studio's public Gallery.
In 2015, I modified Sketchpad so that certain studios allow sketches to be authored using P5.js, a modern library inspired by (but not directly compatible with) Processing. There's now a public P5.js studio that anyone can use, and an option for educators to request a private studio that uses P5.js.
In 2012, I organized a discussion at the Digital Media and Learning conference to publicly compare notes with the talented creators behind several other web-based communities for learning, tinkering, and remixing with code, including Scratch, Studio Sketchpad, Kodu, and AppJet:
"Building four communities for learning, tinkering, and remixing with code"
Gartner listed Sketchpad as one of four Cool Vendors in Web Computing in 2013. Buy their $495 report to find out why.
I keep an eye on what people are building in Sketchpad, and feature some of the sketches that catch my eye in the studio's public Gallery.
In 2015, I modified Sketchpad so that certain studios allow sketches to be authored using P5.js, a modern library inspired by (but not directly compatible with) Processing. There's now a public P5.js studio that anyone can use, and an option for educators to request a private studio that uses P5.js.
In 2012, I organized a discussion at the Digital Media and Learning conference to publicly compare notes with the talented creators behind several other web-based communities for learning, tinkering, and remixing with code, including Scratch, Studio Sketchpad, Kodu, and AppJet:
"Building four communities for learning, tinkering, and remixing with code"
Sketchpad has been cited in several academic publications.
- Charao, A., Solórzano, A. L., & Matiuzzi, P. Programação Criativa e Colaborativa no Ensino Médio: uma Experiência com Studio Sketchpad. Anais do Workshop de Informática na Escola. Vol. 23. No. 1. 2017.
- Roberts, C., et al. Educational design of live coding environments for the browser. Journal of Music, Technology & Education 9.1 (2016): 95-116.
- Correia H., Leitão A.M. (2015) Combining Processing with Racket. In: Sierra-Rodríguez JL., Leal JP., Simões A. (eds) Languages, Applications and Technologies. SLATE 2015. Communications in Computer and Information Science, vol 563. Springer, Cham
- Goldman, M. (2012). Software development with real-time collaborative editing (Doctoral dissertation, Massachusetts Institute of Technology).
- Monroy-Hernández, A. (2012). Designing for remixing: Supporting an online community of amateur creators (Doctoral dissertation, Massachusetts Institute of Technology).
- Goldman, M., Little, G., and Miller, R. Real-time collaborative coding in a web IDE.) Proceedings of the 24th annual ACM symposium on User interface software and technology. ACM, 2011.
- Goldman, M., Little, G., and Miller, R.. Collabode: collaborative coding in the browser. Proceedings of the 4th international workshop on Cooperative and human aspects of software engineering. ACM, 2011.
- O’Hara, K. Pedagogical Explorations in Computational Perception for Performance. Third AAAI Symposium on Educational Advances in Artificial Intelligence. 2012.
- Lee, S., and Essl, G. Models and Opportunities for Networked Live Coding. Ann Arbor 1001: 48109-2121.
- Goldman, M. Role-based interfaces for collaborative software development. Proceedings of the 24th annual ACM symposium adjunct on User interface software and technology. ACM, 2011.
- Fricker, P., Girot, C., and Munkel, G. How to Teach 'New Tools' in Landscape Architecture in the Digital Overload. (2013).
- Kuryanovich, E., et al. Complexity from Simplicity. HTML5 Games Most Wanted. Apress, 2012. 15-30.
A small piece of the future has arrived. @studiosketchpad's amazing http://www.sketchpad.cc = #Processing.js + Etherpad.
— Golan Levin 🇺🇦 (@golan) October 1, 2010
I'm touring @studiosketchpad today and I'm extremely impressed. Will be using it at #UCLA this quarter to teach #Processing / @processingjs
— Casey REAS (@REAS) March 28, 2011
@studiosketchpad Sharing homework on sketchpad today was amazing! Thanks so much :)
— Don Miller (@nocarrier) September 12, 2011
An interactive IDE for building Processing.js sketches: http://sketchpad.cc
— John Resig (@jeresig) July 8, 2010
Posts
Blog posts about Sketchpad, circa 2010-2015. Hover for previews.- Building on other sketches licensed under CC-BY-SA
- Etherpad + Processing = Sketchpad. The studio is now open.
- The as yet undreamt of things that will be displayed
- Building on other sketches licensed under CC-BY-SA
- Johan's waves
- Sketchpad hosts images
- Sketchpad's first game
- ashhh
- Welcome, USU!
- Clone your own
- Fork it, fix it, report back
- Code beautiful on a sunny day
- Fancy footerwork
- More sketches from USU
- Mozilla Labs night talk, abbreviated
- Sketch snapshots
- Untitled, by anonymous
- Swim - the game
- Super Disco Sketchin' - It's all about the process
- Forget UserVoice and GetSatisfaction. Send me your feature requests through YouTube
- Toss that sketch over the wall
- Unlocking compliments with Google Translate
- What I cannot create, I do not understand
- MiniSketches
- Inspired by a deck of cards
- Building four communities for learning, tinkering, and remixing with code
- Sketchcasting - Next-generation screencasting for code
- Gartner thinks Sketchpad is cool
- Tidying up
- Sketch Anywhere
- P5-for-5
- Libraries, finally!
- Multi-file sketches
While I designed it for people to play with in their free time, Sketchpad has been used in formal educational settings in over 50 universities, high schools, and programming workshops around the world. I compiled a set of classroom-specific activities and practices and features to provide additional teacher controls, which helps to make this work well.
- UCLA DMA
- Google Cambridge
- RISD D+M
- NYU / Tisch
- CUNY / CityTech
- Stanford Splash!
- UIUC
- NYC College of Technology
- Google Kirkland
- Emerson College
- RISD Design
- Gray Area Foundation
- DePaul University
- Workshop Barcelona
- Friends Central School
- CoderDojo Dartmouth
- Lowell High School
- City of London School for Boys
- Oficinas Turing
- University of Lisbon
- CoderDojo Greenville
- Duke University
- RISD: Make Play Think
- James Allen's Girls' School
- Bard College
- TAFE Sydney Institute
- Seneca CDOT
- Wellesley High School
- Sarah Lawrence College
- University of Saskatchewan
- University of Illinois
- London Knowledge Lab
- KU Leuven
- Perth College
- Brooklyn College
- Perth College
- UC Davis
- KSU Poly
- Seoul National University
- Université Paris-Est
- University Toulouse
My Tweets about Sketchpad