RISD DM2132 Code as Medium

Evelyn Eastmond eeastmon@risd.edu
Studio: Monday 8am - 1pm
Room: CIT, Room 302

TA: Tim Wang twang01@risd.edu
Office Hours: Wednesday 1pm - 3pm
Room: CIT 4th floor, windows

| | | | |

1: Basic Drawing

Example 1-1 - basic drawing

2: Setup/Draw, Scope

Example 2-1 - setup and draw (no graphical output, check the console)
Example 2-2 - variables and scope

3: Mouse Interaction

Example 3-1 - change background on mouse pressed
Example 3-2 - change background on mouse released
Example 3-3 - add rect on mouse released
Example 3-4 - mouse dragged vs mouse moved
Example 3-5 - fill dependent on mouse pressed
Example 3-6 - fill dependent on mouse button

4: Keyboard Interaction

Example 4-1 - set position based on keyCode
Example 4-2 - set fill based on key 'a', 'b' or 'c'
Example 4-3 - keyIsPressed vs keyPressed()
Example 4-4 - draw line if key pressed

5: For Loops

Example 5-1 - draw 4 lines
Example 5-2 - draw 4 lines again! with a for loop
Example 5-3 - draw many ellipses with nested for loops

6: Conditionals (if) and Logic Operators

Example 6-1 - check mouse location (halves)
Example 6-2 - check mouse location (thirds)
Example 6-3 - check mouse location using OR
Example 6-4 - check mouse location (box)

7: Drawing Web Images

(some image links may not work)

Example 7-1 - render a web image following the mouse
Example 7-2 - render a web image as a background
Example 7-3 - render two web images, one very large

8: Drawing Text

Example 8-1 - render text and set font, fill/stroke, size, style
Example 8-2 - render text using a Google Font

Example 9-1 - looping motion
Example 9-2 - slowly going back and forth
Example 9-3 - bouncing color
Example 9-4 - bouncing size
Example 9-5 - bouncing size using sine
Example 9-6 - tweening
Example 9-7 - random motion

10: Transforms

Transforms diagram - translate, rotate, scale
Example 10-1 - translate
Example 10-2 - translate accumulating with motion
Example 10-3 - scale
Example 10-4 - rotate
Example 10-5 - order of operations, rotate shape around center
Example 10-6 - push() and pop() transform

11 : Map, constrain, distance

Example 11-1 - mousex and mousey
Example 11-2 - map and constrain
Example 11-3 - distance

12: Functions

Example 12-1 - using functions to avoid repetition and help reuse code
Example 12-2 - functions with parameters
Example 12-3 - functions that return useful values

Example 13-1 - simple array example
Example 13-2 - simple array example (alternate initialization using push)
Example 13-3 - simple array example (alternate single line initialization)
Example 13-4 - using a for loop to initialize
Example 13-5 - using a for loop to draw (line height)
Example 13-6 - using a for loop to draw (strokeWeight)
Example 13-7 - use case: dealing with many moving parts
Example 13-8 - using multiple arrays

These examples require a server to run, for security reasons

Example 14-1 - getting the color at a single pixel
Example 14-2 - looping on an array of pixels using loadPixels()

15: Touch Interaction

Try these on a touch-enabled device such as a smartphone or tablet!

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

16: Classes and Objects

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

17: Processing to p5.js

Converting between Processing-JS and Processing tutorial
Example 17-1 - Processing > Examples > Basics > Form > Bezier
Example 17-2 - Processing > Examples > Topics > Interaction > Follow3

18: HTML manipulation with p5.dom.js

Example 18-1 - creating other HTML elements
Example 18-2 - creating other HTML elements, with link
Example 18-3 - creating HTML images
Example 18-4 - using element specific mouse listeners: mouseOver and mouseOut (try mousing over and out of canvas)
Example 18-5 - using element specific mouse listeners: mousePressed (try clicking image then pressing key)
Example 18-6 - adding CSS style to HTML elements

19: 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 19-1 - play a sound using Buzz
Example 19-2 - play a sound using Buzz and also draw an image using p5.js
Example 19-3 - loop a sound and stop a sound using Buzz

20: 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 20-1 - Preloading large media files
Example 20-2 - Basic JSON objects, accessing key/value pairs
Example 20-3 - Loading JSON objects from an external, local file
Example 20-4 - Loading JSON objects from an external, remote file on another server
Example 20-5 - Loading strings from an external file