Note this section is for students with prior programming experience and has its own syllabus separate from all other sections
- 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
- Shiffman, Tuesday, 12:10-3:05pm: Section Info, Section Homework
- Office Hours Signup
- Why are we here? What is computational media? What is programming? What is it good for? What kinds of programming languages are there?
- What is Processing? Why Processing?
- Server-side vs. client programming
- Things made with Processing
- Drawing with numbers
- Processing's screen coordinates
- Processing reference
- Running your application
- Exporting: application, android, javascript
- Abstract Modern Art for inspiration
- 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-6.6 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. This year we'll be using the pre-releases of Processing 3.0. To download 3, scroll down to the bottom of the download page or visit this direct github link.
- Do this week's homework as described on wiki.
- The flow: code blocks, setup, draw, and events
- Variation: mouseX,mouseY
- Variables: Declare, Initialize, Use
- random()
- map()
- Conditionals
- If, else if, else
- Boolean variables
- Relational Operators, Logical Operators
- Buttons, rollovers, switches
- Loops
- while
- for
- Modulo
- Additional examples from Chris Kairalla
- Related Reading
- Chapters 3-6 from Learning Processing.
- Chapters 4-5 from Getting Started with Processing
- Watch (preview next week's content)
- 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.
- Experiment with motion using a single simple shape. Create a bouncing ball or a randomly jittering "nervous" square. Can you invent your own physics?
- 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.
- 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.?
- 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.
- The Theory of Object Oriented Programming
- Functions
- Re-usability
- Modularity
- Calling vs. Defining
- Parameter Passing
- Return types
- Recursion
- Event functions
- Intro to Objects
- Watch (preview next week's content)
- Related Reading
- Chapters 7-8 from Learning Processing.
- Chapters 8-9 from Getting Started with Processing
- Homework: The goal for this week is to start organizing your code into modular and reusable parts. If you are experienced with object-oriented programming, you might just start by creating a program with classes. However, if this is new to you it's often a good idea to just start by playing with functions. Some exercise ideas for you to pick from:
- Take a previous assignment with code in
setup()
anddraw()
and break everything out into separate function. - Take the idea for a design and break it out into its own function. Add parameters to the function so the design can be drawn differently based on the selected parameters. Draw three or more instances of the design on the screen to show the differences possible by changing the parameters. Here is the Robot example referred to in class
- Create a design from a recursive function. How could you animate or change this design over time? Can you make it interactive or have it controlled by
noise()
? Here are some samples as demonstrated in class.
- Take a previous assignment with code in
- Objects
- 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
- Watch (preview next week's content)
- 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.)
- E-mail the code for a class to your assigned partner on the wiki. You'll get one from them too. Try incorporating the class sent to you into your sketch. Write some thoughts about this process on your blog -- Did anything not work? Could you follow your partner's code? Were comments helpful? (If you are feeling saucy, you could try to use github for this collaboration.)
- 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.
- Review loops
- Arrays
- A String is like an array of characters
- An image is like an array of pixels
- What is an ArrayList?
- Related Reading
- Chapters 6 and 9, from Learning Processing, Chapter 23 for ArrayLists.
- Chapter 10 from Getting Started with Processing
- Homework
- Using arrays and/or ArrayLists, write a program that creates multiple instances of an object (feel free to use an object you developed previously or create something new). Here are some additional ideas if you are stuck.
- Experiment with the resizable nature of ArrayLists. Can you add objects one at a time? Remove them after a certain amount of time or when they leave the screen? Can objects from on ArrayList trigger the birth of other objects?
- Create an object that stores the history of its own path. This might be a drawing program where you keep a history of mouse locations in an ArrayList or a shape that moves around the screen autonomously and draws its own trail. Can you have an ArrayList of these objects (each of which tracks its own ArrayList?). Some examples as demonstrated in class
- Once you have an array of objects, you can have each object check every other object with a nested loop. Try incorporating this idea into a sketch by having objects react to intersecting with others. Example demonstrated in class
- A String is like an array of characters. Can you create a sketch that plays with text by looping through the "array" inside a String. See: charAt()
- A PImage contains an array of pixels. Experiment with image processing by looping through all the pixel colors of an image. This tutorial will help you get started.
- Create a system that involves a two dimensional grid. Use a 2D array to store the data of this system. This tutorial will help you get started.
- Processing includes other data structures to store information with functionality above and beyond an array. Some examples are IntList and IntDict. A common use of IntDict is storing the number of times words appear in a document. Try using one of these data structures in the development of a sketch.
- Using arrays and/or ArrayLists, write a program that creates multiple instances of an object (feel free to use an object you developed previously or create something new). Here are some additional ideas if you are stuck.
- Programming motion with vectors
- Simple physics engine
- Physics libraries
- Steering behaviors and emergent phenomona
- Genetic Algorithms
- All Nature of Code Videos
- All Nature of Code Examples
- Homework: Simulation Project
- Develop a project that uses the concepts outlined in class. Here are some ideas.
- Take a Processing sketch you made earlier this semester that involves motion and re-write the sketch using PVector.
- Create a design for a creature. Can you build a skeleton? A body? Appendages? Antannae? Here is an example from an ITP thesis project. Taking inspiration from Nokia Friends, can you make a squishy skeleton using toxiclibs?
- Can you invent rules for how objects move about the screen? Keep them incredibly simple. What if the objects interact with other objects or with each other? What types of group behaviors or pattens emerge? Take a look at Casey Reas' Process Compendium for inspiration.
- If you read through the exercises in Nature of Code there are many more ideas. I would suggest Chapter 2.
- Note that only the names in bold (1/3 of the class) on the wiki will present next week. Everyone else will either present the "video" or data" assignments in the following weeks. You should all complete all assignments, however, and of course you can present more 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.
- Develop a project that uses the concepts outlined in class. Here are some ideas.
- There are video lessons in progress about these topics. You can watch them here:
- Images
- Load and display images
- Writing pixels to screen
- Reading image pixels, image processing: brightness, threshold, etc
- Chapter 15 examples
- In class exercise: make an interactive image processing filter
- Video:
- Live video (Capture) and movie playback (Movie)
- Drawing shapes on screen colored by pixels
- Chapter 16 examples
- Exercise: Make a mirror that paints your portrait
- Computer vision:
- Screen Pixels
- Simple color tracking
- Face detection with OpenCV for Processing
- Getting images from a Network Camera
- Kinect
- The state of the kinect is quite in flux. To use the original Kinect, you can find some information here. However, it's currently broken with the new Processing and you have to perform some voodoo operations to get it to work. There are also quite a few examples for the Kinect in Dano's Computational Cameras repo.
- How the kinect works (v1)
- The new Kinect opens up some exciting possibilities. For now, you'll need to use a PC. We have some for checkout at ITP and you can talk to ITP Resident Surya how to get tracking data via OSC. Another option is to use this Kinect v2 Processing library.
- MS Kinect v2 Demo Part 1, MS Kinect v2 Demo Part 2
- More Camera Tracking Stuff from Dano
- Other libraries of note
- 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. 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.
- Make a slideshow of images. Check out this Crossfade Effect.
- Make a "VJ turntable" for video. Check out Movie Scrub.
- Use OpenCV face tracking and create a particle system that emanates from a person's mouth or eyes or. . . .?
- Note that only the names in bold (1/3 of the class) on the wiki will present next week. You should all complete all assignments, however, and of course you can present more 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.
- 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. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
- Pixel project presentations.
- Video Lessons
- Basics of working with Strings
- Word Counting
- Data formats
- Threads
- Discussion of APIs and Databases
- Yahoo Weather library
- Yahoo Weather with XML
- NYTimes API using JSON
- Google image search JSON
- Write your own API, store data in a database using Servi: Coming soon!
- Data Sources and Inspirational Work
- 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. 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
- If you did not present your simulation or pixels assignment, you will present you data assignment next week.
- 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. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
- Sound in Processing!
- P3D: http://processing.org/learning/p3d/
- 3D shapes, vertices
- textures
- lighting
- shaders
- PGraphics
- Examples from Chris Kairalla
- Java
- p5.js
- network communication and OSC
- 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.
- ** See your individual section's proposal schedule on your wiki **
- 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.
- Please add your link to your final project documentation on your section's wiki.