Skip to content

Homework Ellen 07

Jump to bottom Edit New page
Ellen Nickles edited this page Jan 19, 2022 · 35 revisions

ICM Section 07 • Meeting Mondays 12:20PM - 2:50PM ET in Room 410

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.

You 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 Sundays 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 13 • 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 Sunday, Sept 19, 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 20 • Animation with Variables and Objects

In class:

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

Examples:

Homework assignment due Sunday, Sept 26, 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 27 • Interaction with Conditionals

In class:

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

Examples:

Homework assignment due Sunday, Oct 3, 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 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 • Oct 4 • Arrays / Repetition with Loops and Over Time

In class:

  • Introduction to arrays
  • Share our homework
  • Introduction to loops
  • Timing events
  • Creative coding examples
  • Anonymous check-in survey

Examples:

Homework assignment due Monday, Oct 11, 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

Week 5 • Oct 12 • Arrays / Organization with Functions

In class:

  • Update our random name generator
  • Share our homework
  • More with arrays
    • Index positions
    • Use a loop to iterate through array values
  • Introduction to functions
    • Writing functions
    • Calling them with and without arguments

Examples:

Homework assignment due Sunday, Oct 17, at 11:59pm:

  • TEST YOURSELF • Complete the practice questions in Week 5 Exercises.
  • CREATE • We can organize our code into discrete code blocks, functions, to reuse over and over, such as to create different expressions of similar elements (e.g. position, size, speed, color). The idea for this week is to practice writing and using your own functions.
    • 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 (refactored) into functions.
    • You can also try a new experiment from scratch! For example, can you draw a landscape of varying plants by calling the “plant function” with different arguments? Or create a family of varying creatures? Or draw the same design multiple times but with different characteristics?
    • For either option, aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Try to incorporate the following:
      • Break the code out of setup() and draw() into functions.
      • Call at least one of your functions multiple times with different arguments.
      • For anything that repeats and you notice a pattern, use a loop to make it happen.
    • Write a blog post that includes a link to your sketch.
    • Submit your post in Week 5 Exercises.
  • WATCH • Coding Train Videos 6.2 - 6.3 and 7.3-7.7 on making lots of objects with a class (a special function) and Video 6.4 on organizing your code into separate files ~2hr

Week 6 • Oct 18 • More Repetition with Classes

In class:

  • Update our random name generator (again!)
  • Share our homework
  • Introduction to classes to make objects
  • Using classes (and objects) with arrays and loops
  • Mouse interaction with objects
  • Communication between objects
  • Creative coding examples

Examples:

Homework assignment due Sunday, Oct 24, at 11:59pm:

  • TEST YOURSELF • Complete the practice questions in Week 6 Exercises.
  • CREATE • We can scale our programs by writing classes to create multiple objects, each with their own properties and behaviors, instead coding them all by hand. The idea this week is to practice designing a sketch in an object-oriented fashion, or a drawing program.
    • Part 1: Here are some ideas to get started, but you can also create something from scratch! Try making a game, generate a calming or energetic visualization, grow a garden of “plant” objects, create a scene with weather, or design a drawing program.
    • Part 2: Write a blog post that includes a link to your sketch.
      • What was your goal or inspiration?
      • What does your sketch do? If it's interactive, deconstruct the interaction(s) to produce the effect(s).
      • Explain what you did in your code to produce the results.
      • Practice any new vocabulary you’ve acquired for describing technical work.
      • What code-related questions came up for you?
    • Part 3: Prepare a 5-minute presentation to share with the class to introduce your sketch, choose one interaction to demo (which one is the most interesting to you?), and walk us through the related code. Use your blog post as an outline to help you plan out everything you want to share.
    • Submit your post in Week 6 Exercises.
  • WATCH

Week 7 • Oct 25 • The DOM: HTML and CSS / Present Final Exercises

In class:

  • Introduction to the Document Object Model (DOM)
  • Adding HTML elements, tags vs. p5
  • Styling HTML elements
  • Present final exercises

Examples:

Homework assignment due Sunday, Oct 31, at 11:59pm:

  • TEST YOURSELF • Complete the practice questions in Week 7 Exercises.
  • POST • Write a short blog post reflecting on this week's practice questions and the topics from the first half of the semester:
    • What do you feel confident about?
    • What would you like to practice more?
    • Is there anything else that you would like to learn more about, including and beyond our weekly topics so far?
    • Submit your post in Week 7 Exercises.
  • READ • Allison Parrish's Media: Images
  • WATCH • Coding Train Video on Uploading Media Files in the p5.js web editor, Video 7.8 on adding images to objects, and Video 11.3 on the pixel array ~40 min

👉 Starting Week 8 (Nov 1) we'll use the ICM-2021-Media Homework Ellen 07 Wiki

Add a custom sidebar
Clone this wiki locally