Ari Bader-Natal

Studio Sketchpad (2010-now)

Processing on Etherpad

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.
Sketchpad has even been cited in a number of academic publications:
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