Skip to content

Homework Shiffman Tuesday

Jump to bottom Edit New page
federicoburch edited this page Dec 19, 2013 · 203 revisions

Guidelines

  • Each week you must complete two items for your homework.

    • Post documentation of your assignment. This can be a short blog post with screenshots / video documentation and/or a Processing.js implementation of your sketch. It should include something visual and your source code.
    • Place a copy of your sketch folder in our class' shared dropbox folder. Contact @shiffman if you do not have access to the folder.

  • A word about JavaScript mode and Processing.js

    • JavaScript mode in Processing is a nice magic trick that allows you to run a Processing sketch in a web browser. However, there are lots of reasons why it may not work from obvious ones like no third party libraries to less obvious ones like no functions with the same name as a variable. To make matters worse, some of Processing's 2.0 API is not implemented for JS. Use JavaScript mode cautiously and don't let it get in the way of the important stuff like just making what you want to make.
    • Instructions for JavaScript Mode

Final Project Documentation

Final Project Proposals

Week 8: Data

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:

  1. Create a game that saves a high score list to a text file.
  2. 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.
  3. Count word frequencies in two different text sources (i.e. two different authors, two different newspapers, two different political speeches) and visualize the concordance.
  4. Visualize weather data (http://developer.yahoo.com/weather/)
  5. Connect a Processing sketch to a web app that you create (applicable if you are taking ICM web).

Week 7: Pixels

Develop a project that uses the concepts outlined in class. Here are some ideas.

  1. Create a software mirror by designing an abstract drawing machine which you color according to pixels from live video.
  2. Create a video player, i.e. a sketch that allows you to switch between videos, process pixels of a video, scrub a video, etc.
  3. Use the kinect to track a skeleton. Can you "puppeteer" an avatar/animation with the kinect?

Don't forget to link your name to your blog post.

Week 6: Simulation

Develop a project that uses the concepts outlined in class. Here are some ideas.

  1. Take a Processing sketch you made earlier this semester that involves motion and re-write the sketch using PVector.
  2. 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?
  3. 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.
  4. 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) below will present. 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.

Don't forget to link your name to your blog post.

Week 5

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.

  1. 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?
  2. 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?).
  3. 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()
  4. 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.
  5. 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.

Week 4

Continue your work from last week and build off of some of the new concepts from class today. Feel free to continue to work in groups and exchange classes or on your own. Following are some ideas. Try picking one or two.

  1. Can you vary multiple objects by passing in arguments to the constructor?
  2. Can you have two objects talk to each other?
  3. Can you build a class that has other objects as its data? Tree has branches, branches have fruit, etc.
  4. Do you need inheritance?
  5. What built-in Processing objects (String, PFont, PVector, PShape, PImage, etc.) can you use?

Week 3

  1. Re-organize the code of a previous assignment or example (or invent something new if you prefer) using object-oriented programming. Try to eliminate all code from the main tab (setup() and draw()) except for the core requirements (size(), background(), etc.) and calls to objects. If you are stuck for an idea consider taking the first step towards building a particle system. Particle system can be used to simulate rain, snow, fireworks, explosions, smoke, etc. Create a Particle class to describe a single particle and try to get a few particles on the screen using separate variables. (Later, with arrays and ArrayLists, we'll look at how to visualize many particles on the screen.)
  2. 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.)

Week 2

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? You can post together or break off and complete the assignment individually.

  1. Experiment with motion using a single simple shape. Create a bouncing ball or a randomly jittering "nervous" square. Can you invent your own physics?
  2. 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.
  3. 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.?
  4. Consider tying the above two together and have a GUI control your 10PRINT visualization or motion sketch.
  5. Invent your own exercise related to animation and interaction.

Week 1

Assignment: 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. Feel free to use your prior programming experience using variables, loops, etc. where necessary. But embrace the constraint of a static drawing for this week.

Add a custom footer
Add a custom sidebar
Clone this wiki locally