Skip to content

Homework Dano

Jump to bottom Edit New page
nicktanic edited this page Dec 21, 2018 · 393 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!).

Randomizer

Week 14 Final Presentations

Final project presentations are Wednesday, December 5th. In class presentations will be approximately 8 minutes each. Please post your final project documentation to a web page (blog post is fine) and put the link below on this blog. This is due Friday, December 14 (at midnight). 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)

Week 13 November 28 -- One on One User Testing

####DAIJ

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

Present Projects

Week 10 Wed Nov 7

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:

  • Next Week:

    • Timothy
    • Elvin
    • Stefan
    • Billy
    • Tianyi Xie
    • Dan Sendas presentation
    • Alizarin

  • Next Next Week:

Links to Your Machine Learning Attempts

  • Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
  • Timothy -- sketch,blog
  • Elvin -- blog
  • Jacky,TianYi -- sketch
  • JB -- blog, sketch --doesn't work =[

Week 9 10 -- ICM Madness Workshop -- All sections meet Friday, Nov 2, 11am-2pm!

Eat Dumplings

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
  • use version 0.6.1.

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)

  • Is there a good way to upload a sketch from an editing environment like Atom to the web to share? Either to the p5 web editor or elsewhere. - Stefan

Homework Links

Week 6

#include <Servo.h>      // include the servo library

int incomingByte = 0;
Servo servoMotor;       // creates an instance of the servo object to control a servo

void setup() {
  Serial.begin(9600);       // initialize serial communications
  servoMotor.attach(2);  // attaches the servo on pin 2 to the servo object
}

void loop()
{
  //OUTPUT FROM ARDUINO TO P5
  int analogValue = analogRead(A0); // read the analog input
  Serial.println(analogValue); //send it to p5    
  // println corresponds with readline or readstringUntil(‘\r\n’) in p5 
  
  //INPUT FROM P5 TO ARDUINO (less commmon)
  incomingByte = Serial.read();
  if (incomingByte != -1){ //-1 Means nothing came in from p5
    int servoAngle = map(incomingByte, 0, 255, 0, 179);
    // move the servo using the angle from the sensor:
    servoMotor.write(servoAngle);
  }
}

  • DO:

    • Do something interesting to connecting p5 and arduino.
    • Another options is to create your own HTML page with the following:
      • HTML Elements generated by your p5 sketch
      • Some kind of mouse or keyboard interaction with an HTML Element using a callback function you write.
    • Another option is to Mash up PComp and the DOM (Web) Elements
    • 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

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:

Questions (example questions)

  • Your question here.
  • Is there a way of passing a custom caller ID when setting a callback function?, Answer: Not with DOM library callbacks but you can with objects and with a fancy thing called closure .Timothy
  • How to apply a function a onto a function b but not onto a function c Answer: Sorry don't understand the question.?
  • what's the best method of using "Splice" to remove an object that's clicked on?

Questions (example questions)

  • Your question here.

READ / WATCH

Examples

Homework Links

Week 4

Questions (example questions)

  • Your question here.
  • Is there a way of passing a custom caller ID when setting a callback function?, Answer: Not with DOM library callbacks but you can with objects and with a fancy thing called closure .Timothy
  • How to apply a function a onto a function b but not onto a function c Answer: Sorry don't understand the question.?

Homework Links

Week 3

Questions (example questions)

Partners

  • Alizarin Waissberg Daniel Otero
  • Joseph Baker MaryAnn Talavera
  • Jacky Chen Stefan Skripak
  • Tanic Nakpresha Tianyi Xie
  • Tsimafei Lobiak Tushar Goyal
  • Billy Bennett Elvin Xingyu Ou
  • Yuanyuan Wang Hunter

Homework Link

Week 1

  • RESOURCES FROM CLASS:

  • SET UP:

  • DO:

    • 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 do I get values to oscillate between set points, as opposed to generating random numbers in a set via random(); ? code example here - Billy Bennett Maybe try sin or cos instead of random. Might need more variable for that.
  • Do yellow error messages indicate performance problems, as they don't seem to prevent the code from running as expected?, Tsimafei Lobiak Life is too short to worry about the yellow.
  • Orders affect overlays, is it possible to have certain codes set on specific task that has its own "end" instead of affecting all the later codes?(for example: rotating one shape instead of rotating all the shapes that is after the rotate command), Elvin Ou Look into the push and pop commands
  • What would be a short way to code a simple flower? How to duplicate an object consisting of several shapes? What's the simplest way to translate a vector drawing into a javasctipt we can edit?, Alizarin Bad news is that there is no simple answer here. Good news the long answer is the syllabus of this course. You could check to see if Illustrator has an export to JSON option. You might be able to get some cheap effect with the latter with translate and rotate.
  • Do you have to re-define things such as stroke and color for every object? I find that I'm constantly overriding objects that don't have a value for stroke or color with the proceeding object's setting. Redundant commands hurt my eyeballs. -JB This assignment should hurt all over. All the color commands are like policies that are true until further notice. You could look into the push and pop commands that remember the old settings push() and reset things pop().
  • Apologies for the open-ended question, but I am curious about some possible examples of situations in which categorizing variables within an object allows you to do things otherwise not possible? As far as we have learned the only purpose is to help with organization of our sketches but otherwise the code runs the same. - Stefan S Nothing. It might make your code a bit more readable but overall that video is really much less important. Sorry for the time you spent on that video.
  • Is there has any function or short way can do mirror symmetry? so it only needs to draw the half of the picture when we create symmetric images. -Yuanyuan Wang You could play with rotateY(PI) or rotateX(PI) for horizontal or verticle symmetry but there is a little bit more to understand about the rotate commands. You could also use the p5 width variable to get the inverse of any value rect(125,125,20,20); and then rect(width - 125,125,20,20);
  • Is there a way to lasso or group a bunch of objects and shift their x or y coordinates over without changing their positions in relation to each other? - MaryAnn T. There are several advanced ways to do this. The quick and dirty way to do it is using the translate command which like its sister the rotate command comes with a bunch of unexpected side effects but try it with out background() and see what happens.

Add Your Homework

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 possible to create 2 layers which would act as separate canvases, so that one of them can have a permanent background, which is called in setup(), and other would have a dynamic background called in draw()? Look into the createGraphics command.
  • How to "duplicate" groups and modify small changes. if one module is made, what's the variable to duplicate the module instead of manually recreating new ones? -Elvin Ou If you mean a module of code the answer is usually making a function with parameter variables. Then you can call that function and send along slightly different values into the parameters every time.
  • I really got hung up on question 3 of the quiz, specifically because I was focused on trying to control the speed at which the distance between the square and the mouse decreased, rather than focusing on just adjusting the X and the Y so their ratio stayed the same. Is there a way to write the same code but specifically say something like "I would like the dist() between the mouse and the square to specifically decrease 1 pixel per draw()"? - Stefan ** An if statement might be the most explicit way to do this but the math abs(dx)/dx might always give you -1 or 1**
  • What is the term (word?) I should research into if I want to group two separate shape (with different variation commands)and give them a new command together? – Tianyi This might sounds like a job for object oriented programming. No particular command but a whole organizational technique. You can jump ahead in the book or the videos to check it out.

Homework Links

Write a small message here explaining this change. (Optional) © 2018 GitHub, Inc. Terms Privacy Security Status Help Contact GitHub Pricing API Training Blog About Press h to open a hovercard with more details.

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