EDPX 2100 Coding

Winter 2016
TR 1:00-3:50 Sturm 434
Dan Wilcox, Shwayder 215, danomatika.com
Email: daniel.wilcox[at]du[dot]edu
Voice: 412 980-7081
Office hours: T 10am-12pm & by appointment

Syllabus

EDPX 2100 Syllabus

EDPX 2100 All Examples from Class

Links

Processing: processing.org
Download, reference, tutorials, etc

Pirate Pads:

• EDPX 2100 A
• EDPX 2100 B

Schedule

1/5

Introduction to Interactive media
Some history of interaction
Overview of Processing as a tool
Programming and iteration

Introduction to Processing

Sketches

setup() & draw()

Brief History on Interactivity

• ELIZA - Joseph Weizenbaum
• Ivan Sutherland - Sketchpad
• Mother of All Demos - Douglas Engelbart
• Videoplace, Responsive Environment - Myron Kruger
• Steve Jobs visits Xerox Palo Alto Research Center in 1979 (dramatization)
• Colossal Adventure
• Hypercard
  • Myst Mac Version Leisurely Play Through Part 1
  • The Making of Myst - Pt. 2

Sol Lewitt Wall Drawings

From Here Are the Instructions for Sol LeWitt’s 1971 Wall Drawing for the School of the MFA Boston:

Sol LeWitt apparently did not enjoy public speaking so when he stopped by the School of the Museum of Fine Arts, Boston, in 1971, as a visiting artist and lecturer, he proposed making a drawing with the students instead of giving a lecture.

Wall Drawings Boston Museum - Sol Lewitt 1971

Programming and Iteration

• Learn to think like a computer
• You must come to grips with the process of iteration: make a thing, make it better
• Programming is failure followed by success
• Don’t take it personally
• Small victories will be crucial

Homework

Read Processing book Preface & Ch. 1 (PDF)

1/7

Processing syntax, comments, expressions, & statements

Using print() for debugging

Tweak mode

Drawing shapes point(), line()
rect(), ellipse()

background(), fill(), stroke()
strokeWeight(), smooth()

bezier()

Variables
Typed vs. Untyped languages

In class exercises

1. Create lines of differing weights
2. Fade out lines over time
3. Create Bezier curves
4. Alternate Bezier and straight lines in a continuous 5 segment line

Homework

Read Processing book Ch. 2-4 (PDF)

Look through Processing's built in examples and pick out a favorite to share in class.

1/12

Planning, flowcharting, and pseudo code
Top down vs. bottom up
Using pseudo code for planning
Debugging and testing

Conditionals
if and if else logical operators AND, OR, NOT

In class exercises

Pseudocode solutions for some simple problems. Take from pseudocode to Processing.

1. Create simple shapes: ellipses and rectangles
2. Add looping to create multiple shapes in a grid
3. Vary the color of the shapes in the loops
4. Create custom shapes using beginShape() and substitute for the above shapes
5. Change color depending on location on the screen
6. Divide the screen into four regions

Homework

Read Processing book Ch. 5

1/14

Loops
for loop

Shapes
beginShape(), endShape()
vertex()
curveVertex()
bezierVertex()

Assign Project 1 (due 2/2)

Project 1 inspiration:

• Casey Reas' Process Compendium -> individual sketch output is found here
• Abandoned Art
• OpenProcessing.org
• Generative Art - Computers, Data, & Humanity

In class exercises

1. Create multiple shapes in a grid, alternating circles & ellipses
2. Vary the color of the shapes in the loops
3. Create custom shapes using beginShape() and substitute for the above shapes

Homework

Read Processing book Ch. 6

Processing.org tutorial: Anatomy of a Program

1/19

Images
PImage
loadImage(), image()
imageMode()

Strings

Text
Tools->Create Font
Pfont, loadFont(), textFont()
text()
textSize(), textLeading(), textAlign(), textWidth()

Motion
redrawing
background(x, alpha)
fill() and rect

In class exercises

1. Load in an image and place it on display window
2. Load an image with a transparent background over a background image
3. Load a font & use it to place some text on the screen

Homework

Read Processing book Ch. 7

1/21

Timer
millis()

Math
sin(), cos()
random()

Functions
parameters
returning values
overloading

Mouse interactions
mouseX, mouseyY
pmouseX, pmouseY
noCursor(), cursor()
mousePressed, mosueButton

In class exercises

1. Move an ellipse across the display horizontally and vertically
2. Use sin or cos to make the ellipse move in a periodic manner
3. Use random to create a variance in the movement of the ellipse in the previous exercise Use sin() and cos() together to create a circular movement
4. Write a function to use with a for loop to put ellipses randomly on the screen given a number argument
5. Create a version that will draw different shapes based on a passed parameter. Overload the function to allow for either type of function call.

Homework

Read Processing book Ch. 8

1/26

Project 1 prototypes due, deliverables:

• 1 sketch demonstrating you have formulated your set of 3 rules and have a basic working version
• at least 1 image literally sketching out the ideas behind your 3 rules

Bring a USB key or external hard drive you can use to transfer a copy of your sketch to the lab computer at the front of the room (the one I work off of). I will make a folder on the desktop for the class that you can copy your sketch into it. You should do this at the beginning of class, as soon as you come in.

Mouse interactions, continued
mousePressed()
mouseReleased()

Keyboard interactions
key, keyPressed, char
CODED, keyCode
UP, DOWN, LEFT, RIGHT

Events
event handlers

Saving images

Motion continued
distance
easing
speed

lerp()
norm()
map()

In class exercises

1. Use the position of the mouse to have a shape follow it
2. Create a sketch to display typed text using an event handler
3. Use the arrow keys to control the position of an ellipse on the display. Use a function to control all movement.

Homework

Read Processing book Ch. 10

1/28

Arrays

Animation

Work on Projects

2/2

Cancelled due to weather

2/4

Project 1 due

Project 1 presentations

2/9

Classes and object oriented programming

Objects
class
constructors
instances

methods
fields

separate files (aka Tabs)
automatic inclusion

In class demo

sketch progression from simple through objects

Objects.zip

Homework

Processing.org tutorial: Objects

2/11

Transformations

Matrix manipulation
translate(), rotate(), scale()
pushMatrix(), popMatrix()

Homework

Read Processing book Ch. 7

Processing.org tutorial: 2D Transformations

2/16

Image filtering
Blends

Pixel level manipulation

Color

Homework

Processing.org tutorial: Images and Pixels

2/18

Assign Project 2 (due on 3/11)

File import and export

Images
SVG
OBJ

Text Files XML
CSV
JSON

Useful Tutorial by Daniel Shiffman: Data

Homework

Till Nagel online tutorial: Processing RSS feeds

2/23

Libraries
Interface libraries

Creating interfaces in Processing

ControlP5

Homework

Start planning what you want to do for Project 2. Write up a basic outline, at least 1 page in length, on both your concept and how you are thinking about implementing it. Include relevant images, sketchbook photos, and links.

Think of this is a succint project proposal and I'm your project manager. Provide this proposal as a PDF you will copy onto the presentation computer at the beginning of class on 2/25.

2/25

Project 2: Concept due

Planning larger projects
Multiple objects

Example: Shapes

Basics of sound
What is sound?
Sound libraries

Sound library

3/1

Sound continued

3d space
Working in 3d

3/3

Vectors

Vector Maths - Unity Official Tutorials
Processing Vector tutorial

ArrayLists
HashMaps

Simple Games
Structuring for games

BreakoutStarter - Leamon Andres
asteroids_v2 - Lambert Wang -> also on Openprocessing.org

We lost 1 work/meeting day due to class being cancelled on 2/2 due to weather. As such, we are skipping the class covering Data Visualization in detail. If interested in Data Viz for your project, I suggest checking out the following tutorial to get started:

Jer Thorp online tutorial: Your Random Numbers

3/8

Work day

Individual meetings in class

3/10

No class due to finals. I will be in my office from 12-4pm.

3/11: Final Session

F 2:00-3:50 Sturm 434

Project 2 due