Skip to content

Homework Shiffman Tuesday

Jump to bottom Edit New page
Daniel Shiffman edited this page Jan 26, 2016 · 344 revisions

Final Project Documentation

  • Final project presentations are Tuesday, December 1st. In class presentations will be approximately 7 minutes each, I will be strict about the time to keep everything fair. We also need 10 minutes at the end to do course evaluations.
  • Please post your final project documentation to a web page (blog post is fine) and link next to your name below. This is due Friday, December 18.
  • 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)

Schedule and links

Final Project User Testing

The testing will follow a "speed-dating" 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 different projects. 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: 12:20 - 1:20

  • Olivia, Carrie, Ying, Yuchi, Viniyata, Nai-chen, Skylar

Group B Presenters: 1:40 - 2:40

Final Project Proposals

Final projects are a creative idea inspired by the concepts in this class. There is no requirement to use a particular aspect of programming. The idea and your enjoyment and interest in the idea is what counts. Some things to remember.

  1. Keeping things simple and small in scope is a plus. If your project idea is a big one, consider documenting the larger idea but implementing just a small piece of it.
  2. Also think about making a final project for a small audience, even one single person like a family member or friend. . . or yourself. This can be a good way to focus your idea and design process. "Generalizing" the idea can come later (or maybe not at all.)
  3. Final projects can be collaborations with anyone in any class.
  4. Final projects can be one part of a larger project integrated with Physical Computing or another class.

What you need to do now:

  1. Create a blog post documenting your idea for a final project and be prepared to present the idea in class. Your proposal should include the following (though feel free to use this as loose guidelines, you can document your idea however you see fit.)
  • Title
  • One sentence answering: "What is it?"
  • Written description of the idea.
    • How did you become interested in this idea?
    • What is the audience?
    • What questions do you have for the class (conceptual or technical)?
  • Visual material (images, videos, hand-drawn sketches etc.) that demonstrate your idea.
  • Links to any projects or references that inspired you.
  • Links to in progress sketches that demonstrates any part of the idea.
  • Questions for the class (conceptual or technical)
  1. Plan to present your idea in ~2-3 minutes leaving about 5 minutes for discussion.

Final Project Proposals

Presenting Tuesday, Nov 3

Presenting Tuesday, Nov 10

Week 9

These assignments are mini trial runs for a final project. They can be small sketches that form a tiny component of a larger idea. There are two assignments, one using data and one using media. You can combine the two if you like. Document your work below and pick one to show in class next week. We'll follow this random order below:

  1. Create a sketch that uses an external data source.

    • 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.

  2. Create a sketch that uses external media (sound 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 camera input.

  3. Create a blog post documenting your work. Include links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

Questions

  • Don - How do I split the multiple values and take the only first or second value? eg. "data": ["2015-10-21",133.07] I only want to play with 133.07 but not "2015-10-21." How do I split between','comma? - I used "subset()." Question solved.
  • Angela - Here is something I am struggling with. It seems strange or like cheating to be able to use other people's code, or code from the examples, class or books or wherever, hack/edit them, and make it our own. Somehow it seems like cheating. How is one essentially learning from this code hack? And how can we feel like this is not some sort of cheat sheet? I feel like we should be knowing this off hand on our own without looking. Am I wrong/right/confused?
  • Chino - How do you get a button to react when you either click on it with your mouse or hit the spacebar when it's highlighted?
  • Olivia - how can I create a function that will stop one song and play another when you press a button? Also, why do some of my sketches take a long time to load once I put them on the server?
  • Chino - My Google Image searches were working but now I'm getting a 403 error. What did I do wrong and how do I fix this? edit: nevermind, i guess i went over my daily quota :(

Add Homework Here

Week 8

Start thinking about and doing some mini trial runs for a final project. They can be small sketches that form a tiny component of a larger idea.

For Tuesday, October 20th, add your name and any links to data sources / APIs you find online that you are interested in. We'll look at some of these in class together. You can also write questions below about data or DOM or anything!

Add links to data / APIs and questions

Week 7

  • READ AND WATCH

  • DO

    • Create a webpage that extends beyond the canvas, using p5.dom.js. You are welcome to incorporate other javascript libraries as well if you're feeling ambitious. If you're stuck for ideas, you can try going back to the graphical user interface (GUI) elements that we experimented with in week 3, and try recreating that functionality with DOM elements.

Questions (example questions)

  • what are "parent" and "child" for? also: i was trying to load images that were not named in the 0, 1, 2... format. is there a way to have images in a file and also have a spreadsheet where one column is the list of images, another column is 0, 1, 2... and then have p5 associate the number in the second column with the right image? basically, instead of changing all the file names, assign each image name a number that p5 can use for an array?- JEN

Add Homework Here

Week 5

  • Additional material that you can review about objects / arrays.
    • Videos 6.1-6.5 cover more about objects, arrays, and the constructor function.
    • Getting Started with p5.js chapters 10-11 also cover the same material (see e-mail re: PDF).
  • In your blog post this week, please include some thoughts on the synthesis workshop, what you liked or didn't like about it, and any documentation of what you made.
  • 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!
  • 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();
  }
}

Questions (example questions)

  • Chino - What's a good way to create variable object properties that are dependent on other properties of the same object?
  • Angela - How can you add a mousePressed function to an array like that in video 6.2? ALSO - I keep getting syntax errors in p5js when following along in the lab. For example (and this is not the first time), I am unable to perform the tasks in 6.5 mousePressed because of a syntax error with Bubbles.push. In past examples in the 6 videos, I had trouble having "move" recognized as being defined. What could be contributing to these issues - if everything has been copied exactly?

Add your homework here

Week 4

  1. The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may, however, choose to try a new experiment from scratch. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

    • Reorganize "groups of variables" into objects.
    • Break code out of setup() and draw() into functions.
    • Use a function to draw a complex design multiple times with different arguments.
    • If you are feeling ambitious, try embedding a function into an object.

  2. READ / WATCH (Nothing required, read or watch what you find most helpful)

    • Getting Started with p5.js chapters 9-10 (see e-mail re: PDF)

  3. Examples

Questions (example questions)

  • Chelsea - I have 10,000 questions.

Add your homework here

Week 3

  1. 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 as below. 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.

    • Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compare to interface elements we'll get for free from the browser.
    • Create an algorithmic design with simple parameters. (One example is 10PRINT, example code).
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

  2. READ / WATCH (Nothing required, read or watch what you find most helpful)

Questions (example questions)

  • question
  • Leon: all things push, pop, translate, rotate complicate the use of mouseX and mouseY, is there any clever way of doing that?
  • Viniyata: Is there a way to have 2 separate draw functions in one file and have them function independent of one another?
  • Angela: Brain overload. How do we keep track of all that we know and how it all relates to each other? The more functions and events and words we learn, it's hard to understand how they all interact. Also, can we use push/pop to link a little character image together and then use that whole block of code in way that we can click it as a button if it is moving? - or are we not there yet?
  • Chelsea - where exactly do you have to put images to use them? confused by the "local server" info on the p5 site.

Homework Links

Week 2

  1. Create a sketch that includes (all of these):
  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.
  1. READ AND WATCH:

Questions (example questions)

  • question
  • Angela -- How can you do the mouseX,mouseY feature with a square or quad...? I feel like the answer is easy and I'm just not seeing it. Also related...how can we have multiple shapes moving simultaneously with each other?
  • Chino -- So I have one component in my sketch that's technically different each time the program starts but it's constantly changing as the program runs. How do you make something static that is random each time you start? When I try to run random() outside of the draw() loop, I get "Uncaught ReferenceError: random is not defined," but when I run it inside the draw() loop it's constantly changing.
  • Skylar -- What is the best and most efficient way to have a randomization in the sizes of my shapes?
  • Chelsea -- I played around with but had trouble generating a way to make a shape go thru a color range when the mouse is hovered. Any ideas?

Homework Links

Week 1

  • SET UP:

  • DO:

    • Create your own static 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 createCanvas() to specify the dimensions of your window.

  • READ / WATCH (if helpful):

  • ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)

Questions | Examples

  • Angela Perrone - I am having trouble with the arc () function and understanding start and end numbers and how they relate to PI and QUARTER_PI etc. Why can't I put in PI+30 and get PI plus 30 radions or what not?
  • Chino Kim - Could you explain what is happening in the colorMode() examples on the p5 reference page?
  • Jen Kagan - How do you make things happen in sequence? I edited the p5 Loop reference to make a bar move from the bottom of the page to the top. After it reaches the top, I want another bar to the right of the first bar to move from the bottom of the page to the top. I couldn't figure out how to end one loop and start another one. Or, to stay with the shapes, how could I make one shape appear, then disappear, then make a different shape appear in the same canvas, etc.?
  • Olivia Cueva - Can you make colors glitter or shimmer? Is there a ways to create a sort of hologram effect on the coloring?

Add Your Homework

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 your 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!).
  4. Post your sketch online.
Add a custom footer
Add a custom sidebar
Clone this wiki locally