WEEK 9: Creative Programming 1
(March 15-19)

To Do This Week:

Explore Canvas Drawing with JavaScript

Video Lectures:

Zoom Class

Create a Drawing/Animation with Canvas

Copy into a new file the source code from this starter file: canvas face. With your pod, change the JavaScript to create your own face animation. See below for some examples from past students.

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018Mini-projects Spring 2019

Zoom Workshop:

Creative Programming ideas
Final Project ideas


Map Projects
View projects


Audio/Video and JavaScript

video-audio-javascript zip


Using Math.random


function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;

let x = getRandomInt(0, 20);

Interactive Tools

HTML5 Geolocation

 HTML5 Audio/Video

Data Visualization


JavaScript 2D and 3D Animation

sketch.js : finger drawing on canvas

p5js.org/ : processing > javascript for fun and art, creative programming

three.js – library works with WebGL, a Javascript API for 3D animation 

HTML5 Games:

W3schools Game Demos

Student Projects:

Other Resources:

Intro to Canvas:

Canvas Element
Javascript Drawing and Animation

Canvas reference

drawing a circle: arc();

triangles canvas script

canvas face

Timing EventsSetTimeoutSetInterval