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 All Examples from Class
Links
Processing: processing.org
Download, reference, tutorials, etc
Pirate Pads:
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
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
- Create lines of differing weights
- Fade out lines over time
- Create Bezier curves
- 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.
- Create simple shapes: ellipses and rectangles
- Add looping to create multiple shapes in a grid
- Vary the color of the shapes in the loops
- Create custom shapes using beginShape() and substitute for the above shapes
- Change color depending on location on the screen
- 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
- Create multiple shapes in a grid, alternating circles & ellipses
- Vary the color of the shapes in the loops
- 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
- Load in an image and place it on display window
- Load an image with a transparent background over a background image
- 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
- Move an ellipse across the display horizontally and vertically
- Use sin or cos to make the ellipse move in a periodic manner
- 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
- Write a function to use with a for loop to put ellipses randomly on the screen given a number argument
- 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
- Use the position of the mouse to have a shape follow it
- Create a sketch to display typed text using an event handler
- 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
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