Skip to content

Homework Lisa

Jump to bottom Edit New page
Lisa Jamhoury edited this page Oct 21, 2020 · 40 revisions

Syllabus Overview

This is Lisa Jamhoury's section of ICM—Code. Here is the Syllabus Overview for the course.

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 blog documentation: Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, put your energy into writing about what didn't work and what you did to try to solve it.

Attendance

Please be on time! I commit to ending class on time, which means I will start class on time so we can get through all class material.

According to the ITP/IMA Class Attendance policy, for 7-week, and 6-week, half-term courses, up to one unexcused absence is permitted. Exceeding these unexcused absence guidelines is grounds for automatic failure. I really want you to succeed, so please please please communicate with me about your schedule and needs.

Please review the attendance and participation requirements under Policies on the main syllabus

Mode of Instruction

This course will be offered entirely online. We will meet on Zoom at our regularly scheduled time to share homework and to discuss the week's topics. About an hour of course time will be devoted to technical topics. For now I'll be presenting the technical lecture live and making a recording of it available asynchronously. This may change throughout the course of the semester depending on your feedback!

Please feel free to reach out if you have any questions. These are unprecedented times, and I'm happy to discuss how I can make the class work for each of you.

Class Recordings

All class lectures will be recorded to accommodate students who miss class. Recordings will not be shared publicly and will not be available after the semester ends. Please reach out to me if you do not feel comfortable being recorded.

Lisa's Contact

[email protected]

office hours link Wed 10am—12:30pm ET

In-class Examples

I save all of my in-class p5js examples in the web editor. You can see a full list here.

Homework Assignments

Assignments are due the night before class each week. I will not give credit for assignments that are turned in late. Keeping in mind that I want you to succeed, and that the material can sometimes be challenging, I absolutely prefer tentative work with good documentation to work that is turned in late.

Use this form to turn in your homework assignments.

Here's the spreadsheet with everyone's responses.

Sharing Homework

Each week we will start class with breakout groups to discuss the homework from the previous week. This is an informal presentation of documentation, code, process, challenges, successes, questions. Please do the assignment and documentation so you are able to contribute to the conversation.

Support

If you find yourself struggling, remember that you have many forms of support that you can take advantage of at ITP. Post a question on the ITP ICM Discourse, look out for the office hours and help sessions that the residents offer. You can find my office hours here and my email is [email protected].

Class Notes

Week 1 — Sept 4, 2020

Class Notes

Class Links

Assignments

  • Sign up for a Github account.
  • Log into p5.js web editor with your Github account.
  • Complete this worksheet. You must be logged in with your NYU account to access the worksheet.
  • 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? (You can 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?
  • Submit your homework using this form. Assignments are due the night before (or at least an hour before) class starts.

Read / Watch for Next Class

Week 2 — Sept 11, 2020

Class Notes

Class Links

Assignments

  • Complete this worksheet. You must be logged in with your NYU account to access the worksheet.
  • Create a sketch that includes (all of these):
    • 1 element controlled by the mouse.
    • 1 element that changes over time, independent of the mouse.
    • 1 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 make something new!
  • Write a blog post documenting your work.
  • Submit your homework using this form. Assignments are due the night before (or at least an hour before) class starts.
  • Add your question (or a separate question) to Discourse with the tag creativecoding. Please feel free to answer each other's questions. Need help asking a question?

Read / Watch for Next Class

  • Watch Conditionals 3.1 - 3.4 ~1hr | Get Code
  • OR Read Getting Started with p5: Chapter 5 (Response). | Get Code
  • Go further with Transformations (Optional)
    • Video Tutorials 9.1-9.3
    • Getting Started with p5: Chapters 6 (Transformations) and 8.10-8.15 (More complex motion)

Week 3 — Sept 18, 2020

Class Notes

Class Links

Assignments

  • Complete this worksheet. You must be logged in with your NYU account to access the worksheet.
  • 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? (e.g. One of you codes the input behaviors and the other one codes the output behaviors.) Can you swap sketches and riff off 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 compares to interface elements we'll get for free from the browser.
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
  • Write a blog post documenting your work.
  • Submit your homework using this form. Assignments are due the night before (or at least an hour before) class starts.

Read / Watch for Next Class

Week 4 — Sept 25, 2020

Class Notes

Class Links

Assignments

  • Complete this worksheet. You must be logged in with your NYU account to access the worksheet.
  • Post at least 1 question on Discourse with the tag icm006 Please feel free to answer each other's questions. Need help on asking a question?
  • Make something with a lot of repetition, more than you want to hand-code. You could take something you've already done where there was a lot of repetition in the code and see if you can re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calls rect() inside of a loop that goes around 28 times. How do you need to rework the way you position that rect() in order to make it work in a loop? Try creating an algorithmic design with simple parameters. (One example is 10PRINT, example code).
  • Write a blog post documenting your work.
  • Submit your homework using this form. Assignments are due the night before (or at least an hour before) class starts.

Read / Watch for Next Class

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

Run Code

Week 5 — Oct 2, 2020

Class Notes

Class Links

Assignments

  • Complete this worksheet. You must be logged in with your NYU account to access the worksheet.
  • 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. | How to do this.
    • 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.
  • Post at least 1 question on Discourse with the tag icm006 Please feel free to answer each other's questions. Need help on asking a question?
  • Write a blog post documenting your work.
  • Submit your homework using this form. Assignments are due the night before (or at least an hour before) class starts.

Read / Watch for Next Class

Run Code

Week 6 — Oct 9, 2020

Class Notes

Class Links

Assignments

  • Complete this worksheet. You must be logged in with your NYU account to access the worksheet.
  • Next week you will be presenting your own assignments. Time limit is 5 minutes. Focus on what's happening in your sketch computationally. Write out what you're going to say and prepare any diagrams that will help you explain what's going on.
    • Give yourself time to properly demo your sketch. Show us what's interesting about the interaction.
    • What programming concepts are you using? (e.g. objects and arrays, nested for loops, toggle logic, re-usable functions)
    • De-construct for us 1 thing you think is interesting about how your sketch works.
    • 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. Make a class to create the object.
      4. Put one or more functions in the class.
      5. Try manually making two objects using the class.
      6. Use the class and an array to make as many objects 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();
  }
}
  • Post at least 1 question on Discourse with the tag icm006 Please feel free to answer each other's questions. Need help on asking a question?
  • Write a blog post documenting your work.
  • Submit your homework using this form. Assignments are due the night before (or at least an hour before) class starts.

Read / Watch for Next Class

  • Videos 8.1-8.10(~2 hours)
  • There's a lot, so if it's too much new information, just focus on the basics, videos 8.1, 8.2, 8.4 (~30 minute)
  • More resources from syllabus
  • p5.dom section of Chapter 13.4-13.6 in Getting Started with P5.js

Code Examples

Week 7 — Oct 16, 2020

Class Notes

Class Links

Assignments

Read / Watch for Next Class

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