Skip to content

Homework Luisa

Jump to bottom Edit New page
winnieyoe edited this page Dec 23, 2018 · 334 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!).

--presentation

User testing, Part II

  • Group testing their projects:
    • Anna Gudnason
    • Joy Antwi
    • Topher Blair
    • Carol Jingjie Chen
    • Dana Elkis
    • Ada Jiang
    • Lillian Ritchie
  • Testers
    • Lydia Jessup
    • Eva Philips
    • Emily Lin
    • Winnie Yoe
    • Marcela Mancino
    • Hannah Tardie
    • Sid Chou

User testing, Part I

  • Group testing their projects:
    • Name - Notes from Play Testing
    • Lydia Jessup - Preparation and reflections
    • Eva Philips
    • Emily Lin
    • Winnie Yoe
    • Marcela Mancino
    • Hannah Tardie
    • Sid Chou
  • Testers:
    • Anna Gudnason
    • Joy Antwi
    • Lillian Ritchie
    • Topher Blair
    • Carol Jingjie Chen
    • Dana Elkis
    • Ada Jiang

Week 9

Resources from Class

Readings:

Creative Applications:

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)

  • 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 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
  • What is the difference between "let doc of docs" vs "let doc in docs"? Could we go over the difference between "in" and "of" in this example (Referencing: Quiz Qs #2) - Emily.
  • Could we go over the function processSnippets(data) section of Quiz Qs #2? - Emily
  • Is there ever a reason to use ' instead of " when writing a string? Or is it just an aesthetic choice? -Lillian
  • in the example, nfc(4) only has 3 digit after decimal? - Sid
  • is there a way to be able to know if two elements in the array match/have the same value? I'd like to create a size hierarchy that makes a word in an article larger by how often it appears, but am not sure how to get p5 to recognize text as matching. -Hannah
  • how to assign a shape to each element in an array? -dana
  • how to export an ATOM file so someone can see my sketch? -dana
  • Can you assign characteristics in an class like objects have? - Lydia
  • How do you pass an array into an object? I kept getting errors when I tried and couldn't figure out what I was doing wrong - Lydia

Homework Links

Week 6

  • IN-CLASS:

  • TEST YOURSELF

  • DO:

    • Create your own HTML page with the following:
      • 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.
    • Another option for your assignment this week is to play with an existing website rather than create your own from scratch. To do that you will need to save it and upload it to your web editor. Here are instructions on how to do that.
      • Let’s say you want to work with the awesome MDN documentation page on the animate() function.
      • Go to the File>>Save as… menu. Rename the file something short like animate.
      • You will end up with 1 file that’s called animate.htm and a folder of supporting files (including the css style files) called animate_files.
      • Open animate.htm in a code editor (Brackets, Atom, Sublime)
      • Copy the html from animate.htm and replace the html in the index.html file on the p5 web editor.
      • Create a folder in the web editor called animate_files and upload all the files from the saved folder INTO the one in the web editor. (If you click on the folder name in the web editor, you will see a little down arrow to the right of the name. Click that and you will see an option to Add File.)
      • Voila, you should be able to run the saved website from the web editor.
      • Remember that if you want p5 functionality, you will need to copy and paste the p5 script tags back into your index.html file.
      • If this is all too much, I’ve set up this lovely specimen from the 1990s here for you to play with. You can File>>Duplicate it into your own account and go from there!

  • READ / WATCH

  • Examples + Resources

Questions (example questions)

  • Your question here
  • is there special character in js, ie, in html "&Theta" - Sid
  • Slider disappeared when I tried to parent it to a paragraph? - sid
  • If I add DOM elements in my html file, i.e '< p > this is a paragraph < /p >', how would I set the location of the paragraph anywhere on the window or relative to canvas? - Ada
  • What is the difference between adding style elements inside HTML file with <style>P{}</style> and setting styles in the css file? are there any examples? - Ada
  • Is there a way to create more than one p5 canvas on the webpage? - Lydia
  • Can you add a photo inside an element (div perhaps?) other than the canvas? - Lydia
  • I had trouble passing elements into functions sometimes. Do you know why this may be happening? I was trying to make one "highlight" function and pass different DOM elements in - Lydia
  • Is there a best practice for arranging elements on a page? - Lydia
  • Is there a way to compress variables in p5 when using them to select/adjust elements w/ id tag's in the html file? Hannah

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)

  • Your question here.
  • In "Bubbles + arrays + click + hover", isOver is a function or a variable? Marcela
  • Is there a shortcut such as += or -- to multiply and divide the variable's value? Marcela
  • In the 3rd question of the quiz, I did this, and in one version I forgot to put () after IsOver. That caused the sketch to delete all my bubbles in a weird order. Why is that? Marcela
  • Is there an easy way to rotate an instance of a class without affecting other instances? Eva
  • Is there is a way to create a grid with arrays, instead of for loops ? If so, then is it better practice to use arrays instead of for loops for grids? How do you index an array within an array? Can you have an array in an a class? Emily
  • What is the definition of object? Marcela
  • Can you explain a little bit about forLoops in the setup vs. draw // why they have to be separate and why they can sometimes be together. I was getting a lot of errors when I had my array.length in the draw section for the mouse Splice homework that certain functions I declared in the class were not defined, but it seemed that when I fixed my forLoop the error went away. It is also confusing why in the setup you can have an i < 100 (to create the 100 balls) in the setup but then in the draw it is i<array.length. Why can't I just declare array.length = 100 in the draw function then use array.length in both for loops? Hannah
  • how can i create a more richer world with textures / layers, etc... i feel like everything is very flat. - dana
  • In the quiz in question four, for some reason there is usually one ball that doesn't disappear in my sketch. what could be causing that? Lillian
  • Can we review how millis can be used again? Lillian

Homework Links

Week 4

Questions (example questions)

  • Your question here.
  • On some of the newer coding train videos he started using Atom instead of the p5.js web editor. I'm thinking about switching over to re-organize my code this week. Has anyone else used Atom? Is it worthwhile? Are there good tutorials? - Topher
  • what is the difference of creating an object with Class myObject{} vs creating an object with function myObject{}? - Ada
  • How can I have many objects that are draggable independently from one another? Tried to create a version of this code: https://github.com/ITPNYU/ICM-2015/blob/master/03_interaction/GUI/draggable/sketch.js , but with multiple objects. However, they ended up dragging/moving all together. - Emily

Homework Links

Week 3

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Complete Quiz 3

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

  • READ / WATCH

    • Videos 5.1-5.3 in the learning p5.js series.
    • Getting Started with p5.js chapters 9-10

  • RUN CODE

Questions (example questions)

  • Your questions here.
  • When I try defining a color before setup, the console shows "color is not defined". Why is that? - Marcela
  • What does "let" mean? How is it different than "var"? - Marcela - Luisa: see here

Homework Links

Week 2

  1. TEST YOURSELF: Take this Quiz Post a url to your sketch on the Google Doc.

  2. 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.
  • 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!
  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.
  2. RUN CODE:

Questions (example questions)

  • Yor Name -- Your Question
  • Sid -- Line 25
  • Sid -- Line 38
  • Lydia -- What are the strategies for drawing shapes that reference each other when the numbers don’t work out to nice ratios?
  • Lydia -- When I made my shapes fade, you could start to see the layers underneath. Is there a way to avoid this (so you don't see the layers)?
  • Lillian -- This question is less about p5.js and more about documentation in our blogs. Why is it that when I use the p5 editor imbed code in my blog posts, wordpress just deletes the imbed code when I publish my post?

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:

    • Videos 1.1 - 1.3 -- note these were a couple years ago and reference a different desktop editor which we are no longer using.
    • 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 for a link to a shared google drive folder.
    • If you prefer books, Chapters 1-3 of Getting Started with p5.js cover the same material. If you are logged into the NYU network you can read it for free.

  • ASK QUESTIONS: Contribute at least 1 question below.

Questions | Examples

  • your question, your name
  • Are there references or guides to help you work in the RGB color system?, Eva Philips
  • Is there a quick way to superimpose a grid on your canvas to get a sense of what the x,y coordinates of an area are when you're drawing?, Lillian Ritchie
  • Is there a way to rotate just one object? When I tried to rotate just one ellipse using the rotate () function, it would rotate the entire image, Emily Lin
  • Is there a way to generate a pattern within a mask/shape? Emily Lin
  • What are the practical differences between p5.js and Processing? Are there any significant differences in the syntax? Marcela
  • Is there a way to export the final project? How do I put that inside the webpage? Marcela
  • How can i create a automatic change/increasment/etc.. in a specific parameter of a shape? - Dana Elkis
  • Why is that when I use noLoop(), it still affects the second item that I input afterwards? I was only able to resolve it using push() and pop(). - Winnie Yoe
  • What methods do people use to keep track of the location of parts of the drawing and make calculations for where new ones should go? I was drawing out some of the coordinates, but I'd love to know of other methods or standards that people find helpful. - Lydia Jessup
  • Is there a way to distort an image? - Carol Chen
  • Is there a way to change the the the pace of moving objects? - Joy Antwi

Add Your Homework

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