Skip to content

Homework Shawn Thursday

Jump to bottom Edit New page
jaycee hermida edited this page Dec 22, 2016 · 240 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!).

Homework:

Final Project Documentation

  • Final project presentations are Thursday, December 8th. 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 16.
  • 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

  • This is the arbitrary randomized order, please shuffle your names as you wish.

  • If you are presenting outside of room 50, please indicate below.

  • Danni

  • Alejandro

  • Nitish

  • Jesal

  • Jinhee

  • Manning

  • Marco

  • Ahmad

  • BREAK

  • Akmyrat

  • Ari

  • Stanlyn

  • Swapna

  • Scott

  • Regina

  • Pan ---MindRider data vis

  • Jaycee

Week 13

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 ~6 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.

Group A Presenters: 12:25 - 1:15

Ahmad, Alejandro, Danni, Jaycee, Jesal, Jinhee, Manning, Marco

Group B Presenters: 1:40 - 2:40

Ari, Stanlyn, Swapna, Scott, Regina, Pan, Nitish, Akmyrat

Week 10

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

Week 9

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.
    • Use sound or camera input as a variable, track a color or track amplitude

  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. READ AND WATCH (optional):

Examples

Questions (example questions)

  • questions

Add Link Your Homework

Note that those of you who did not present last week will present this week as indicated below.

Week 8

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.

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

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

Examples

Questions (example questions)

  • questions

Add Link Your Homework

Note that half of you will present this week, the other half next. You should complete both assignments, however. Feel free to switch with each other if you would like to switch.

Week 7

Questions (example questions)

  • question
  • How do I make my createCapture video take a picture/snap/selfie? - Akmyrat

Add data set that interests you here

  • link to data set

Add Homework Here

Week 5

Don't forget!

Read / Watch

  • Videos 6.1-6.11 cover more about objects, arrays, and the constructor function.
  • Getting Started with p5.js chapters 10-11 also cover the same material.
  • Next week we'll be covering the p5.js DOM library. If you want to get a head start take a look at

Do

  1. 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.
  2. 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 constructor function with just variables and generate one single object.
    2. Put one or more functions in the constructor 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)

  • Contribute your question here!

Homework Links

Week 4

  1. DO: 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

    • Getting Started with p5.js chapters 10-11

  3. Examples

Questions (example questions)

  • Contribute your question here!

Homework Links

##Week 3

Assignment

  1. This week, you’ll want to work with rule-based animation, motion, and interaction. Start the the below assignments by working with your partner as a team. Try out pair programming where you come up with an idea (keep it simple to start), decide how to implement it together, then have one person type while the other person keeps a birdseye view. Following that, you are welcome to continue working together, or divide the idea into two parts and combine those parts or swap sketches and riff of of your partner's work or continue on 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)

  • I've been having difficulty make "strokeWeight" affect certain drawings. And I'm not sure how to make certain drawings exclusively do different things. It seems like with the way i've been coding, the instructions are being applied to everything. - Ari

Homework Links

  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
  1. 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.)
  • Here is an optional "take-home" quiz to test your knowledge.
  1. 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.
  1. EXAMPLE CODE:

Questions (example questions)

  • Regina -- In my sketch the wings seem to 'stay behind' What is going on there? / Also, how can I make the color change randomly but way more smoothly?
  • Scott -- how do we use push() and pop() to make something rotate around a fixed axis (e.g. the object's center)? -- I second this question! - Jesal

Homework Links

Week 1

  • SET UP:

  • DO:

    • Re-create your drawing from the graph paper in p5.js. See how the instructions have to differ from what you wrote out.
    • Create another 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: Martian Moon Man
    • 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 via safari books online.

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

Questions | Examples

  • How could I automate the color change in the pictures? I guess this is next class topic, but I'm comming in with this ---Regina C
  • How can I mask an image into a shape ? --- Alejandro.
  • Why are curves so confusing!? I can't figure out how to flip them. How do you do this? -- Jesal
  • What is my code missing in order to allow a "mouse event" to occur? -- Ari
  • How to make iterative pattern? For example the floor pattern of Bobst Library --Danni
  • How can I place shapes in a random position and random angle, but not just once. I want the program to repeat it a few times so that I can get a nice pattern. Is there a simple was to achieve this? --Pan
  • How to make fill colors strobe/pulse/evolving color change? -- Scott

Add Your Homework

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