Skip to content

Homework Ellen

Jump to bottom Edit New page
Ellen Nickles edited this page Oct 20, 2020 · 36 revisions

Welcome to ICM Section 7's Wiki Page!

☆ Contents

☆ Contacting Ellen

  • My office hours are Wednesdays 8PM-10PM ET and Fridays 8AM-10AM ET. Here is my calendar to sign up.
  • My email is [email protected].
  • You can also connect with me on the ITP/IMA Discord @Ellen (she/her).

☆ 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!

  • Do the assignment each week.
  • Share your documentation. For ITP students this is usually, but not always, in the form of a blog post. Ideally include something visual (inspirational images, screenshots, videos of the interaction), some written thoughts, and code. If you are struggling with your sketch, put your energy into writing about what didn't work and how you tried to solve it. It's okay to vent your frustrations! Writing a blog post helps you remember what you did and tried to do. Think of it as telling yourself a story or writing a reference guide for your future self so that you don't have to relearn everything from scratch.

☆ Submitting Homework Assignments

Assignments are due the day 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 to work that is turned in late.

👉 Weekly Worksheet

There are worksheets (linked below) to practice the concepts introduced in this course. You are expected to add links to your p5 sketches directly in these documents. Log in to your NYU account to access them.

👉 Weekly Blog Post

To submit all other assignments (i.e. your blog posts or other documentation), use this homework form.

Here is the spreadsheet with everyone's responses.

☆ Support

If you find yourself struggling, there are many forms of support at ITP:

  • Look out for the residents' office hours and help sessions.
  • Visit The Coding Lab, a walk-up (and virtual) help desk for NYU students to get help with their code from ITP student mentors.
  • Post a question in the ITP Discourse in the icm category, tagged with our section icm007. Think of Discourse as an asynchronous Q&A forum for peer support for solving technical issues and trouble-shooting, as well as for archiving discussions long-term. As more questions accumulate over time, it will become a useful technical support resource for everyone. Feel free to answer other students' questions, too!
  • Post a question in the ITP/IMA Discord HELP-ITP #icm channel. Think of Discord as chat. It’s a platform designed for synchronous connections and community messaging. If you need a question answered in real-time, consider posting here to chat with another student or resident who is currently online.
  • Need help asking a question?

☆ Week 1 Introduction & Drawing

Meeting Wednesday, September 9 @ 8:00PM - 10:30PM ET

📚 Resources

🏗 Set Up

📺 Watch / Read

👉 Assignment

  • Test yourself: complete Worksheet 1 (NYU login required).
  • Create your own p5 screen drawing: a self-portrait, alien, cyborg, etc.
    • Use 2D primitive shapes: arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle()
    • Also use basic color functions: background(), colorMode(), fill(), noFill(), noStroke(), stroke().
    • Remember to use createCanvas() to specify the dimensions of your canvas, and wrap all of your code inside a setup() function.
  • Write a blog post, and submit it using the homework form.
    • Include a link to your p5 screen drawing. Document the process of creating your sketch. What challenges did you encounter? What could you not figure out how to do?
    • In the same post, describe 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? Feel free to review and contribute to the ICM Inspiration Wiki page.

☆ Week 2 Animation: Variables

Meeting Monday, September 14 @ 8:00PM - 10:30PM ET

📚Resources

📺 Watch / Read

👉 Assignment

  • Test yourself: complete Worksheet 2.
  • Create a sketch that includes all of these and write about it in a blog post:
    • 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.
  • For example:
    • You could try refactoring your Week 1 homework 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.
    • Or you could do the above but change color, alpha, and/or strokeWeight instead of position.
    • Or do something completely different!

☆ Week 3 Interaction: Conditionals

Meeting Monday, September 21 @ 8:00PM - 10:30PM ET

📚 Resources

📺 Watch / Read

👉 Assignment

  • Test yourself: complete Worksheet 3
  • WORK IN PAIRS: 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. 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 of of your partner's work? You can complete the assignment together or break off and finish individually. Everyone should still submit their own blog post.
    • Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. In Week 7 we'll look at how this compares to interface elements we 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.

☆ Week 4 Repetition: Loops

Meeting Monday, September 28 @ 8:00PM - 10:30PM ET

📚 Resources

📺 Watch / Read

👉 Assignment

  • Test yourself: complete Worksheet 4
  • 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?
    • Or try creating an algorithmic design with simple parameters. One example is to invent your own 10PRINT design. Here are some resources: Coding Train Coding Challenge: 10PRINT and example code. Another source of inspiration: Sol Lewitt's Wall Drawings.

☆ Week 5 Organization: Functions ...and Introducing Arrays and Objects

Meeting Monday, October 5 @ 8:00PM - 10:30PM ET

📚 Resources

📺 Watch / Read

👉 Assignment

  • Test yourself: complete Worksheet 5
  • The idea this week is to explore reorganizing / refactoring 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 multiple times with different parameters.
    • Reorganize "groups of variables" into objects (see Video 2.3 mentioned above).
    • If you are feeling ambitious, try embedding a function into an object.

☆ Week 6 More Repetition: Generating Multiple Objects with Classes, Arrays, and Loops

Meeting Monday, October 12 @ 8:00PM - 10:30PM ET

📚 Resources

📺 Watch / Read

  • Is your p5 sketch getting way too long? Here's how to organize your code into separate files: Video 6.4 (~5 min)
  • Allison Parrish's tutorial on Browser Controls
  • HTML / CSS / DOM Videos 8.1-8.10 (~2 hr). There's a lot, and if it's too much information, just focus on the basics:
    • Method 1: Creating HTML elements with HTML tags, Video 8.1 (~13 min)
    • Method 2: Creating HTML elements with JavaScript (p5), Video 8.2 (~9 min) and Video 8.4 (~10 min)
  • Code examples: The Coding Train

👉 Assignment

  • Test yourself: complete Worksheet 6
  • Part 1: Design a sketch in an object-oriented fashion.
    • You might follow these steps and see how far you get. Even just doing the first couple steps is okay!
      • Make one single object with just variables.
      • Put one or more functions in the object.
      • Try manually making two objects.
      • Duplicate the object using a for loop and an array to make as many as you like!
    • If you are already working with classes / objects and arrays, re-organize your classes into the "smallest functional units" possible (e.g. make properties in your classes that are functions, also called methods).
    • 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();
  }
}
  • Part 2: Next week you will be presenting your own assignments. Time limit is four 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.
    • Tell us the programming concepts are you using (e.g. objects and arrays, nested for loops, toggle logic, re-usable functions)
    • De-construct for us one thing you think is interesting about how your sketch works.

☆ Week 7 The DOM

Meeting Monday, October 19 @ 8:00PM - 10:30PM ET

📚 Resources

📺 Watch / Read

👉 Assignment

  • Test yourself: Complete these ICM Quizzes (you can skip Week 1 Question 4) and write a blog post with any questions that you have about the topics or specific problems/solutions. Is there anything that is confusing? What would would you like to spend more time learning and practicing (including beyond these weekly topics)? Here are some resources for the Week 7 DOM section:

Starting Week 8, we'll use the ICM-2020-Media Homework Ellen Wiki

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