A free-to-use classrooms system for p5.js

Zach Rispoli
2 min readAug 29, 2017

--

This summer I worked under the mentorship of Cassie Tarakajian to contribute to the p5.js Web Editor through Google Summer of Code.

The p5.js Web Editor, a free browser-based coding environment for p5.js.

My main project was to create a system for instructors that are using p5.js to teach classes. This system is built-in to the p5.js Web Editor and makes it easy to:

  • keep track of all the projects students are creating,
  • organize all assignments, links, and other resources in once place that all students can access, and
  • create a gallery page with a permanent URL where selected classwork can be viewed publicly.

A system like this is especially important for classroom settings where it might be too expensive or time-consuming to host a whole Wordpress site or other blog/website to document and manage the class as it is taught.

An early version of the classrooms system.

As a novice-intermediate web developer, getting over the first hurdles of using modern JavaScript was tough. This was also my first time properly contributing to an open-source project where I couldn’t just automagically push code with one or two other developers—p5.js is a proper project, and I had to quickly pick up on how to make pull requests and communicate with other contributors online. Cassie’s mentorship was hugely helpful for me to get through the steep learning curve of everything required to work on a modern open-source project.

Another early view of the classrooms system.

The classrooms system is just now becoming stable enough to test in a real classroom setting, and it will be used in a few classes here at Carnegie Mellon (with me closely monitoring how the new system is working and most likely frantically fixing bugs as they arise).

I hope that everyone has fun with my fancy new feature!

Other things I worked on this summer include several smaller bug fixes and improvements to the coding IDE. Also in progress is a thumbnail generator for sketches which will hopefully make the classroom pages much more fun to look at.

Error highlighting!!

--

--