Intro to Creative Programming

RISD Digital+Media, Fall 2013

Week 1: 9/11

0: Basic Drawing

Example 0 - basic drawing [view code] [download]
Sample command sheet

Week 2: 9/18

1: For Loops

Example 1-0 - draw 4 lines [view code] [download]
Example 1-1 - draw 4 lines again! with a for loop [view code] [download]
Example 1-2 - draw many ellipses with nested for loops [view code] [download]

2: Setup/Draw, MouseX, MouseY, Map/Constrain

Example 2-0 - setup and draw [view code] [download]
Example 2-1 - variables and scope [view code] [download]
Example 2-2 - mousex and mousey [view code] [download]
Example 2-3 - map and constrain [view code] [download]

Week 3: 9/25

3: Conditionals (if) and Logic Operators

Example 3-0 - check mouse location (halves) [view code] [download]
Example 3-1 - check mouse location (thirds) [view code] [download]
Example 3-2 - check mouse location using OR [view code] [download]
Example 3-3 - check mouse location (box) [view code] [download]

4: Mouse Interaction

Example 4-0 - fill dependent on mouse pressed [view code] [download]
Example 4-1 - fill dependent on mouse button [view code] [download]
Example 4-2 - change background on mouse pressed [view code] [download]
Example 4-3 - change background on mouse released [view code] [download]
Example 4-4 - add rect on mouse released [view code] [download]
Example 4-5 - mouse dragged vs mouse moved [view code] [download]

5: Keyboard Interaction

Example 5-0 - draw line if key pressed [view code] [download]
Example 5-1 - isKeyPressed() vs keyPressed() [view code] [download]
Example 5-2 - set fill based on key [view code] [download]
Example 5-3 - set position based on keyCode [view code] [download]

6: Distance

Example 6-0 - dist() [view code] [download]

7: Drawing Images

Example 7-0 - render an image following the mouse [view code] [download]
Example 7-1 - render an image as a background [view code] [download]
Example 7-2 - render two images, load an image from a URL [view code] [download]

8: Drawing Text

Example 8-0 - render text and set font, fill/stroke, size, style [view code] [download]
Example 8-1 - render text using a Google Font [view code] [download]

Week 4: 10/02

9: Motion

Example 9-0 - looping motion [view code] [download]
Example 9-1 - bouncing motion [view code] [download]
Example 9-2 - bouncing color [view code] [download]
Example 9-3 - bouncing size [view code] [download]
Example 9-4 - bouncing size using sine [view code] [download]
Example 9-5 - tweening [view code] [download]
Example 9-6 - random motion [view code] [download]

10: Transforms

Transforms diagram - translate, rotate, scale
Example 10-0 - translate [view code] [download]
Example 10-1 - translate accumulating with motion [view code] [download]
Example 10-2 - scale [view code] [download]
Example 10-3 - rotate [view code] [download]
Example 10-4 - order of operations, rotate shape around center [view code] [download]
Example 10-5 - pushMatrix() and popMatrix() [view code] [download]

11: Functions

Example 11-0 - using functions to avoid repetition and help reuse code [view code] [download]
Example 11-1 - functions with parameters [view code] [download]
Example 11-2 - functions that return useful values [view code] [download]

Week 5: 10/09

12: Arrays

Example 12-0 - use case: dealing with many moving parts [view code] [download]
Example 12-1 - simple array example [view code] [download]
Example 12-2 - simple array example (alternate initialization using push) [view code] [download]
Example 12-3 - simple array example (alternate single line initialization) [view code] [download]
Example 12-4 - using a for loop to initialize [view code] [download]
Example 12-5 - using a for loop to draw (line height) [view code] [download]
Example 12-6 - using a for loop to draw (strokeWeight) [view code] [download]
Example 12-7 - using multiple arrays [view code] [download]
Example 12-8 - rotating images [view code] [download]

13: Pixels*

(* These examples don't work on local installations)

Example 13-0 - getting the color at a single pixel [view code] [download]
Example 13-1 - image filters - looping on an array of pixels [view code] [download]

14: Touch Interaction
(Try these in a browser on a touch-enabled device such as a smartphone or tablet!)

Example 14-0 - detecting a single touch's location [view code] [download]
Example 14-1 - finger paint! (touch start, move and end events) [view code] [download]
Example 14-2 - multi-finger paint! (touch start, move and end events for multiple touches at a time) [view code] [download]
Example 14-3 - finger or mouse paint! (hooking behaviors up to both mouse and touch) [view code] [download]

Week 7: 10/23

15: Classes and Objects

Dan Shiffman, Introduction to OOP (Object Oriented Programming)
Example 15-0 - converting a moving ellipse into a class [view code] [download]
Example 15-1 - creating two instances of a class (two objects) [view code] [download]
Example 15-2 - another example of creating a class [view code] [download]
Example 15-3 - another example of two instances of a class (two objects) [view code] [download]
Example 15-4 - an array of objects [view code] [download]
Example 15-5 - one more example of a more complicated class [view code] [download]

16: Processing to ProcessingJS

Converting between Processing-JS and Processing tutorial
Example 16-0 - Processing > Examples > Basics > Form > Bezier [view Processing code] [view ProcessingJS code] [download]
Example 16-1 - Processing > Examples > Topics > Interaction > Follow3 [view Processing code] [view ProcessingJS code] [download]

Week 8: 11/06

Check the HTML/DOM/CSS section in the Resources page for links to more examples and tutorials

17: HTML manipulation

Example 17-0 - creating other HTML elements [view code] [download]
Example 17-1 - creating other HTML elements, with linnk [view code] [download]
Example 17-2 - creating HTML images[view code] [download]
Example 17-3 - using element specific mouse listeners: mouseOver and mouseOut (try mousing over and out of canvas) [view code] [download]
Example 17-4 - using element specific mouse listeners: mousePressed (try clicking image then pressing key) [view code] [download]
Example 17-5 - creating and drawing to more than one canvas [view code] [download]
Example 17-6 - drawing to multiple canvases using additional functions [view code] [download]
Example 17-7 - using find (try pressing a key) [view code] [download]
Example 17-8 - adding style to HTML elements [view code] [download]

Week 9: 10/30

18: Third-party JS Libraries: Buzz

Check the Creative Coding JS Libraries in the Resources page for links to some creative coding JS libraries

A good JS library is easy to download and has good documentation.

To use a third-party JS library:

Find a library with proper download links and documentation
Download the library .js file and put in your sketch folder
Include the library at the top of your .html file
Use the code in your setup() function or event handler functions

How to use the Buzz audio library:

Example 18-0 - play a sound using Buzz [view code] [download]
Example 18-1 - play a sound using Buzz and also draw an image using ProcessingJS [view code] [download]
Example 18-2 - loop a sound and stop a sound using Buzz[view code] [download]

Week 10: 11/13

19: Asynchronous loading and JSON

To run these examples locally on your machine, you must install a local server.
Instructions on how to install/run a local server.

Example 19-0 - Preloading large media files [view code] [download]
Example 19-1 - Basic JSON objects, accessing key/value pairs [view code] [download]
Example 19-2 - Loading JSON objects from an external, local file [view code] [download]
Example 19-3 - Loading JSON objects from an external, remote file on another server [view code] [download]
Example 19-4 - Loading strings from an external file [view code] [download]