EDPX 2100 Coding

Spring 2016
MW 9:00-11:50 Sturm 434
Dan Wilcox, Shwayder 215, danomatika.com
Email: daniel.wilcox[at]du[dot]edu
Voice: 412 980-7081
Office hours: T 2-4pm & by appointment

Syllabus

EDPX 2100 Syllabus

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

Pirate Pads:

Examples from class:

Schedule

3/21

Course intro

Brief history of interaction

Drawing exercise

Introduction to Processing
Overview of Processing as a tool

Programming and iteration
Managing expectation

Brief History on Interactivity

Sol Lewitt Wall Drawing

Programming and Iteration

Homework

Download and install Processing

Read Processing book Preface & Ch. 1 (PDF)

3/23

Cancelled due to weather

Homework

Read Processing book Ch. 2-4 (PDF)

Look through Processing's built in examples and pick out a favorite to share in class.
File->Examples, open sketches, & hit the Play button to run.

3/28

Processing syntax, expressions, statements, & comments

Debugging

Sketch

Drawing shapes point(), line()
triangle(), quad()
rect(), ellipse()
arc()

background(), fill(), stroke()
strokeWeight(), strokeCap(), strokeJoin()

curve()
bezier()

Tweak mode

Variables
Math

In class exercises

  1. Create a sketch with a line, rect, & ellipse
  2. Create lines of differing weights, fade out lines over time
  3. Alternate Bezier and straight lines in a continuous 5 segment line

Homework

Exercise 1: Face

3/30

Exercise 1 due

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

Conditionals
if and if else
logical operators
AND (&&), OR (||), NOT (!)

Loops
for loop

In class exercises

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

  1. Create a custom shape using beginShape()
  2. Create a sketch that draws rects but can draw circles instead when a variable is changed
  3. Create multiple shapes in a grid, alternating circles & ellipses

Homework

Read Processing book Ch. 5

Exercise 2: Wallpaper

4/04

Exercise 2 due

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

Response
redrawing: setup & draw()
background(x, alpha)
fill() and rect

Mouse interactions
mouseX, mouseyY
pmouseX, pmouseY
mousePressed, mouseButton

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

map()

Assign Project 1 (due 4/20)

In class exercises

  1. Create a simple drawing sketch using the mouse
  2. Create a sketch that moves an object around the screen using the keyboard
  3. Use map() to convert the mouse position to a new range & control the position of an object

Homework

Read Processing book Ch. 7

Processing.org tutorial: Anatomy of a Program

4/06

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

Saving images

String

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

Shape
SVG
PShape, loadShape(), shape()

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. 8

4/11

Motion
framerate
speed & direction
tweening
distance
easing

Timer
millis()

Math
random() & randomSeed()
lerp()
norm()
sin(), cos()
noise()

In class exercises

  1. Use the position of the mouse to have a shape follow it
  2. Use a timestamp to control periodic movement
  3. Use sin(), cos(), or noise() to make the ellipse move in a periodic manner

Homework

Read Processing book Ch. 9

Prepare Project 1 prototype

4/13

Project 1 prototypes due

Math continued
norm()
sin(), cos()
noise()

Functions
parameters
returning values
overloading

Event handlers
mousePressed(), mouseReleased()
keyPressed(), keyReleased()

In class exercises

  1. Write a function to use with a for loop to put ellipses randomly on the screen given a number argument
  2. Create a version that will draw different shapes based on a passed parameter. Overload the function to allow for either type of function call.
  3. Use a mouse or key event function to control your sketch.

Homework

Read Processing book Ch. 11

4/18

Arrays

Work on projects

4/20

Work day

Individual meetings in class

4/25: Project 1

Project 1 due

Project 1

Homework

Read Processing book Ch. 7

4/27

Transformations

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

Homework

Processing.org tutorial: 2D Transformations

Read Processing book Ch. 10

Exercise 3: Mandala

5/02

Exercise 3 due

Assign Project 2 (due on 5/28)

Classes and object oriented programming

Objects
class
constructors
instances

methods
fields

separate files (aka Tabs)
automatic inclusion

Homework

Exercise 4: Objects

Processing.org tutorial: Objects

5/04

ArrayList

Objects continued
classes within classes
class inheritance

Homework

Read Processing book Ch. 12

5/09

Exercise 4 due

File import and export

Images
SVG
OBJ

Text Files
CSV
XML
JSON

Useful Tutorial by Daniel Shiffman: Data

Homework

Till Nagel online tutorial: Processing RSS feeds

Exercise 5: Poetry

5/11

Libraries
Interface libraries

ControlP5

Sound

Homework

Prepare Project 2 concept

5/16

Exercise 5 due
Project 2 concept due

Planning larger projects

Simple Games
Structuring for games

Game State Examples:

Working Game Examples:

Homework

Processing Vector tutorial

5/18

Vectors

Vector Maths - Unity Official Tutorials

Gravity (zip): gravity simulation using PVectors for position, velocity, & acceleration

Bounding boxes
Creating interfaces in Processing

3d space
Working in 3d

5/23

Work day

Individual meetings in class

5/25

Work day

Individual meetings in class

5/28: Project 2

S 10:00-11:50 Sturm 434

Final critique (may take an extra ~30-45 mins)

Project 2 due