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:

Maps
Creative Programming ideas
Final Project ideas


Notes:

Map Projects
View projects


AUDIO/VIDEO

Audio/Video and JavaScript

video-audio-javascript
video-audio-javascript zip

 

Using Math.random

GENERATIVE/RANDOM – 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

d3js.org

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