Skip to content

Homework Mimi Tuesday

Jump to bottom Edit New page
Tiri edited this page Dec 13, 2016 · 320 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!).

Book Office Hours

Week 13 Final Project Presentations!

  • Brackets Editor
  • Guidelines for Final Project
    • 5 minutes
    • Title
    • What is it?
    • Context
    • Process - What significant things happened since you presented your proposal to influence your project?
    • Next steps?

Final Project Links

Weeks 11

  1. 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 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. Kinectron + WEBGL resources

  3. Examples

Questions (example questions)

Group B

Week 10

  1. 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 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. Try all the examples. Answer these questions about the Mobile example assigned to you.

    1. Alex + Yuqiao - Simple Draw: Code | Mobile
    2. Chloe - Multi-touch Draw: Code | Mobile
    3. Brandon - Device Moved: Code | [Mobile] (http://alpha.editor.p5js.org/full/SJdJr3Jxx)
    4. Chan - Device Turned: Code | Mobile
    5. Luqian - Device Shaken: Code | Mobile
    6. Samantha - Mouse or Touch: Code | Mobile
    7. Paula + Ziyu - Device Moved, Gravity: Code | Mobile
    8. Tiri - Acceleration 3D: Code | Mobile
    9. Sean + Younho - Device Shaken, Balls: Code | Mobile
    10. Nouf - Geolocation: Code | Mobile
    11. Yihan - Track Geolocation: Code | Mobile

  3. Resources

Questions (example questions)

Group 1

Group B

Week 9

  1. SIGN-UP TO PRESENT NEXT WEEK

    • Data
      1. Paula Leonvendagar
      2. Nouf Aljowaysir
      3. Alex Zimmer
      4. Chloe Gao
      5. Yihan Chen
      6. Ziyu
      7. Yuqiao
    • Sound/Image/Video
      1. Tiri
      2. Younho
      3. Brandon
      4. Luqian
      5. Dong Chan Kim
      6. Sean Kim
      7. Samantha Schulman
    • SAMPLE Presentation
      • Title for your Piece: News Impressions
      • 1-sentence Description: An impressionistic, scrambled visualization of the news.
      • Context: Screensaver or digital wall art.
      • How does it work: Pull articles from the NYT. Chop up the sentences into words. Scramble the words. Randomly insert graffiti words. Visualize words one at a time on the screen.

  2. DO:

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

  4. Examples

Questions (example questions)

  • I need to review how to use and find the array values from a JSON file - Samantha

Homework Links

Week 8

  1. TEST YOURSELF

  2. DO:

  3. READ / WATCH

  4. Examples

Questions (example questions)

  • How can I reset data with empty canvas(or browser) whenever the button is pressed?

Homework Links

  1. TEST YOURSELF

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

  3. READ / WATCH

  4. Examples + Resources

Questions (example questions)

 * Nouf - I dont get the difference between parent() and class() usage in sketch 
 * How to find the pic address in the creatImg <"address">
 * Can we control all the elements in HTML from P5? Can we time them to appear from P5?
 * How can we style the font style from P5 instead of CSS?

Homework Links

Week 5

  1. TEST YOURSELF

  2. 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!
    • 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();
  }
}

  1. READ / WATCH

  2. Examples

Questions (example questions)

  • If ball1 and ball2 are closing, how to make only these two balls change color?
  • Nouf - Can you help me figure out why it deletes that first balloon attached to a string if i click on another balloon in my sketch?

Homework Links

Week 4

  1. TEST YOURSELF

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

  3. READ / WATCH

    • Getting Started with p5.js chapters 10-11

  4. Examples

Questions (example questions)

  • Contribute your question here!
    • Is it possible to iterate or move an object slower while generating part of its movement randomly?
  • I would like to understand better the easing function.

Homework Links

Week 3

  1. TEST YOURSELF: Complete Quiz 3

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

  3. READ / WATCH

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

  4. RUN CODE

Questions (example questions)

  • How do I know when I need to make something a function?
  • [Tiri] From Mimi's Gradient example, what is the meaning of 255*x/width from line 8 that made gradient?Single Loop with Gradient

Homework Links

Week 2

  1. TEST YOURSELF: Complete the 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)

  • Why would you use x++ instead of x = x + 1?
  • Why does mouseButton not work properly when I recall setup()?
  • Can I set a variable with random? I tried to define and initialize it before function setup() and failed. (Is 'var cirX = random(1, 100)' before function setup() impossible?)

Homework Links

Week 1

  • LINKS FROM CLASS:

  • SET UP:

  • DO:

    • Complete questions 2 and 3 of the Week 1 Quiz and paste a link to your sketch in the Google Doc.
    • Create your own screen drawing: self-portrait, alien, monster, etc. Use only 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. Here's an 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:

  • TRY RUNNING CODE:

    • Try running the example code for Shiffman's videos. Chapters 1-4
    • Try running example code for Getting Started with p5.js book. Chapters 2-4
    • To run examples. Copy and paste the code from the .js file into a new sketch in your web editor and hit the Play button.

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

Questions | Examples

  • Name: Question...
  • Why are the parentheses after setup and draw empty?
  • Why do we need to write the function: "strokeWeight" before the shape function: ellipse,rect,line? -Brandon Kader
  • Samantha: How is an arc created? I was having trouble getting anything to appear from the arc() function.
  • Alex: How do you get a "function" (i.e rotate or strokeWeight) to apply to only one object, and not all the objects following?
  • Yuqiao: How to draw an arc in an unconditional angle such as 15° ，33°？
  • Tiri: How to move object to point at the angle or stroke of other object? , How do we add P5 to html?
  • Nouf: I would love to know if there is a simplified way to write the code that I did..
  • Younho : How do I change the order of layers among elements?

Add Your Homework

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