Studio Sketchpad (2010-now)

Processing on Etherpad

sketchpad.cc

@studiosketchpad ·

Blog RSS ·

Gallery 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: Screenshot of Sketchpad

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

Sketchpad Blog posts

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