The code from an "Mathematical Patterns" tutorial given at MIT on July 28, 2013. Part of the MIT HSSP 2013 Program course Computer Programming and Interactive Graphics.
Here's the code from the tutorial:
Starter Code (in JSBin, in GitHub) you can start here to follow along.
Grid of Circles (in JSBin, in GitHub) you can start here to follow along.
Changing Colors with Waves (in JSBin, in GitHub)
Here's a more elaborate example demonstrating where you can take these concepts:
(run full screen, edit in JSBin, in GitHub)
Content of the tutorial:
- Nested for loops
- The m by n matrix concept
- Declaring many variables in one statement
- Strategies for writing code: first write the overall structure, then fill in details
- Drawing a grid of circles
- Computing (x, y) from (i, j)
- Drawing circles with the HTML5 Canvas API
- requestAnimationFrame
- Why requestAnimationFrame is better than setInterval
- Alternative syntax for function definition
var draw = function(){}vs.function draw(){}
- Introducing a
timevariable - Defining animated parametric (x, y) patterns based on (u, v)
- Assigning size as a function of (u, v, time)
- Using JSBin to publish your programs in comments
- Using stroke to draw outlines
- Setting the color to be a function of size
Check out the work done by students based on the tutorial:
DNA-like thing by YouTube user BK1Music (run full screen, edit in JSFiddle, in GitHub)
