Skip to content

Homework Cassie

Jump to bottom Edit New page
Cassie Tarakajian edited this page Nov 14, 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

Week 12

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