Interactive Illustrations on HTML5 Canvas: A Creative Introduction to Computer Programming

Abstract

In the first assignment of a class entitled “Creative Coding”, students are asked to convert a pre-existing 2D illustration into an interactive digital interpretation, as an introduction to the general elements of coding and computer graphics in 2D environments. The majority of students taking this class have never coded in their lives, turning this assignment into an ideal introduction to principles of computer programming. Javascript, a very accessible and forgiving scripting language, is used to study the visual properties of real time graphic development on the HTML5 Canvas Object on any capable browser. Using a basic coding shell and any text editor, students learn about variables, coordinates, elemental shapes, quadratic and Bézier curves, RGB color definitions, linear and radial gradients, random elements, etc., in a new approach to drawing through code, that questions and challenges traditional analog illustration paradigms.