Skip to content

Homework Dano Wednesday

Jump to bottom Edit New page
Jason Yung edited this page Dec 18, 2017 · 270 revisions

Contact

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

Final Project Documentation

  • Final project presentations are Wednesday, December 6th. In class presentations will be approximately 15 minutes each.
  • Please post your final project documentation to a web page (blog post is fine) and link next to your name below. This is due Friday, December 15.
  • 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)

Schedule and links

Links from the last class.

  • Outside Web Editors. Atom for example. From the p5 web editor, use "Download" menu item under file menu to bring files down onto your computer. Then open them within Atom.
  • There is a Shiffman Video for this but it is a lot about a local server, I would just install "Atom Live Server" package (search in package installation preferences) within the Atom program.
  • MLAB Example is showing three new things.
    • MLAB database as server API
    1. First make an account and get key at MLABS and # for an account and get an apiKey
    2. Make a database and then a collection within MLABS interface and plug those names and key into the code.
    • Some jquery calls, notice jquery added as library in html
    • Instead of giving name of callback function, just giving the function directly without a name (anonymous)

Do Your Final Project Proposals

You should be trying a few technical proofs of concepts. Identify technologies that might help you and see if you can get a hello world to work. You can make suggestions for demos for next week. Keep a bullet point journal of your progress in a running blog post and link it below. eg

  • decided to work on project about the sun
  • not going to worry about generality for now
  • found database of solar energy with api at solar.com
  • jenny told me that my problem was with cross domain error and needed to add jsonp
  • got data in json showing in cosole
  • wondering why anyone will care, maybe if I connected it with heat
  • looking into relays for turning on and off heat lamps

Links to your journal posts

Demo suggestions for next class:

  • suggestion 1

Final Project Proposals

Final projects are a creative idea inspired by the concepts in this class. There is no requirement to use a particular aspect of programming. The idea and your enjoyment and interest in the idea is what counts. Some things to remember.

  1. Keeping things simple and small in scope is a plus. If your project idea is a big one, consider documenting the larger idea but implementing just a small piece of it.
  2. Also think about making a final project for a small audience, even one single person like a family member or friend. . . or yourself. This can be a good way to focus your idea and design process. "Generalizing" the idea can come later (or maybe not at all.)
  3. Final projects can be collaborations with anyone in any class.
  4. Final projects can be one part of a larger project integrated with Physical Computing or another class.

What you need to do now:

  1. Final Project Proposals: a few minutes of slides, sketches...something to ILLUSTRATE what's in your head.

    • Collect inspirations: How did you become interested in this idea? quotes, photographs, products, projects, people, music, political events, social ills.
    • Collect source material: drawings, images, videos, sounds, text
    • Collect code: your own sketches and/or 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. Plan to present your idea in ~5 minutes leaving about 10 minutes for discussion. You can present your idea however you like visually, but make sure you also document your thoughts in a blog post linked below.

  3. Links for Mobile

Final Project Proposals

Final Project Presentation Materials

Week 7.5 ICMadness All sections meet Friday, October 27, 11am-2pm!

Week 8

  1. 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 or a video.
  2. 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. Resources

Examples

Week 7

Start thinking about and doing some mini trial runs for a final project. They can be small sketches that form a tiny component of a larger idea.

  1. Create a sketch that uses an external data source. Plan to present in class using the classroom computer or your own laptop if you prefer. 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.
    • Try one of the APIs from the examples below: Wordnik, NY Times, Giphy, Wikipedia
    • Here's a list of other data sources you might investigate and try.
    • If you are interested in maps, check out ITP 2nd year Cris's Mappa p5.js library.

  2. Create a blog post documenting your work and process. Include links to other projects that serve as references and inspiration for your work.

  3. READ AND WATCH (whatever is helpful to you):

Examples

Questions (example questions)

  • How to send JSON files with username and password to login to API?
  • How to include multiple APIs?

Add Link Your Homework

Week 6

Links from Class

  • SERIAL

Simple Arduino Code for Sending Analog Readings

void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensorValue = analogRead(A0);
  Serial.println(sensorValue);
  delay(1);       
}

READ / REVIEW

DO

  • Create a sketch that gets you beyond the p5 Canvas

    • Do some fun that connects physical sensor or actuators with p5 running on your lapto
    • Create HTML elements in p5 or connect (select()) to elements create in html
    • Some kind of interaction with an HTML Element using a callback function you write.
    • These are in the same week only because they both happen to use "callback" but just for the hell of it maybe have arduino control dom objects or visa vera?

  • Next week we will look at working with data and APIs in class. If you feel so inclined you can take a look at some of the video tutorials in advance. Please add a link to a data set or "API" that interests you. You don't have to know anything about how to use it, but having a list of examples we can examine in class next week will add to the discussion. You can also contribute to this wiki list of data sources.

Questions (example questions)

  • How to rewrite existing paragraph of text in HTML using its ID?

Add data set that interests you here

  • IBM Watson Tone Analyzer – Link

Add Homework Here

Week 5

Read / Watch

Do

  1. 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. Write a class with a constructor function and generate one single object.
    2. Put one or more functions in the class function and call them on the object.
    3. Try making two objects without an array. Can you make them different?
    4. Duplicate the object using an array and make as many as you like!
    5. See if you can add an object of one of your classmates into your sketch

Why don't they look like Dogs?

let allDogs = [];

function setup() {
  createCanvas(400, 400);
  //create the object here or in mousePressed
  for (var i = 0; i < 10; i++) {
    allDogs[i] = new Dog(i * 20, i * 20);
  }
}

function draw() {
  background(220);
  for(var i = 0; i < allDogs.length; i++){
    allDogs[i].move();
    allDogs[i].check();
    allDogs[i].show();
  }
}

class Dog {

  constructor(x, y) {
    this.x = x;
    this.y = y
    this.speed = random(5);
  }

  move() {
    this.y = this.y + this.speed;
  }

  check() {
    if (this.y >= height) {
      this.y = 0;
      this.speed = random(5);
    }
  }
  show() {
    ellipse(this.x, this.y, 10, 10);
  }
}

function mousePressed(){
  allDogs.push(new Dog(mouseX, mouseY));
}

Example Code and Quiz

Questions (example questions)

  • your question here (name)
  • how do you easily remove an array element in JS, right now I am using the splice method, but it does not always work (Blair)

Add Your Homework

Week 4

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

    • Break code out of setup() and draw() into functions.
    • Use a function to draw a complex design (like this) multiple times with different arguments.
    • Write a function to that returns the result of a mathematical operation that you need to do several times in your code.
    • Try working in pairs as specified below. Can you swap functions and riff of of your partner's work? You can post together or break off and complete the assignment individually.

  2. An optional quiz to test your knowledge if you like.

  3. READ / WATCH (Nothing required, read or watch what you find most helpful)

    • Videos 5.1-5.4 cover functions. If you want to get started on what we'll discuss next week, you can't just yet! There are a 6.x series of videos about objects, but I'm making new tutorials this Friday with something called classes. Last year, I emphasized "JavaScript object literals" and the "JavaScript Constructor function" for making objects, but this is no longer the current way to do object-oriented programming in JS. I'll discuss more about this in class.
    • If you skip ahead to objects this is the new syntax for creating classes

  4. Examples

  1. Pairs
  • Andrew Urodov –-  Mengzhen Xiao
  • Luna Olavarría Gallegos -- Adekemi Sijuwade
  • Blair Simmons -- Dom Chang
  • Sam Chasan -- Jason Yung

Add Your Homework

Week 3

  1. EXAMPLES FROM CLASS

  2. DO: In general this week, you should work with rule-based animation, motion, and interaction and scale.

    • 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.
    • Try to use the scale of a for loop to make many of something.
    • Or you could use the scale of a for loop to check on many things (Like Pixels Perhaps)

  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)

  • Do you need to use arrays to create multiple instances of an object that have uniquely assignable parameters?
  • What's the use of offset when making events with mouse？When should I use an offset and is it necessary?

Add Your Homework

Week 2

  1. LINKS FROM CLASS:

  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 varies and is a little interesting (for instance):
  • Start fresh, don't use last week's drawing
  • 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. 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

  • What do computers call their fathers
  • Is there a way to unite simple shapes and their styles in a complex shape to animate the whole thing?
  • How can I make something like snowing with P5.js.(Maybe someone can help me to optimize my code for the homework.Thanks!)
  • Is there a way to make a looping animation using millis(), or is there an alternate route (see shapes appear)
  • how can I keep track of the eggs my chicken lays so they don't disappear when she lays another one

Add Your Homework

Week 1

  • 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
    • Remember that this class should eventually be about why to code. 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. Please feel free to introspect on your deepest emotions about the prospect of programming a computer. Before you can fully know why to code you have to learn how to code. 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:

    • Videos 1.1 - 1.3 -- note these were recorded last year and reference the desktop editor which we are no longer using this semester.
    • 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@nyu.edu for a link to a shared google drive folder.
    • If you prefer books, I suggest Chapters 1-3 of Getting Started with p5.js. If you are logged into the NYU network you can read it via safari books online.

  • ASK QUESTIONS: Contribute at least 1 question below.

Questions | Examples

  • Is there an alternative function to draw triangles and how to move them along axis without doing simple math?
  • Is there a way to label the different shapes and lines you are making without changing the code itself?
  • Is there a way to figure out the coordinate of the points I want to know? (like in some 3D modeling softwares)
  • Is there a way to animate my drawing?
  • Is there a way to have an interactive drawing? (i.e. with if, then statements etc.)
  • Is there a way to rotate objects around a specific axis point as opposed to the canvas origin?

Add Your Homework

Final Project Proposals

Final projects are a creative idea inspired by the concepts in this class. There is no requirement to use a particular aspect of programming. The idea and your enjoyment and interest in the idea is what counts. Some things to remember.

  1. Keeping things simple and small in scope is a plus. If your project idea is a big one, consider documenting the larger idea but implementing just a small piece of it.
  2. Also think about making a final project for a small audience, even one single person like a family member or friend. . . or yourself. This can be a good way to focus your idea and design process. "Generalizing" the idea can come later (or maybe not at all.)
  3. Final projects can be collaborations with anyone in any class.
  4. Final projects can be one part of a larger project integrated with Physical Computing or another class.

What you need to do now:

  1. Final Project Proposals: a few minutes of slides, sketches...something to ILLUSTRATE what's in your head.
    • Collect inspirations: How did you become interested in this idea? quotes, photographs, products, projects, people, music, political events, social ills.
    • Collect source material: drawings, images, videos, sounds, text
    • Collect code: your own sketches and/or 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. Plan to present your idea in ~5 minutes leaving about 10 minutes for discussion. You can present your idea however you like visually, but make sure you also document your thoughts in a blog post linked below.

Final Project Proposals

  1. Links for Mobile
Add a custom footer
Add a custom sidebar
Clone this wiki locally