Skip to content

Homework Cassie

Jump to bottom Edit New page
Cassie Tarakajian edited this page Dec 5, 2018 · 75 revisions

Guidelines

A big part of learning at ITP is learning from each other. So share your work and in exchange you'll get to see everyone else's!

  1. Do the assignment.
  2. Contribute a question.
  3. Post documentation in the form of a blog post. Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, you should feel free to put your energy into writing about what didn't work (and vent any frustrations!).

How to turn in your homework assignments

Use this form to turn in your homework assignments.

Assignments are due before class each week. Even if you don't think it's finished or it's not working, turn it in! I won't count it if it's late.

Homework Responses

Final Project Documentation

  • Final project presentations are Wednesday, December 5th. In class presentations will be approximately 7 minutes each, I will be strict about the time.
  • Please post your final project documentation to a web page (blog post is fine) and submit through the above homework form. This is due Friday, December 14 (at midnight).
  • It's up to you to figure out how to best document your project, here are some loose guidelines if you aren't sure what to include.
    • Title
    • Brief written description
    • Visual Documentation: sketch running online, images, video, etc.
    • References: links to related projects, code samples, etc.
    • Source code (please cite your sources in the code comments)

Presentation Schedule

  1. Son
  2. Sachiko
  3. Rachel
  4. Patil
  5. Shuju
  6. Jaekook
  7. Madison
  8. Aaron
  9. Fenfen
  10. Yves
  11. Arnab
  12. Cara
  13. Xiaotong
  14. Chenhe

User Testing Week

The testing will follow a speed "round robin" format. The class will be divided into two groups and we'll do two rounds. For each round half the students will set up on a laptop in the class room and the other half will "view" or "interact with" or "listen to" your project for ~5-7 minutes. We'll rotate so that all "testers" will try each project and provide feedback.

It's up to you to design your "user testing". It can mean something different for each project. For a game, it's pretty obvious what to do. For a physical installation or performance or sound piece, this will be more difficult. The "rule" that we will try to adhere to is no explaining of the project until after the user has viewed/interacted.

If you are not sure how to design your testing, e-mail me or come and see me and we'll discuss.

Group A Presenters: 9:05 - 10:05

Yves, Madison, Jaekook, Cara, Xiaotong, Sachiko, Arnab

Group B Presenters: 10:20 - 11:20

Aaron, Son, Patil, Chenhe, Shuju, Rachel, Fenfen

Week 12

  • RESOURCES FROM CLASS
  • WebGL

  • Prepare a prototype of your project to user-test in class next week.

    • Show as much as possible. You won't be allowed to "explain" your concept during the user test.
    • What questions do you have about your project? Build your prototypes so you can answer those questions by observing how users respond to your prototype.
    • Working code is always good. But prioritize getting across your concept. Use paper, glue, sound, play-doh to quickly mock-up things that would take too long in code.

Week 9

Resources from Class

Inspiration

Critical Readings

Final Project Proposals: 5 minutes of slides, sketches...something to ILLUSTRATE what's in your head.

  • Collect inspirations: Quotes, photographs, products, projects, people, music, political events, social ills.
  • Collect source material: Drawings, Images, Videos, Sounds, Text
  • Collect code: Your own sketches. Other people's sketches.
  • Collect ideas for a title?
  • Collect ideas for 1-sentence description?
  • Context? Who's it for? How will people experience it? Is it interactive? Is it practical? Is it for fun? Is it emotional? Is it to provoke something?
  • Collect questions for your classmates.
    • What are you unsure of? Conceptually and technically.

Sign-up to present

Week 8

EXAMPLES FROM CLASS:

INSPIRATION FROM CLASS:

TEST YOURSELF: Complete Quiz for Week 8

DO:

  • Create a sketch that uses external media (sound, images or video). Some ideas are:
    • Make something responsive to microphone input.
    • Create a "photobooth" with augmented snapshots from a camera.
    • Create a "painting" system that colors pixels according to images, video or camera input.
  • Create a blog post documenting your work. Also include at least two links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

READ + WATCH + RUN CODE

Week 7

  1. SIGN UP TO PRESENT

  2. IN-CLASS

  3. TEST YOURSELF

    • Complete the optional Quiz

  4. DO:

    • Create a sketch that uses an external data source. Consider building on top of your website assignment. Make it data-rich!
    • Here are some ideas:
      • Track personal data over the course of a few days (exercise, sleep, computer use, eating, etc.). Enter the data manually into a JSON file and visualize the results.
      • Count word frequencies in two different text sources (i.e. two different authors, two different newspapers, two different political speeches) and visualize the results.
      • Use weather data to affect elements in a sketch
      • Gather data from a google spreadsheet and use in a sketch with loadTable()
    • APIs to consider

  5. READ / WATCH

  6. EXAMPLES

Week 6

  • IN-CLASS:

  • DO:

    • Create your own HTML page with the following:
      • Pre-defined HTML Elements
      • Pre-defined CSS Styles
      • HTML Elements generated by your p5 sketch
      • Some kind of mouse interaction with an HTML Element using a callback function you write.
    • Another option for your assignment this week is to play with an existing website rather than create your own from scratch. To do that you will need to save it and upload it to your web editor. Here are instructions on how to do that.
      • Let’s say you want to work with the awesome MDN documentation page on the animate() function.
      • Go to the File>>Save as… menu. Rename the file something short like animate.
      • You will end up with 1 file that’s called animate.htm and a folder of supporting files (including the css style files) called animate_files.
      • Open animate.htm in a code editor (Brackets, Atom, Sublime)
      • Copy the html from animate.htm and replace the html in the index.html file on the p5 web editor.
      • Create a folder in the web editor called animate_files and upload all the files from the saved folder INTO the one in the web editor. (If you click on the folder name in the web editor, you will see a little down arrow to the right of the name. Click that and you will see an option to Add File.)
      • Voila, you should be able to run the saved website from the web editor.
      • Remember that if you want p5 functionality, you will need to copy and paste the p5 script tags back into your index.html file.
      • If this is all too much, I’ve set up this lovely specimen from the 1990s here for you to play with. You can File>>Duplicate it into your own account and go from there!

  • READ / WATCH

  • Examples + Resources

Week 5

RESOURCES FROM CLASS

TEST YOURSELF

  • Complete the optional Quiz

DO:

  • Design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)
    1. Make one single object with just variables.
    2. Put one or more functions in the object.
    3. Try manually making two objects.
    4. Duplicate the object using an array and make as many as you like!
  • If you are already working with classes/objects and arrays:
    1. Re-organize / break-down your classes into the "smallest functional units" possible.
    2. Try different ways to have your objects "communicate" with each other in some way.
  • In the end the goal is to have code in draw() that only makes calls to objects. Something like:
function draw() {
  background(0);
  
  // A single object
  apple.chop();
  // Another object
  orange.peel();
  
  // Calling a function on all of the objects in an array
  for (var i = 0; i < grapes.length; i++) {
    grapes[i].pluck();
  }
}

READ / WATCH

Examples

Week 4

Week 3

Week 2

Week 1

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