Skip to content

Homework Shiffman Wednesday

Jump to bottom Edit New page
kriosaxton edited this page Dec 19, 2013 · 150 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 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:

  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 Project

Develop a project that uses images and pixels. 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 software mirror by designing an abstract drawing machine which you color according to pixels from live video.
  • Create a video player. Can you 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 6

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 5

  1. 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. If you are looking for an idea, 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.)
  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 4

Re-organize the code of a previous assignment or example using functions. 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 3

Assignment: 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.

  1. 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.?
  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. Consider tying the above two together and have a GUI control your 10PRINT visualization or motion sketch.
  4. Invent your own exercise related to animation and interaction.

Week 2

Assignment: 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.

  1. 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?
  2. Use random() to create a painting system. Here are some examples.

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.

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