Google Summer of Code wrap-up post: Pencil Code

Pencil Code is a collaborative programming site for art, music and creating games. It is also a place to experiment with mathematical functions, geometry, graphing, webpages, simulations and algorithms. Pencil Code had three Google Summer of Code students in 2015. You can read more about their project successes below.

As we return to school and look around Pencil Code in preparation for classes this fall, there are quite a few improvements created by our Google Summer of Code (GSoC) students. The first thing you see when you log in — icons everywhere! But better yet, if you have saved the program recently, the icon will be a screenshot of the program's output. This change will help students and teachers quickly identify saved projects, and will help people find interesting projects they want to share.

The icon implementation was done by Xinan Liu, a student at Singapore National University. He rewrote several bits of the Pencil Code server to support the icons, and then on the client side, he integrated the very cool html2canvas library to create the screenshots.

Xinan also contributed quite a bit beyond this project. He refactored our node.js-based build to switch from require.js to browserify, and he has been contributing to other sharing and scaling features on Pencil Code, helping other non-GSoC contributors get up to speed and reviewing their pull requests. We're looking forward to Xinan's continuing involvement and contributions to our little open source community.

The next contribution was by IIIT Hyderabad student Saksham Aggarwal. Saksham has implemented an HTML block mode for the Droplet block editor, which means that teachers can introduce beginners to HTML syntax using a drag-and-drop interface. And as usual with Droplet, you can toggle between blocks and text at any time. Saksham is also working on a similar Droplet-based editor for CSS syntax. The visual HTML syntax editor is a very accessible way to see and work with HTML syntax without having to type every bracket. And yet, magically, it does not hide the syntax - by toggling into text, you can work directly with traditional code. It is fully authentic, but highly accessible. You can read a paper about Saksham's work here.

The final project was a collaboration between GSoC student Jeremy Ruten from the University of Saskatchewan, and two of our summer students Amanda Boss from Harvard and Cali Stenson from Wellesley. They created an incredibly ambitious project to implement a "rewindable" debugger in Pencil Code. Although it is not quite ready for production yet, we are already using pieces of it in Pencil Code. You will see the debugger in coming months! For examples of how it transforms code, you can check out Jeremy, Amanda and Cali's writeup of their debugging work.

Did I mention that the three of them are students? And that they built this rewindable debugger over just one summer!? They made improvements that will make a real difference as we use Pencil Code to bring computer science to the next generation of students.

We'd like you to participate!

If you are interested in bringing some of this cool work into your classroom, join our discussion group by signing up at teach.pencilcode.net. We have teachers from elementary school to college, from Texas to Singapore. And if you'd like to make an open source contribution, check out ideas.pencilcode.net for project ideas, and join the teaching discussion group — also an area where our open source contributors hang out.

We are grateful to Google for supporting our summer open source program with GSoC. We hope the summer was as interesting for our students as it was productive for our project. We look forward to our students' continued involvement in the Pencil Code community.

By David Bau, Organization Administrator for Pencil Code