Syllabus-2013-All.md

Introduction to Computational Media Syllabus

• General ICM Page: includes links to helpful resources, work from other sections, and instructions on how to upload your homework.
• Main Processing page
• book: www.learningprocessing.com
• Other Processing books available
• Processing site tutorials

Section Pages and Homework Wikis

• Shiffman, Tuesday, 12:05-3:00pm: This section is for students with prior programming experience and has a different syllabus. See Tuesday Shiffman Syllabus
• Shiffman, Wednesday, 12:05-3:00pm: Section Info, Section Homework
• Danny, Wednesday, 9:05-12:00 and 3:05-6:00: Section Info, Morning Homework, Afternoon Homework
• Dano, Tuesday, 12:05-3:00pm: Section Info, Section Homework
• Dano, Wednesday, 12:05-3:00pm: Section Info, Section Homework
• Mimi, Wednesday, 6:05-9:00pm: Section Info, Section Homework

Week 1 -- Introduction and Drawing

• 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
• Drawing with numbers
• Processing's screen coordinates
• Processing's drawing and color functions
  • rect() and rectMode() demo
  • ellipse() and ellipseMode() demo
  • fill() greyscale and color demo
• Processing reference
• Running your application
• Exporting: application, android, javascript
• Abstract Modern Art for inspiration
  • Piet Mondrian
  • Ron Gang
  • Sol Lewitt
• Watch
  • Casey Reas Eyeo 2012 talk on Chance Operations
  • Video Lessons 0.0-2.1 duplicate what we will cover in class. Watch 3.0-4.3 to preview next week's content.
• Related Reading
  • Chapters 1-2 from Learning Processing.
  • Chapters 1-3 from Getting Started with Processing
• Downloading Processing
  • Download Processing 2.0
• Homework
  • Sign up for the ITP ICM Google Group (also sign up for your section's group)
  • Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use size() to specify the dimensions of your window.
  • Sign up for a Github Account. You are not required to use github, but you will need an account to edit the wiki here.
  • Post a link to your work on your section's wiki. Follow the guidelines provided on the wiki.
  • Examples: https://github.com/shiffman/LearningProcessing -- take a look at Chapter 1 and 2 (3 if you are feeling ambitious).

Week 2 -- Animation

• The flow: code blocks, setup, draw, and events: https://github.com/shiffman/LearningProcessing/tree/master/chp03_flow
• Variation: mouseX,mouseY
• Variables: Declare, Initialize, Use: https://github.com/shiffman/LearningProcessing/tree/master/chp04_variables
• random()
• map()
• Related Reading
  • Chapters 3-4 from Learning Processing.
  • Chapters 4-5 from Getting Started with Processing
• Watch (previews next week's content)
  • Videos 5.0-6.6
• Homework
  • Create a animated application. Start over from scratch and build something with a very simple design. Focus on the logic of variables and avoid using hard-coded values. Play with mouseX and mouseY. Start by working in pairs (according to list below). You can post together or break off and complete the assignment individually. If you are stuck, here are some ideas.
    • Experiment with motion using a single simple shape. Can you create a randomly jittering "nervous" square? (Here is a sample). A circle that spirals around the window? How could user interaction affect the shape's motion?
    • Use random() to create a painting system. Here are some examples.

Week 3 -- Interaction

• Conditionals: https://github.com/shiffman/LearningProcessing/tree/master/chp05_conditionals
  • If, else if, else
  • Boolean variables
  • Relational Operators, Logical Operators
  • Buttons, rollovers, switches
• Loops: https://github.com/shiffman/LearningProcessing/tree/master/chp06_loops
  • while
  • for
• Modulo
• Additional examples from Chris Kairalla
  • more complicated mouse draw
  • bouncing ball demo
  • conditional expression demo
  • rectangle rollover demo
  • Modulo demo
• Related Reading
  • Chapters 5-6 from Learning Processing.
  • Chapters 4-5 from Getting Started with Processing
• Watch (previews next week's content)
  • Videos 7.0-7.3
• Supplemental Reading
  • "Hackers and Painters" by Paul Graham
• Homework: In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs according to the wiki. Can you divide an idea into two parts and combine those parts? Can you swap sketches and riff of of your partner's work? You can post together or break off and complete the assignment individually.
  • As an exercise, try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Moving beyond the exercise, can you invent new GUI elements beyond buttons, sliders, rollovers, etc.?
  • Create an algorithmic design with simple parameters. A good model is 10PRINT based on the examples provided here. There is also a nice discussion on the Processing forum. You can also read the 10 Print book online as a PDF.
  • Consider tying the above two together and have a GUI control your 10PRINT visualization or motion sketch.
  • Invent your own exercise related to animation and interaction.

Week 4 -- Functions & Objects: Part 1

• The Theory of Object Oriented Programming
• Functions: https://github.com/shiffman/LearningProcessing/tree/master/chp07_functions
  • Re-usability
  • Modularity
  • Calling vs. Defining
  • Parameter Passing
  • Return types
  • Recursion
    • Simple Fractal
    • Branching Fractal
  • Event functions
    • MousePressed & KeyPressed
• Intro to Objects
• 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.)

Week 5 -- Functions & Objects Part 2

• Objects: http://www.learningprocessing.com/examples/chapter-8/
  • Principles and Theory (Encapsulation)
  • How-to
  • The Constructor!
  • Objects talking to objects
• 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.
    • For example: Consider building a particle system. A particle system can be used to simulate: rain, snow, fireworks, explosions, smoke, etc. For this week, you would create a Particle class to describe a single particle and try to get two particles on the screen using separate variables. (Then next week, after we learn arrays, you would visualize hundreds (or thousands) of particles on the screen.)

Week 6 -- Repetition and Reproduction

• Review loops: http://www.learningprocessing.com/examples/chapter-6/
• Arrays: http://www.learningprocessing.com/examples/chapter-9/
• A String is like an array of characters: http://processing.org/learning/text/
• An image is like an array of pixels: http://processing.org/learning/pixels/
• 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). You can consider continuing the "particle system" thread and try modeling something like rain, snow, bubbles, etc. You can also look ahead to images and data and think about how an image is an "array of pixels" an a String is an "array of characters."

Week 7 -- Pixels

• Images
  • Load and display
  • Sequence
  • Image Processing and the Pixel Array
• Video:
  • Live video input
  • Movie playback
• Examples:
  • In class: https://github.com/ITPNYU/ICM/tree/master/in-class-examples/week7
  • Updated chapter 15: https://github.com/ITPNYU/ICM/tree/master/LearningProcessing/chp15
  • Updated chapter 16: https://github.com/ITPNYU/ICM/tree/master/LearningProcessing/chp16
  • Dano's examples: https://github.com/ITPNYU/Comperas
• Contributed Processing Libraries
  • Kinect: http://code.google.com/p/simple-openni/, http://www.shiffman.net/p5/kinect/ (possibly out of date)
  • OpenCV: http://www.mon-club-elec.fr/pmwiki_reference_lib_javacvPro/pmwiki.php -- new OpenCV library for Processing 2.0! In french. Also, see: http://codeanticode.wordpress.com/2011/11/21/opencv-2-in-processing/
  • BlobDetection: http://www.v3ga.net/processing/BlobDetection/
  • CCV + TUIO: http://ccv.nuigroup.com/, http://www.tuio.org/?processing
• Related reading:
  • Learning Processing, Chapters 15-16
• Homework: Pixels Project
  • Develop a project that uses images and pixels. For this project you should document your work in a blog post in addition to creating the Processing sketch. Note that examples that use Capture of Movie will not work in JavaScript mode. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
    • Create a software mirror by designing an abstract drawing machine which you color according to pixels from live video.
    • Create a video player. Consider combining your pcomp media controller assignment and build a Processing sketch that allows you to switch between videos, process pixels of a video, scrub a video, etc.
    • Use the kinect to track a skeleton. Can you "puppeteer" an avatar/animation with the kinect?
  • Note that only the names in bold (1/2 of the class) on the wiki will present next week. The second half will present the "data" assignment the following week. You should all complete both assignments, however, and of course you can present both weeks if you have a question or something you really want to get feedback on. Feel free to switch with each other or e-mail me if you would like to switch.

Week 8 -- Data

• Pixel project presentations.
• Basics of working with Strings
  • Tutorial: http://processing.org/learning/text/
  • Examples: https://github.com/ITPNYU/ICM/tree/master/week8-data/1_Strings
  • Java String documentation
  • Chris Kairalla String Basics Demo
• Loading (and saving) external data to local files
  • loadStrings(): https://github.com/ITPNYU/ICM/tree/master/week8-data/2_loadStrings
  • loadTable(): https://github.com/ITPNYU/ICM/tree/master/week8-data/3_loadTable
• Loading from URL
  • Chris Kairalla HTML Scraping Demo
  • Word counts from Project Gutenberg
  • Character counts from Project Gutenberg
• XML
  • https://github.com/ITPNYU/ICM/tree/master/week8-data/4_xml
• Threads
  • http://wiki.processing.org/w/Threading
  • https://github.com/ITPNYU/ICM/tree/master/week8-data/6_threads
• Discussion of APIs and Databases
• Web security in JS mode, sandbox, etc.
• Connecting with CommLab web
  • Chris Kairalla's Joke Demo: http://itp.nyu.edu/~ck987/sinatra/joke-repo
  • Joke Repo Web App source code
  • Joke Client in Processing -XML VERSION
  • Joke Client in Processing -JSON VERSION
• You can read Chapters 17-18 from Learning Processing but chapter 18 is especially out of date.
• Data / Text projects and resources
  • Eyeo Festival Talks:
    • http://vimeo.com/48625144, http://vimeo.com/45838408, http://vimeo.com/45537437, http://vimeo.com/45091945
  • 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
  • Wind Map
• Homework: Data Project
  • Develop a project that uses an external data source. For this project you should document your work in a blog post (and link below) in addition to creating the Processing sketch. Note that certain methods for grabbing data will not work in JavaScript mode. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
    • Create a game that saves a high score list to a text file.
    • Track personal data over the course of a few days (exercise, sleep, computer use, eating, etc.). Enter the data into a CSV file and visualize.
    • Count word frequencies in two different text sources (i.e. two different authors, two different newspapers, two different political speeches) and visualize the concordance.
    • Visualize weather data (http://developer.yahoo.com/weather/)
    • Connect a Processing sketch to a web app that you create (applicable if you are taking ICM web).
  • If you do not present your pixels assignment, you will present you data assignment next week.

Week 9 -- Bonus Topics (we will not do all of these in class but there will be a sampling)

• Translate, Rotate, Scale: http://processing.org/learning/transform2d/

  • Examples from Chris Kairalla
    • Godzilla
    • Danny Rozin's Clock
    • Danny Rozin's 3D Box Grid
    • Solar System - Advanced Level Demo

• P3D: http://processing.org/learning/p3d/

  • 3D shapes, vertices
  • textures
  • lighting
  • shaders

• PShape: http://processing.org/learning/pshape/

• PGraphics

  • Examples from Chris Kairalla
    • Simple PGraphics Demo
    • PGraphics Grid

• PVector:

  • In-Class examples
  • Nature of Code vector chapter

• ArrayList

  • History of mouse movements
  • Java Documentation
  • Simple Particle System

• Java

  • Robot Class example, Robot Java Documentation
  • Try/Catch, Exceptions
  • Processing in Eclipse
  • Processing in Sublime
  • Processing.js embedded in webpage
    • Simple Example
    • Processing.js Guide

• Homework: Prepare a final project proposal. Create a web page or blog post with title, description, sample imagery, diagrams, Processing code, etc. Be prepared to present your proposal to the class next week.

Week 10 -- Propose Final Projects

• ** See your individual section's proposal schedule on your wiki **

Week 11 -- One on one speed user testing / feedback

• This week you will "user test" your project with fellow classmates. You must have some implementation that you can test completed by this time. User testing can mean different things for different projects. For a game, it can mean that the user tries to play it. For an art piece, it could mean showing it to a classmate and asking for them to say what they think it is about or how it made them feel. We'll show projects in a "one on one" / round robin / speed dating-style session. 5 minutes then switch. You cannot not explain your project, just show and let the user try it and give you feedback. Then you can answer questions. User testing schedule will be provided on a wiki.

Week 12 -- Final Project Presentations

• Please add your link to your final project documentation on your section's wiki.