Skip to content

Homework Ellen 06

Jump to bottom Edit New page
Ellen Nickles edited this page Sep 22, 2021 · 38 revisions

ICM Section 06 • Meeting Thursdays 9:10AM - 11:40AM ET in Room 408

Contact Ellen

  • Email [email protected], and I'll do my best to respond within 24 hours except on the weekends, which might be longer.
  • Office Hours in Zoom (so we can see our faces!) Tuesdays and Fridays from 10:00AM - 12:00PM Sign up here
  • If no appointments are available or you need a different time, please email me with three good times for you, and I'll send you a calendar invite with a Zoom link.

About Our Course

Course Description and Our Goals

Here is the description for ICM from the ITP Schedule.

Upon completion of the first half of the ICM course, Code, we will be able to:

  • describe possibilities of computational thinking and coding for creative applications;
  • recognize p5.js as a Javascript framework for drawing graphics and working with media on the HTML Canvas element of a web page;
  • identify fundamental coding concepts, such as variables, conditionals, iteration (loops), arrays, functions, and objects;
  • identify approaches to debug errors in our code, including how to interpret error messages and print messages to the Console of the p5.js web editor;
  • practice and apply these coding concepts and debugging approaches in our creative work using p5.js.

Format

ICM Code is a seven-week course that meets once a week in person at the scheduled time. (After Code, ICM Media meets for another seven weeks at the same time and place.) We will have assignments to do before each Code class, and these assignments will build towards a final exercise to share at the end of the seven weeks.

This course embraces an active-learning approach with the belief that programming is best understood by doing. In keeping with this approach, class time will be structured as a workshop and seminar instead of a lecture, relying heavily on group discussion and participation. Weekly video tutorials to watch before class sessions will introduce fundamental coding concepts. During class, supplemental code examples will be presented and discussed before hands-on work together. Time will also be allotted to share our weekly assignments. Examples and assignments will iteratively build upon lessons learned in preceding classes.

Your are encouraged to reach out to me outside of class to ask questions, share ideas/feedback, and discuss topics in detail.

Homework Guidelines

Before class, watch the video tutorials about the fundamental coding concepts that we will practice together when we meet.

There are also weekly programming assignments that are relevant to the material from previous classes. Assignments are due on Wednesdays at 11:59pm the day before our class so that I have a chance to review your questions before we meet.

All assignments are expected to be submitted by the stated deadline, and you should be prepared to show and talk about them in class. If you anticipate any challenges meeting the deadline, please reach out to me so that we can consider your options together.

A big part of learning at ITP is learning from each other. Share your work and in return you'll see everyone else's!

  • Weekly Practice Questions. There are questions (linked below) to practice the concepts introduced in this course. You are expected to add links to your p5 sketches directly to our weekly exercise documents*.
  • Weekly Creative Exercise and Blog Post.** Each week there is an open-ended, freestyle creative exercise to apply the concepts that we practice. You are expected to add links to your blog posts directly to our weekly exercise documents* (linked below). Include a link to your p5 sketch in your blog post and answer these questions:
    • What did you do?
    • What worked?
    • What didn’t work, and what steps did you take to try to solve the issue?
    • Did any code-related questions come up for you?

*Log in to your NYU account to access the documents.

**If you are struggling with your weekly exercise sketches, put your energy into writing about what didn't work and how you tried to solve it. It is totally okay to vent your frustrations. Writing a blog post helps to remember and synthesize what you did and tried to do. Think of it as writing a reference guide for your future self.

Resources and Support

Week 1 • Sept 2 • Introduction and Drawing in p5.js (p5)

In class:

  • Welcome! and introductions
  • Safety precautions and communicating in class
  • Course overview
  • What is p5?
  • p5 web editor
  • p5 functions
  • Coding strategies
  • Syllabus / schedule

Examples:

Homework assignment due Wednesday, Sept 8, at 11:59pm:

  • DO
    • Create a p5 web editor account.
    • Have a place online to post your homework with the ability for me to provide support and feedback comments. This could be a website / blog or even a Google document. If you’re not sure what to use, please reach out to me so I can help. I will comment directly on your website / blog / Google document only, instead of email or another means, so please ensure to enable a commenting feature.
  • WATCH (BEFORE EXERCISES) • Coding Train Videos 1.1-1.6 about p5, the web editor, drawing with p5, errors in the console, and code comments ~1hr 20min
  • TEST YOURSELF • Complete the practice questions in Week 1 Exercises.
  • CREATE • What are ways that we can draw on the HTML Canvas element with p5?
    • Use 2D primitive shapes and basic color setting functions to create your own p5 screen drawing: a self-portrait, alien, animal, etc. Be sure to consult the p5 Reference!
    • Add comments to your code to describe the different parts, e.g. eyes, nose, mouth, etc.
    • Write a blog post that includes a link to your sketch.
    • 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? Are there projects that you love? Here are some examples to explore for inspiration if you need them.
    • Submit your post in Week 1 Exercises.
  • WATCH (AFTER EXERCISES) • Coding Train Videos 2.1-2.5 about variables, random(), and map() ~1hr

Week 2 • Sept 9 • Animation with Variables and Objects

In class:

  • Share our homework
  • p5 functions setup() and draw()
  • Introduction to variables
  • Create our own variables
  • Introduction to object literals
  • p5 system variables

Examples:

Homework assignment due Wednesday, Sept 15, at 11:59pm:

  • TEST YOURSELF • Complete the practice questions in Week 2 Exercises.
  • WATCH (OPTIONAL)
  • CREATE • How can we start to make our sketches more expressive? Experiment with a sketch that includes all of these:
    1. One element controlled by the mouse.
    2. One element that changes over time, independently of the mouse.
    3. One element that is different every time you run the sketch.
    • For example, you could try refactoring your Week 1 sketch by removing all the hard-coded numbers except for createCanvas(). Have some of the elements follow the mouse. Move some independently. Move some at random. Or you could do the above but change color, alpha, and/or strokeWeight instead of position. Or do something completely different!
    • Write a blog post that includes a link to your sketch.
    • Submit your post in Week 2 Exercises.
  • WATCH • Coding Train Videos 3.1-3.4 about conditional statements ~1hr

Week 3 • Sept 16 • Interaction with Conditionals

In class:

  • Share our homework
  • Introduction to conditional statements
    • With relational expressions
    • With Boolean variables
  • Combining expressions

Examples:

Homework assignment due Wednesday, Sept 22, at 11:59pm:

  • TEST YOURSELF • Complete the practice questions in Week 3 Exercises.
  • CREATE • START 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!
    • Try making a rollover, button, or slider from scratch that controls the visual design or behavior of other elements in the sketch.
    • And / or try working with keyboard events: keyIsPressed, key, keyCode, keyPressed(), keyReleased(), keyTyped(), and keyIsDown().
    • Can you divide an idea into two parts and combine those parts? For example, one of you codes the input behaviors and the other one codes the output behaviors.
    • You can swap sketches and riff off of your partner's work.
    • Or you can start and complete the assignment together or break off and finish individually.
    • Everyone should write their own blog post describing their work and code contribution with a link to a sketch.
    • Submit your post in Week 3 Exercises.
  • WATCH • Coding Train Videos 4.1-4.2 about loops and The Modulo Operator with Golan Levin ~45min

Week 4 • Sept 23 • Arrays / Repetition with Loops and Over Time

In class:

  • Introduction to arrays
  • Share our homework
  • Introduction to loops
  • Timing events
  • Creative coding examples

Examples:

Homework assignment due Wednesday, Sept 29, at 11:59pm:

  • TEST YOURSELF • Complete the practice questions in Week 4 Exercises.
  • CREATE • What repeats in your life or is cyclical? What patterns do you find in nature, architecture, textiles, conversations? Make a sketch with a lot of repetition, more than you want to hand-code. Some ideas to get started:
    • You might take a previous sketch with a lot of repetition, and re-write it with a loop. For example, instead of needing 30 lines of code to call rect(), call rect() once inside of a loop that goes around 30 times. Look for a pattern. How do you need to rework the way you position that rect() inside the loop?
    • Try creating an algorithmic design with simple parameters. One example is to invent your own 10PRINT design. See Coding Train Coding Challenge: 10PRINT and the example code. A related source of inspiration: Sol Lewitt's Wall Drawings.
    • Make a mini-calendar. Use iteration to render a row of visual elements for each of the days of the current month. All of the elements should be drawn identically, except for the one whose index corresponds to the current day. Differentiate this element in some way. Consider using p5's day() function. (Source: Code as a Creative Medium.)
    • Write a blog post that includes a link to your sketch.
    • Submit your post in Week 4 Exercises.
  • WATCH • Coding Train Videos 5.1-5.2 about functions and Videos 7.1-7.2 about arrays ~50 min
Add a custom sidebar
Clone this wiki locally