Skip to content

Homework Mimi

Jump to bottom Edit New page
wc-jennylin edited this page Jan 15, 2019 · 471 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!).

Week 14 Final Presentations

  • If your piece is intended to be interactive, someone else will demo your project
  • Prepare 3 open-ended questions. e.g. What's clear? What's confusing? How does that make you feel? (As opposed to yes-no questions like: Was that confusing?)

Please post your blog post and link to code.

Week 12

Resources from Class

Prepare a prototype of your project to user-test in class next week.

  • Show as much as possible. You won't be allowed to "explain" your concept during the user test.
  • What questions do you have about your project? Build your prototypes so you can answer those questions by observing how users respond to your prototype.
  • Working code is always good. But prioritize getting across your concept. Use paper, glue, sound, play-doh to quickly mock-up things that would take too long in code.

Week 11

Resources from Class

Week 10

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

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 links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

READ + RUN CODE

Questions (example questions)

  • Is there a limit to how many sounds/images you can play in one sketch? - Olivia

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

  4. READ / WATCH

  5. Examples

Questions (example questions)

  • How does the example in Quiz007 question 2 work? - Jenny
  • How can we load all the pages of New York Times article search API? -Nianqi
  • Is it possible to obtain entire articles from the NYT API and not just the main headlines, etc?

Homework Links

Present on Data
  • SU HE
  • Abi
  • Wenjing
  • Helen
  • Maya
  • Olivia
  • Nun
  • Chenyu
  • Jenny
Present on Sound/Video
  • Noah Pivnick
  • Bora Aydintug
  • Morgan Mueller
  • Ashley Jane Lewis
  • Clareese Hill
  • Nianqi Zhang
  • Zhe Wang
  • Your name here
  • Your name here

Week 6

Questions (example questions)

  • Your question here
  • How can I animate things in web using animate()?? -Helen
  • What does these lines of codes do setInterval(function() { console.log("HELLO"); serial.write(1); }, 1000); Is it necessary? - Jenny
  • Thinking about static vs. relative positioning. How can you make sure the position of your elements will be the same across platforms and different people’s browser windows? - Maya
  • How do developers use the web inspector/developing tools? What is its purpose? - Maya
  • How do we make html elements e.g. slide handle decimal values? - Nun

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)

  • why is there no mention of the constructor in either the Getting Started with P5.js text or the object-related Examples on the P5.js website? is using constructor in a Class a stylistic choice? - Noah
  • In Dan's videos, it says for (b of bubbles){ b.show();}, but Mimi says for (let b in bubbles){ bubbles[b].show();}. Has the syntax changed? - Jenny
  • When making the balls and deleting them if they collide with each other, how could the code successfully run half way, then an error appears? Also, how to delete both balls instead of just one of them when two balls collide? - Jenny
  • Is ' ' the same as " " for DOM elements? I tried both to create text in both buttons and paragraphs and the result seemed to be the same. - Jenny

Homework Links

Week 4

  • RESOURCES FROM CLASS:

  • TEST YOURSELF

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

  • READ / WATCH

  • Examples

Questions (example questions)

  • How do you embed a function into an object? (I don't quite understand the meaning of it) - Jenny
  • I had some trouble controlling the uniformity of my function. Is there a methodology that is not in the video that might help? -Clareese
  • What determines when an object has become sufficiently object-ified? Presumably as it becomes more complex a greater number of it's properties can be extrapolated as objects in and of themselves and I get that object-oriented coding facilitates modularity and re-use but are there performance gains and if so, is there a point of diminishing returns? - Noah

Homework Links

Week 3

Questions (example questions)

  • Your questions here.
  • What can we do if part of the code should be displayed with the background（） in setup function while other part should be displayed with that in draw function? - Nianqi
  • I think my question may be related to Nianqi's ... how does one make use of a for loop to generate a random distribution of drawn objects that are meant to stay fixed in place on the canvas (i.e., not continuously re-drawn in a new random distribution every frame)? - Noah
    • also, re: the Hover Panels exercise: would it not be easier to somehow define 'hovering' as the mouse being within the boundary of the object rather than using conditional logic to differentiate between the object and every other part of the canvas? - Noah
  • what's the difference between "var" / "let"? when to use which? - Nun
  • Can we go over some more examples of how to animate an algorithmic design? Do you have to use a for loop to create the original design and then a separate loop to make it change/animate it? - Maya

Homework Links

Week 2

  • LINKS FROM CLASS:

  • TEST YOURSELF: Finish the In-Class Quiz Post a url to your answers on the Google Doc.

  • 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

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

  • Your question here.
  • is it best practice to both declare and initialize a variable at the top of your code (i.e., let foo = 7; vs. let foo; then assign a value when needed) and if so, why? - noah
  • Are there tabs that can organize your code in p5.js? How can you avoid all of the scrolling? - Ashley Jane Lewis
  • How does gradient work? It seems like there are many ways to do it? How is it related to lerpColor? - Nun
  • How to change the color gradually without abrupt changes? - Jenny

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 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 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 change the rotate mode and make the object rotate related to its own center point (instead of rotating around the origin point of the canvas)? --- Wenjing Liu
    • I had this same question (how to change axis of rotation/if this is possible?) - Olivia Kung
    • I also have the same question (Still don't really understand how rotate works..) - Jenny Lin
  • Is it totally misguided to think of an array as a kind of temporary, rudimentary database? - Noah Pivnick
  • Is it possible to create a circular clipping mask over a rectangular GIF? Can you draw over video/gifs in p5.js? Where can I find current documentation to upload/save files to sketch? - Abi Muñoz
  • How to make specific degree of rotating an object on non-square canvas? Is it possible let p5.js to math the degree itself (like to do the Pythagorean theorem)？ How to flip an image? — Chenyu Sun
  • Google search revealed that p5.js can be used to manipulate video. What is the full extent of the manipulation? Can one have p5.js interpret video in different ways and use the interpreted data as input for generating new visuals? - Bora Aydintug
  • How to decide the points when drawing a curve? Draw it ahead of time in illustrator? - Nianqi Zhang
  • Is it possible to add more control points when drawing a curver? or let curve pass through more than two points? - Yunze Shi
  • Is clipping mask possible with JavaScript? - Jenny Lin
  • How do you create a gradient of color? Can you fill with images or patterns? - Maya Pruitt
  • Is it possible to locate the shapes more intuitively rather than guessing the coordinates? - Jenny Lin
  • How to make curves into close shape? Helen Tang
  • Does the auto-refresh exist in the DOM? If so, do artists use p5.js to perform live coding? Ashley Jane Lewis

Add Your Homework

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