This sequence of tutorials was produced by the Processing Foundation as a part of the Hour of Code™, a nationwide initiative by Code.org to introduce students to computer programming. The program launched during Computer Science Education Week, 9-15 December 2013 with the goal of giving millions of students the opportunity to explore coding as a way of thinking and making.

Our contribution uses Processing, a programming platform designed to bring programming to visual arts communities and to bring technical fields closer to the visual arts. Processing is used to teach programming principles within the context of visual media. The Processing software is free to download and is open source. Visit the Processing website to download it and learn more.


Daniel Shiffman wrote and performed the programming tutorials and co-produced the project. Scott Garner led the web development and media synchronization. Jesse Chorng shot and edited the video with help from Graham Mooney. Scott Murray contributed to the web development and created the landing page. Casey Reas created the example code and co-produced the project.

Featured Projects


This site was built using Jekyll and is hosted by GitHub Pages. Code sharing is handled by GitHub Gist and videos are hosted on Vimeo. The basic foundation of the site was generated using Initialzr, which provided a template based on HTML5 Boilerplate, Bootstrap and Modernizr.

This site relies heavily on open Javascript frameworks and technologies, including Ace for code editing, Popcorn.js for media-driven events and Processing.js for in-browser execution of Processing code. Additional utility libraries and plugins include jQuery, Spectrum, FileSaver.js and the Bootstrap Hover Dropdown Plugin.


This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. The individual frameworks, libraries, and other tools cited above may be licensed separately, under other licenses.

Creative Commons License