Skip to content

Homework Shawn

Jump to bottom Edit New page
ManuJain5 edited this page Dec 16, 2018 · 258 revisions

Info

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 5th. In class presentations will be approximately 8 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 14.
  • 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. 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:15 - 1:20

Manu, Antonio, Jasper, Veronica, Gilad, Suzanne, Ellie/SJ

Group B Presenters: 1:35 - 2:40

Julia, Dylan, Casey, Shiyu, Bilal, YG, Khensu-Ra

Week 12

Examples from Class

Week 11

Examples from Class

Week 9

Examples from Class

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:

DO:

  • Create a sketch that uses media generation, playback, or analysis (sound, although we haven't covered video in class, feel free to tackle it with the videos and on your own). 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 links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

READ + RUN CODE

Questions (example questions)

  • Your question here

Homework Links

Week 7

  1. IN-CLASS

  2. TEST YOURSELF

  3. DO:

    • Create a sketch that uses an external data source. Consider building on top of your last 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 working with

  4. READ / WATCH

  5. Examples

Questions (example questions)

  • Your question here

Homework Links

  • Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments

  • Dylan -- Blog, Sketch, Fullscreen -- Can't get particular url to open. NEED HALP!

  • Khensu-Ra --Sketch, [Fullscreen] -- Looking to explore sound visualization more.... Here's a start!

Present on Data
Present on Sound/Video

Week 6

Homework Links

Week 5

RESOURCES FROM CLASS

TEST YOURSELF

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

Questions (example questions)

  • How to work with class files. Suzanne Li

Homework Links

Week 4

Questions (example questions)

  • How can I embed a function into an object for my code? Are there examples? This question isn't brilliant. -Suzanne Li

Homework Links

Week 3

Questions (example questions)

Homework Links

  • Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
  • Veronica Alfaro -- Blog, Sketch 1, Sketch 2 -- worked on the slider and the grid with Casey M Conchinha.
  • Casey Conchinha -- Blog, Base, Individual -- worked with Veronica
  • Khensu-Ra Love EL -- Blog, Button -- Collaborated with Dylan Dawkins.
  • Dylan Dawkins -- Blog, Sketch -- Collaborated with Khensu-Ra Love El aka Sun God.
  • Ellie Lin -- Blog, Sketch -- worked with Jasper Wang
  • S.J. -- Sketch1, Sketch2 -- worked with Manu
  • Manu Jain -- Blog, Sketch -- Collaborated with S.J.
  • Shiyu Chen -- my blog,sketch Worked with Julia and Yuguang
  • Suzanne Li -- Blog,Sketch -- worked with Gilad
  • Gilad Dor --Blog, Sketch -- worked with Suzanne
  • Bilal Sehgol -- Blog,Sketch feat. great man Antonio

Week 2

  • REVIEW

    • 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

  • EXAMPLES FROM CLASS

  • 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.
    • e.g. Try refactoring your Week 1 HW by removing all the hard-coded numbers except for createCanvas(). Have some of the elements follow the mouse. Have some move independently. Have some move at random.
    • e.g. Do the above but change color, alpha, and/or strokeWeight instead of position.
    • Or do something completely different!

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

  • RUN CODE:

Questions (example questions)

  • Julia: When trying to create a variable that changes every time we reload the page, I wanted to create a global variable with random but random isn't able to be called outside of a function?
  • How do we animate text like that of matrix's opening scene? -Suzanne Li
  • Khensu-Ra (Ra): How do we make our text stretch when scrolling across it with the mouse?

Homework Links

Week 1

  • RESOURCES FROM CLASS:

  • SET UP:

  • DO:

    • Complete this quiz. Our weekly quizzes become the basis for the next class. You must be logged in with your NYU account to access the quiz.

    • Create your own poem or self-portrait. Use the p5.js DOM functions to create a content with createP(), createDiv(), createA(), createElement() and/or use 2D primitive shapes such 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 DOM example: Ps and Ps and here's a drawing 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 sketch. 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:

  • ASK QUESTIONS: Contribute at least 1 question below.

Questions | Examples

  • your question, your name
  • How to make an arched ellipse. Julia
  • How to make various shapes connect seamlessly? Khensu-Ra
  • How would you animate a walk cycle? Dylan
  • How to make rounded corner quad shape? S.J.
  • How can we efficiently figure out the arguments of shapes in P5 if we're trying to mimic the shapes in a given, flattened image? Yuguang
  • How can we map out the precise coordinates of an image and convert the units in code? Suzanne Li
  • Why is embedding a p5.js sketch in wordpress so weird? Casey Conchinha
  • How to display a grid on a canvas to simplify coordinate location? Gilad Dor

Add Your Homework

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