Introduction to Computational Media Syllabus

Liesje Hodgson

• Thursday, 6:30pm - 9:00pm, Room 445
• liesje@nyu.edu
• Office Hours Sign Up
• General ICM Page: includes links to helpful resources, work from other sections, and instructions on how to upload your homework.
• Homework Wiki: This is where you post links to your weekly assignments.
• Main Processing page
• book: www.learningprocessing.com
• Other Processing books available
• Processing site tutorials

Week 1 -- Introduction and Drawing -- Jan 6

• Why are we here? What is computational media? What is programming? What is it good for? What kinds of programming languages are there?
• Algorithmic Thinking
• What is Processing? Why Processing?
• Server-side vs. client programming
• Things made with Processing: ProcessingLinks
• Drawing with numbers
  • Coordinate Systems
  • Shapes
  • Color
• Code
  • Processing reference
  • Running your application
  • Exporting: applet, application, android, javascript
• Related Reading
  • Chapters 1-2 from Learning Processing.
  • Chapters 1-3 from Getting Started with Processing
• Downloading Processing
  • This semester we are going to use an alpha release of Processing 2.0. The advantage of this is that we are using the leading edge newest version of Processing which includes Javascript mode, better support for video, and many other features. The downside to using 2.0 is that it is new and somewhat unstable, we may experience more bugginess than with the existing 1.5.1 version. In addition, some changes made for Processing in 2.0 will result in differences in the reference and examples on the Processing web site, as well as in the various Processing books. Changes are documented on the Processing wiki. If you think you have found a bug or are confused by a syntax difference, send an e-mail to the google group.
  • Download Processing 2.0a4 Alpha (released 11/10/11): MACOSX, WINDOWS, LINUX
• Homework
  • Sign up for the ICM Google Group: https://groups.google.com/a/itp.nyu.edu/group/icm
  • Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes --arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() -- and the basic color functions -- background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use size() to specify the dimensions of your window.
  • Post a link to the homework wiki: ICM-Liesje-Hodgson-S12. Instructions for how to do so are here: Homework-upload-instructions
  • Examples: http://www.learningprocessing.com/examples/ -- take a look at Chapter 1 and 2 (3 if you are feeling ambitious).

Week 2 -- Animation -- Feb 2

• The flow: code blocks, setup, draw, and events: http://www.learningprocessing.com/examples/chapter-3/
• Variation: mouseX,mouseY
• Variables: Declare, Initialize, Use: http://www.learningprocessing.com/examples/chapter-4/
• Random
• Transformations
• Related Reading
  • Chapters 3-4 from Learning Processing.
  • Chapters 4-5 from Getting Started with Processing
• Homework
  • Create a animated application. You can continue to elaborate on last week's assignment or you can design something new. Use variables to change colors, grow and shrink your design, etc.

Week 3 -- Interaction -- Feb 9

• Conditionals: http://www.learningprocessing.com/examples/chapter-5/
  • If, else if, else: Example 5-1 Example 5-3
  • Boolean variables
  • Relational Operators, Logical Operators
  • Buttons, rollovers, switches: Example 5-5
• Loops: http://www.learningprocessing.com/examples/chapter-6/
  • while
  • for
• Related Reading
  • Chapters 5-6 from Learning Processing.
  • Chapters 4-5 from Getting Started with Processing
• Homework
  • Use mouse and keyboard input to create an interactive drawing.

Week 4 -- Functions & Objects: Part 1 -- Feb 16

• The Theory of Object Oriented Programming
• Functions: http://www.learningprocessing.com/examples/chapter-7/
  • Re-usability
  • Modularity
  • Calling vs. Defining
  • Parameter Passing
  • Return types
  • Intro to Objects - Download Ball Class examples
  • Related Reading
    • Chapters 7-8 from Learning Processing.
    • Chapters 8-9 from Getting Started with Processing
  • Homework
    • Re-organize the code of a previous assignment or example using functions and objects. If you are inspired by the power of modularity, feel free to elaborate on the assignment. Work individually or in pairs (no pairs will be assigned this week.) Post results to the wiki: ICM-Liesje-Hodgson-S12

  Week 5 -- Functions & Objects Part 2 -- Feb 23

  • Objects: http://www.learningprocessing.com/examples/chapter-8/
    • Principles and Theory (Encapsulation)
    • How-to
    • Hearts example
    • Objects talking to objects Moon example
  • Related Reading
    • Chapters 7-8 from Learning Processing.
    • Chapters 8-9 from Getting Started with Processing
  • Homework
    • Design a sketch in an object-oriented fashion. Try to eliminate all code from the main tab (setup() and draw()) except for the core requirements (size(), background(), etc.) and calls to objects.

  Week 6 -- Repetition and Reproduction: Mar 1

  • Review loops: http://www.learningprocessing.com/examples/chapter-6/
  • Arrays: http://www.learningprocessing.com/examples/chapter-9/
  • In class examples: Array of Balls, Follow the Mouse
  • What is an ArrayList?
  • Related Reading
    • Chapters 6 and 9, from Learning Processing.
    • Chapter 10 from Getting Started with Processing
  • Homework
    • Using arrays and loops, write a program that creates multiple instances of an object (feel free to use an object you developed previously or create something new).
    • Brainstorm an idea for a midterm project. Feel free to think of your midterm on as grand a scale as you like, however, the midterm assignment will involve implementing only one step of a larger project. Remember, it's only a one week assignment! Be prepared to speak briefly about your midterm idea next week.

  Week 7 -- Pixels: Mar 8

  • Images http://www.learningprocessing.com/examples/chapter-15
    • Load and display
    • Sequence
    • Image Processing and the Pixel Array
    • Class examples: Load and Display Image Array (sprites), Thresholding between Cow and Rocks Image, Same thing, but with camera input,
      Image painted with random ellipses, Camera input painted with random ellipses.
  • Related reading:
    • Learning Processing, Chapters 15-16
  • Homework
    • Complete midterm assignment and be prepared to show your work next week. Include a brief write-up of your idea as well as documentation of your implementation exercise. Remember, this is a one-week assignment and you aren't expected to complete your project, just take a first step. Everyone will present in class. Plan on speaking for 5 minutes or less (not including questions). Link to your documentation on the wiki: ICM-Liesje-Hodgson-S12

  Week 8 -- Show Midterms: Mar 22

  • Each student will present their midterm assignment. Plan on speaking for 5 minutes or less (not including questions). Talk briefly about your idea as a whole, what you chose to implement in just this one week, any problems you had, and future plans. We will follow the order on the wiki so feel free to move things around if you would like to present earlier or later in class (those at the bottom of the list have a chance of being pushed a week later.) Link to your project/documentation on the wiki: ICM-Liesje-Hodgson-S12
  • Homework: Manipulate an image or images using processing. Possible options (feel free to combine!) below
    • (1) fisheye filters alter the periphery of an image while preserving the center. Create a fisheye sketch that leaves center pixels normal, but gradually adjusts pixel values as the pixel nears the edge of the canvas.
    • (2) Create an object that stores a sprite (series of images that together make an animation). Use an array to store multiple instances of the object. Display them to the screen however you'd like (in a row, at random positions and moving, whatever makes sense). Can you figure out how to start each animation at a different frame?
    • (3) Pick an image. Now find the average color of all the pixels in a 50px by 50px tall block of the upper right hand corner. Now draw a rectangle in that corner filled with that average color. Repeat for other swatches of the canvas. If you want to create a grid of these average color rectangles, think about how you could maybe use a for loop to iterate the "calculate color of rectangle, draw rectangle" part of the code, making it shorter.

  Week 9 -- Video and Computer Vision: Mar 29

  • Homework Answers, Yoo's Mona Lisa Sketch (modified).
  • Video: http://www.learningprocessing.com/examples/chapter-16/
    • Live video input
    • Examples from class: Color Tracking, Background Subtraction.
  • Contributed Processing Libraries
    • JMyron: http://webcamxtra.sourceforge.net/
    • OpenCV: http://ubaa.net/shared/processing/opencv/
    • BlobDetection: http://www.v3ga.net/processing/BlobDetection/
    • CCV + TUIO: http://ccv.nuigroup.com/, http://www.tuio.org/?processing
  • Homework: Prepare a final project proposal. Create a web page or blog post or google doc with title, description, sample imagery, diagrams, Processing code, etc. Presentations will be split over the next two weeks. Check the HW wiki for assigned date (but if you want to arrange a swap with another student, go for it).
  • There's no coding HW, but if you want to play with video here are a few suggested exercises:
  1. Create a mirror effect using video processing.
  2. Can you figure out how to make a short "recording" using the built-in camera and then replay it to the screen?
  3. Create a game that uses a gestural interface. Use either (1) brightness tracking (2) motion detection "buttons" to know what part of the screen the user is touching.

  Week 10 -- Propose Final Projects + Data -- Apr 5

  • Proposal Schedule on Wiki
  • In-class record/replay mouse coordinates example.
  • Basics of working with Strings
    • Tutorial: http://processing.org/learning/text/
    • http://www.learningprocessing.com/examples/chapter-17
  • Loading external data
    • local text files, CSV data
      • User input
      • Graphing Comma-Separated Numbers from a Text File with loadStrings()
      • Creating Object from a Text File
    • Saving
      • Loading and Saving Data to Text File with saveStrings()
      • Saving mouse coordinates with print writer
    • Loading from a URL
      • Word counts from Project Gutenberg
      • Character counts from Project Gutenberg
    • XML
      • Creating objects from data in local XML file
      • Yahoo Weather XML
      • Yahoo Weather XML in an Object (leads to threading)
    • Discussion of APIs and Databases
    • Discussion about Threads
      • http://wiki.processing.org/w/Threading
      • secret thread() function
    • Web security in JS mode, sandbox, etc.
  • Chapter 17-18, Learning Processing (Chapter 18 is pretty out of date)
  • Data / Text projects and resources
    • What is Electronic Writing
    • Jer Thorp
    • Zoe Fraade-Blanar
    • Flowing Data
    • Visual Complexity
    • Adam Parrish
    • William Burroughs Cut-ups
    • Brion Gysin's permutation poetry
    • 10 projects using real-time data
    • Visual thesaurus
    • Cabspotting
    • World mapper

  Week 11 -- Propose Final Projects + Data: April 12

  • Proposal Schedule on the wiki
  • APIs & Data Part 2
  • CSV & External Data Sources
    • Data.Gov: Plotting earthquakes | Earthquakes Finished
  • XML
  • Writing/Reading your own
  • RSS Feeds | Craigslist | Craigslist Finished
  • JSON & APIs -- we won't have much time for more than a discussion, but check out Jer Thorpe's Twitter and NYT examples.
  • Homework: Get to work on your final projects! Some of you will be presenting in 2 weeks...

Week 12 -- Propose Final Projects: April 19

• Proposal Schedule TBD
• More on XML Basic Example
• Fun with 3D! | Pyramid
• Fun with Java & JavaScript!
  • Import Statements, Processing libraries vs. Java libraries
  • Javadocs http://java.sun.com/j2se/1.5.0/docs/api/
  • A book: http://www.oreilly.com/catalog/hfjava/
• Example Java classes
  • ArrayList Documentation, ArrayList Example
  • Rectangle Documentation, Rectangle Example
  • ArrayList & Rectangle
  • Related Reading
    • Chapters 22 and 23 from Learning Processing

  Week 13 -- Final Project Presentations I, April 26

  Week 14 -- Final Project Presentations II, May 3

  • Final project documentation is due, Friday, May 4th..

  Requirements

  • You are required to attend all class meetings and submit all weekly assignments, a midterm, and a final project.
  • Grading will be based on a combination of factors:
    • Attendance, participation in class discussion, and engagement in other students' projects (25%)
    • Quality of weekly assignments and midterm (50%)
    • Final Project (25%)
    • Personal progress; how much did you advance from your initial state in this class.