Skip to content

Latest commit

 

History

History
292 lines (279 loc) · 27.7 KB

Syllabus-2014-All.md

File metadata and controls

292 lines (279 loc) · 27.7 KB

Introduction to Computational Media Syllabus

Section Pages and Homework Wikis

Week 1 -- Introduction and Drawing

Week 2 -- Animation

  • The flow: code blocks, setup, draw, and events
  • Variation: mouseX,mouseY
  • Variables: Declare, Initialize, Use
  • random()
  • map()
  • Related Reading
  • Watch (previews next week's content)
  • 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
    • If, else if, else
    • Boolean variables
    • Relational Operators, Logical Operators
    • Buttons, rollovers, switches
  • Loops
    • while
    • for
  • Modulo
  • Additional examples from Chris Kairalla
  • Related Reading
  • Watch (preview next week's content)
  • Supplemental Reading
  • 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
  • Intro to Objects
  • Watch (preview next week's content)
  • Related Reading
  • Homework: The goal for this week is to start organizing your code into modular and reusable parts. We'll start by playing with functions before moving to objects next week. Work individually or in pairs (no pairs will be assigned this week.) Some exercise ideas for you to pick from:
    • Take a previous assignment with code in setup() and draw() 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.

Week 5 -- Functions & Objects Part 2

  • Objects
    • Principles and Theory (Encapsulation)
    • How-to
    • The Constructor!
    • Objects talking to objects
  • Related Reading
  • 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.)

Week 6 -- Repetition and Reproduction

  • 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
  • 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. Using arrays, write a program that creates multiple instances of an object (feel free to use an object you developed previously or create something new). Here is an example you can use as a model. You should probably stop here, but here are some additional (more difficult) possibilities.
      • 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? See this example as demonstrated in class.
      • 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?). Example 1 Example 2
      • 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(). We'll get into this in more detail during the data week.
      • 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. We'll get into this in more detail next week.
      • 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 7 -- Pixels

Week 8 -- Data

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

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.