Computational Notebooks for Creative Coding Education

Project: Research

View graph of relations


The proper medium for explanatory materials relating to programming instruction is a long standing problem in computer science and procedural literacy education. Traditionally educators are forced to document code examples and demos in one of two ways: either via comments in source-code, which are limited to only plain text (not even allowing images or hyperlinks in most environments); or by creating separate documentation resources, which are both inconvenient, as students must leave the coding environment to access them, and brittle, as code and its documentation are regularly found to be out of sync. Students are then in a similar position when they create projects, needing to split code and other documentary materials into multiple locations, which increases organizational and cognitive load.Computational notebooks are a novel document format that directly address this problem, functioning as a complete documentation archive that can includes live code, text, images, animations, video and other web content, on a single page accessible via a standard web browser URL (either publicly or with access control). For creative coding pedagogy, the fact that code and explanation can be tightly integrated in the same document, while leveraging the full range of multimedia available on the web, is a substantial win.This grant explores the use of this new context to teach creative coding, specifically via the open-source Observable platform ( Unlike prior notebook frameworks (e.g., Juptyer notebooks), the new Observable framework uses exactly the open, standard languages that we teach in introductory classes at the School of Creative Media, specifically JavaScript, CSS, SVG and HTML5, and it allows easy inclusion of other web-friendly technologies, such as p5.js. It is free for educational use and supports powerful version control and collaborative editing to allow individuals and student groups to work together in a dynamic “live” environment, all without any download required.


Project number6000779
Grant typeTDG(CityU)
Effective start/end date1/01/22 → …