Skip to content

Homework Mimi Tuesday

Jump to bottom Edit New page
mimiyin edited this page Sep 24, 2018 · 324 revisions

Week 14: Final Presentations!

  • Someone else will demo your project
  • Prepare 3 open-ended questions. e.g. What's clear? What's confusing? (As opposed to yes-no questions like: Was that confusing?)

Final Documentation

Week 12

Week 11

Week 10

  1. Sign-up to present:

  2. Complete Quiz with your partner

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

  4. Links from Class

Week 8

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

  2. READ + RUN CODE

  3. LINKS FROM CLASS

  4. More Sound and Video resources from Shiffman

Questions (example questions)

  • Your question here
  • How to deal with very slow animations? Techniques to speed up sketches?

Homework Links

Week 7

  1. SIGN UP TO PRESENT

  2. TEST YOURSELF

  3. DO:

  4. READ / WATCH

  5. Examples

Questions (example questions)

  • How can I reset data with empty canvas(or browser) whenever the button is pressed?
  • Advantages of JSON v. CSV? Is JSON primarily a way to pull data from the web?
  • If I pull data from relatively unformatted source (\n separated values), should I put it into JSON or an array of arrays?
  • Running order within preload? I had trouble making loadJSON and loadStrings run in the order I wanted them to.

Homework Links

Week 6

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

  3. READ / WATCH

  4. Examples + Resources

Questions (example questions)

 * Can you nest DOM elements in p5.js?
 * What does "break();" do? 
 * How do file paths work for the p5 DOM library?

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

  1. READ / WATCH

  2. Examples

Questions (example questions)

  • Your question here.
  • Which elements of this week's videos belong to p5.js specifically, rather than javascript as a whole? Or the DOM as a whole?
  • How to delete an object in an array by clicking it, using the "splice" function?
  • how do you apply a function such as function mousePressed() into an object function? – if it is even possible?
  • how do you create a nested loop of objects?
  • How do you manage when you have arrays in arrays?

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)

  • Your question here.
  • How to initiate variables within a loop for use outside of the loop? I would like to make several ball object-literals inside of a for loop.
  • How to have objects interact with each other? Will I slow down program by looping through an array within a loop through an array?
  • How to slice while looping? Do I need to update index?
  • Can an object perform functions on itself without being called? I.E. Could an object change its size if it approached a certain point?
  • Is it possible to use the function mousePressed in objects?

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)

  • Why can't we just use Adobe Dreamweaver to do what we do in p5? Isn't there any easier way to do all of this?!
  • I used the round function in my rework of my partners sketch, but the reference page did not have any information on how it works. Does it round up? round down?
  • Is there a way to change the background without erasing previously drawn shapes?

Homework Links

Week 2

  1. LINKS FROM CLASS:

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

  3. 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 it matter that certain words are capitalized in parenthesis? e.g. angleMode(DEGREES)
  • It is possible to make more wavy/curvy movements?
  • Aidan - How to keep track of / redraw multiple objects generated by user?

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

  • Question...
  • What is the axis that something rotates around? And how can you use translate() to fix that without wrecking the rest of the drawing?
  • How can I create repeating patterns/shapes without using several shape functions and individually placing them? Can I use some kind of loop function?
  • Is there a grid function that can be laid out on the canvas as a temporary ruler so that you can locate x & y points with greater ease?
  • Is there a way to create gradation in color within a shape?
  • How do you start and stop an arc at different points along a circle using PI, HALF_PI, QUARTER_PI, and PI_TWO?
  • Can I make the first two parameters of rect() as the lower-right corner of the shape when I draw it?

Add Your Homework

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

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