Skip to content

Homework John Henry

Jump to bottom Edit New page
jht edited this page Dec 3, 2020 · 13 revisions

Welcome to ICM Section 1's Wiki Page!

Syllabus Overview

This is John Henry Thompson's section of ICM—Media. Here is the Syllabus Overview for the course. This section is a continuation of ICM-Code for most students. The ICM-Code homework is included here for continuity. ICM-Media begins on week 8.

☆ Contents

☆ Contacting John Henry

Here is my calendar to sign up for office hours, and my email is [email protected]. Pleae be sure to email when you schedule an appointment.

☆ 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. 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:

  • Make an appointment with me - my office hours
  • 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 to the Discourse in the icm category, tagged with our section icm001. 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 to the 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

📚 Resources from Class

🏗 Set Up

📺 Watch / Read

👉 Assignment

  • Test yourself: complete this worksheet(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

📚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!
  • Submit link to blog and sketch using the homework form.

☆ Week 3 Interaction: Conditionals

📚 Resources

📺 Watch / Read

  • For review and more tips:

👉 Assignment

  • Test yourself: complete Worksheet 3
  • 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.
    • Create or expand on a sketch with animated elements.
    • Select one or more of the interface elements presented in class. Class Collection
    • Tie the above two together and have the interface element(s) control the visual design or behavior of other elements in your animated sketch.
  • Submit link to blog and sketch using the homework form.

📺 Watch / Read - for next week

☆ Week 4 Repetition: Loops

Inspiration

📚 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.
  • Submit link to blog and sketch using the homework form.

📺 Watch / Read - for next week

☆ Week 5 Functions Objects Arrays

📚 Resources

📺 Watch / Read

👉 Assignment

  • Test yourself: complete Worksheet 5
  • The idea this week is to explore the advantage of using functions:
    • Draw a complex design that uses multiple shapes with different parameters.
    • Have at least two shapes move independently on the screen.
    • Use DOM UI elements, such as a slider, to control some of the shape parameters.
    • Reorganize "groups of variables" into objects (see Video 2.3 mentioned above).
  • Submit link to blog and sketch using the homework form.

📺 Watch / Read - for next week

We are deviating slightly from the course outline by delaying the use of ES6 classes, as prescribed for week 6. Instead we will spend more time on loops, functions and javascript object. Focus your time on completing the worksheet, completing the assignment, and writing up any questions that come up.

If you are total comfortable with all the material covered so far, you may watch Videos listed in the Week 6 curriculum outline. For next week these videos are optional.

Feed back please

How is this class going so far? If you haven't yet, please take a few minutes to complete this feedback form

☆ Week 6 More Functions Objects and Arrays

📚 Resources

To expand your understanding of JavaScript:

📺 Watch / Read

Videos listed in the Week 6 curriculum outline. Lots here. You can narrow your focus by starting with these videos that focus on arrays:

Also you can find the purely functional implementation of the same ideas in my collection for week 6:

If you prefer to read:

👉 Assignment

  • There is no worksheet for this week. Complete any missing home work or worksheet from prior weeks. If you cannot fully complete, document your struggles and questions in your blog entry for that week. Next week I'll begin reviewing your work to date for your midterm grade. This is your chance to catch up to ensure all your work is considered.

  • For your homework sketch build on your assignment from last week - add additional shapes and controls. Use arrays where appropriate. You can choose to uses classes or functions as illustrated in Week 6 Collection

  • Submit link to blog and sketch using the homework form.

📺 Watch / Read - for next week

  • 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)

☆ Week 7 The DOM

📚 Resources

👉 Assignment

📺 Watch / Read - for next week

☆ Week 8 Images and Pixels

📚 Resources

👉 Assignment

  • Complete this worksheet

  • Over the next two weeks design and write a sketch that creates and/or manipulates an image or video at the pixel level. Include DOM ui elements that controls some parameters of the sketch. Create a blog post documenting your design and work-in-progress. Also include links to other projects that serve as references, inspiration, or deal with similar ideas as your piece.

  • Be prepared next week to show your work-in-progress, present any issues or problems, and get feedback.

  • You may work in pairs.

  • Submit link to blog and work-in-progress sketch using the homework form.

📺 Watch / Read - for next week

☆ Week 9 Pixels and Color

📚 Resources

👉 Assignment

  • Complete this worksheet Select only ONE sketch to modify.

  • Complete your sketch from last week that creates and/or manipulates an image or video at the pixel level. Incororate any feedback from your presentation in class.

  • Be prepared next week to show your completed work.

  • Submit link to blog and work-in-progress sketch using the homework form.

📺 Watch / Read - for next week

☆ Week 10 Sound Analysis

📚 Resources

Reference Links

👉 Assignment

  • Complete this worksheet Select ONE sketch to modify - more than one if you feel adventurous.

  • Create a sketch that analyzes sound and translates it into something visual. Use live or recorded audio. Use color, video, images, pixels, shapes, etc. to represent the sound

  • Prepare the sketch to run full screen by making all positioning relative to the size of the canvas - see example 2:2 Tri-Color ui.

  • You have two weeks to work on this sketch. Be prepared next week to show your work-in-progress, present any issues or problems, and get feedback.

  • You may work in pairs.

📺 Watch / Read - for next week

☆ Week 11 Sound Synthesis

📚 Resources

Demos

👉 Assignment

  • Complete your sketch that analyzes sound and translates it into something visual. Use live or recorded audio. Use color, video, images, pixels, shapes, etc. to represent the sound
  • Prepare the sketch to run full screen by making all positioning relative to the size of the canvas - see example 2:2 Tri-Color ui.
  • Be prepared next week to show your sketch that incorporates class feedback.
  • You may work in pairs.

📺 Watch / Read - for next week

☆ Week 12 Text

📚 Resources

More Text and Data resources on Ellen's homework page

👉 Assignment

  • Begin your final project project, it is due in 2 weeks. For next week, week 13, bring to class an initial sketch and description of your concept. For the final week, week 14, you will present your completed sketch.

  • Final Project requirements. “...You are expected to push your abilities to produce something that utilizes what you have learned in the class that is useful in some manner to yourself or the world. This will comprise 20% of your grade…”

📺 Watch / Read - for next week

☆ Week 13 Final Project In Progress

👉 Assignment

  • Your final projects! 👏

    • Complete final project sketch.

    • Write documentation in the form of a blog post. 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 and a brief written description
      • References such as links to related projects, code samples, etc.
      • Source code (please cite your sources in the code comments)
      • What were some of the successes and challenges? What did you learn?
      • How do you feel about WHY you want to use code in your work now compared with the beginning of the semester?
      • 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!)
      • Next steps to further develop the project
      • If the project is a collaboration, describe your contribution to the project

    • Prepare a 5-minute presentation to demonstrate your project.

    • Submit link to blog and sketch using the homework form.

🎉 Week 14 Final Project Presentations

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