Skip to content

Homework Shiffman Wednesday 1

Jump to bottom Edit New page
Daniel Shiffman edited this page Jan 14, 2018 · 317 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!).

Final Project Documentation

  • Final project presentations are Wednesday, December 6th. 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 link next to your name below. This is due Friday, December 15.
  • 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

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:00 - 10:00

MH, Ilana, Anita, Gabriel, Chengtao, Ayal, Keerthana, Elizabeth

Group B Presenters: 10:15 - 11:15

Roland, Kellee, Ella & Chelsea,Ivy, Yang, Ellen, Kai

11:15 - 11:30

  • Course evaluations

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. Final Project Proposals: a few minutes of slides, sketches...something to ILLUSTRATE what's in your head.
    • Collect inspirations: How did you become interested in this idea? quotes, photographs, products, projects, people, music, political events, social ills.
    • Collect source material: drawings, images, videos, sounds, text
    • Collect code: your own sketches and/or other people's sketches.
    • Collect ideas for 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.
  2. Plan to present your idea in ~2-3 minutes leaving about 5 minutes for discussion. You can present your idea however you like visually, but make sure you also document your thoughts in a blog post linked below.

Final Project Proposals

Presenters 11/9

Presenters 11/17

Week 8

Here's another mini trial run for a final project. Just like last week, all students should complete the assignment but only 1/2 will present in class.

  1. 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 or a video.
  2. Create a blog post documenting your work. Also include links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.
  3. Resources

Examples

Questions

  • getUserMedia does not work on iOS 11 Safari: asks for camera access, then displays black screen / using latest p5 Version 0.5.16 (Roland)

Add Link Your Homework

All students should complete the assignments for this week only ~ half of you will present. Names in bold are assigned presenters, but anyone is welcome to show also. This is informal!

Week 7

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. All students should complete the assignments for this week and next but only 1/2 will present each week.

  1. Create a sketch that uses an external data source. Plan to present in class using the classroom computer or your own laptop if you prefer. 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.
    • Here's a list of other data sources you might investigate and try.
    • If you are interested in maps, check out ITP 2nd year Cris's Mappa p5.js library.

  2. Create a blog post documenting your work and process. Include links to other projects that serve as references and inspiration for your work.

  3. READ AND WATCH (whatever is helpful to you):

Examples

Questions (example questions)

  • Need API-inspiration? Check the public-APIs Git (Roland)
  • In my code I'm still a little unclear on how the term data defined in the function gotData(). It looks like it's not defined anywhere on its own. Is it part of p5.js or the JSON function? -Elizabeth
  • How to load only one field from the data file (pre-load is taking too long) ? - Ayal
  • How to make the map stay at fixed point rather than moving and how to crop out and use only a certain region? Anita
  • How to use the new mapbox? The image either load too long ? (Ella)
  • My button is not working at all😭😭😭, I wish people can search meteor by the mass..Maybe I did something wrong made it not working at all..(Ivy)
  • How can I get rid of the cross-origin error when copying it from local server to web-editor / remote server?(Roland)
  • In my project, I need to reload a table every minute. My problem is, if I try to access it before the reloading is done, an error will occur. Is there any way I can know when the reloading is done?(Yang)
  • Having hard time dealing with the order of images and texts generated from api, because text always loading faster than image. Need a good method or mindset solve these kind of problem.

Add Link Your Homework

All students should complete the assignments for this week and next but only 1/2 will present each week. Names in bold are assigned presenters, but anyone is welcome to show also. This is informal and you can switch too!

Week 6

READ / REVIEW

DO

  • Create a sketch with one or more of the following. Feel free to add DOM elements to a previous sketch.
    • 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.
    • If you are feeling ambitious, try replacing a DOM element with a "physical sensor!"
  • Questions you might ask yourself while working on the above.
    • When does it make sense define HTML elements in index.html?
    • When does it make sense to "generate" HTML elements with code in p5?
    • When does it make sense to apply styles in code with the style() function vs. predefined styles in style.css?
  • Next week we will look at working with data and APIs in class. If you feel so inclined you can take a look at some of the video tutorials in advance. Please add a link to a data set or "API" that interests you. You don't have to know anything about how to use it, but having a list of examples we can examine in class next week will add to the discussion. You can also contribute to this wiki list of data sources.

Questions (example questions)

  • I would like to identify a user with a unique ID, store this on a server, then communicate an action via serial to a physical output assigned to that ID. How can I get this user ID in p5? (Roland)
  • Is there a good way to organize files and sketches when we are implementing serial communications to p5? (Chengtao)

Add data set that interests you here

Add Homework Here

Week 5

Read / Watch

Do

  1. 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. Write a class with a constructor function and generate one single object.
    2. Put one or more functions in the class function and call them on the object.
    3. Try making two objects without an array. Can you make them different?
    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();
  }
}

Example Code and Quiz

Questions (example questions)

  • Is it possible to create sub-classes in classes or re-use elements from one class in multiple various global classes? (Roland)

Homework Links

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):

    • Break code out of setup() and draw() into functions.
    • Use a function to draw a complex design (like this) multiple times with different arguments.
    • Write a function to that returns the result of a mathematical operation that you need to do several times in your code.

  2. An optional quiz to test your knowledge if you like.

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

    • Videos 5.1-5.4 cover functions. If you want to get started on what we'll discuss next week, you can't just yet! There are a 6.x series of videos about objects, but I'm making new tutorials this Friday with something called classes. Last year, I emphasized "JavaScript object literals" and the "JavaScript Constructor function" for making objects, but this is no longer the current way to do object-oriented programming in JS. I'll discuss more about this in class.

  4. Examples

Questions (example questions)

  • Can I do a function within a function? Oh really? How?, Ayal
  • I found creating my own function simplify everything, except when drawing a line many times over within a face. Any advice on drawing a line? Also, is there a way to change the size of something by percentage or ratio? Or does resizing multiple instances of something get easier with objects? - Elizabeth
  • How to draw recursion of triangle? I tried couple times but no luck:( there's no settled point of a triangle. --Ivy

Homework Links

Week 3

Assignment

  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 specified 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 below. 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, see: 10PRINT example.
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
  2. Try this quiz if you want to test your knowledge.

READ / WATCH

Examples

Questions (example questions)

  • question, name (if you don't mind!)
  1. Can I give rectangles a name and control them like a independent element, not by parameter and declaration of variable? (or should I just writee in the HTML doc?) - Kai
  2. What's the tips to plan a organized and clean code?(knowing how many variables or what kind functions I need before I start to write?) - Kai
  3. How do you confine a behavior to a certain space on the canvas? I'd like to do that twice in my code, especially so that Kellee and I can put her circle de#to the picture frame of my living room. - Elizabeth
  4. (Solved)Hi this is Yang, in our code, line 22-23 & line 38-39, I met some troubles. The thing is, I defined a class which is a slider, and at line 22 & 23 I created two new instances("sliderJ" & "sliderD") of this slider, to control two different variables("jitter" & "distance"), then I give those variables their own value of slider. However, "jitter" always get the value of "sliderD" which I didn't give it! This doesn't make sense. But I think it would cost too much time debugging on class, maybe I can seek your help after class.
  5. (Solved)Hi, it's Yang and Yang again. In the 10PRINT, how come the bricks are drawn one by one? I didn't see codes like "frameRate % something". What causes the delay?
  6. Is it possible to update the background at two different speeds / frequencies? (Roland)

Homework Pairs and Links

Week 2

  1. REVIEW - If you haven't already...
    • Variables videos 2.1-2.3 and 1st half of Chapter 4 of Getting Started with p5 (up to Example 4-5).
    • map() and random() videos 2.4 - 2.5
  2. DO:
    • 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.
      • (You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.)
    • If you are struggling for an idea, take a look at this clock assignment from Golan Levin's CMU course as well as this video tutorial on making a clock in p5.
    • Here is an optional "take-home" quiz to test your knowledge.
  3. READ AND WATCH:
    • Videos
    • Getting Started with p5:
      • Read Chapters 5 (Response) and 8 (Motion).
      • Read the 2nd half of Chapter 4 on Loops (starting from Example 4-5 thru 4-13).
      • If you're interested, read Chapter 6 on Translate, Rotate and Scale.
  4. EXAMPLE CODE:

Questions | Examples

  • At the end of Video 3.4 on boolean variables you talk about changing the state of a program (example: on = !on). If there's time, can we clarify what is happening in the video example, please? (Ellen)
  • How to do a random function that can output only a few options?(Ayal)
  • In my sketch, I used the map() function for the change of day and night. But how to make the stars only appear at night and then faded at the daytime while I move the mouse?(Ivy)
  • How can I make the running text background run smoothly and without any space between each letter? Why some texts cover on the top of others now? I typed (copied+pasted) all those texts line by line, is there any easier way to finish that work? Why the speed of my flowing text background became super slow after I click my mouse? How to make the fuzzy purple thing on P5.JS? (Chelsea)
  • Is it possible to group several objects and move it while I drag my mouse? (Ella)
  • How can I make a group of lines move together? (Anita)

Add Your Homework

Week 1

  • SET UP:

  • DO:

    • Here is an optional "take-home" quiz to test your knowledge. We'll be releasing one of these each week for self-study. We'll discuss answers next week in class.
    • Create your own screen drawing: self-portrait, alien, monster, etc. Use 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 and wrap all of your code inside a setup() function. Here's a sample example: Zoog
    • Write a blog post about how computation applies to your interests. This could be a subject you've studied, a job you've worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (Review and contribute to the ICM Inspiration Wiki page. In the same post (or a new one), document the process of creating your sketches. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?

  • READ AND WATCH:

    • Videos 1.1 - 1.3 -- note these were recorded last year and reference the desktop editor which we are no longer using this semester.
    • After you do your homework, watch 2.1 - 2.3 to preview next week's discussion.
    • If the YouTube ads / format bother you, please contact daniel.shiffman@nyu.edu for a link to a shared google drive folder.
    • If you prefer books, I suggest Chapters 1-3 of Getting Started with p5.js. If you are logged into the NYU network you can read it for free.

  • ASK QUESTIONS: Contribute at least 1 question below.

Questions | Examples

  • Perhaps an easy one: I had trouble with colorMode() and instead used color(). - Elizabeth
  • Is there an easy way to make a nice pattern like this one? -- Chelsea

Add Your Homework

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