Homework Sam

ICM Section 5 Info

NYU ITP Fall 2023
12.20PM - 2.40PM Thursdays

instructor
sam heckle (they/she)
sam.heckle@nyu.edu
office hours

homework submission

submit your p5.js links here
view all submissions here

additional support

book any and all office hours here
book coding lab appointments here
specific resident drop in hours in room 426 on fridays 2pm-4pm

important links

full coding glossary

Week 1

resources from class:
class 1 syllabus
class 1 slides
class 1 demo

links we talked about
unit circle for arcs
javascript documentation from mozilla
javascript tutorial from w3 schools
list of color keywords
fathom -- ben fry data vis company

do:

log into a p5.js web editor account.
create a external blog (wordpress, notion, google doc, etc).
complete this worksheet.
Create a "self" portrait using 2D primitive shapes. Play with symmetry in your portrait. Shapes include – 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.
Write a blog post, due 24 hours before the next class.
a. how computation applies to your interests -- could be a subject you've studied, a job you've worked, a personal hobby, cause you care about
b. what projects do you imagine making this term? what projects do you love? (you can review and contribute to the ICM Inspiration Wiki page).
c. 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?
d. Write down some questions that you might have in your documentation. Here are some examples of good questions

(optional) watch:

before HW: Videos 1.1 - 1.6(~1h 15m)
watch after HW: Videos 2.1 - 2.3 (~30m)

Week 2

resources from class:
class 2 syllabus
class 2 slides
class 2 demo - variables
class 2 demo - window resize
class 2 demo - push, pop, transform, rotate
full coding glossary

links we talked about
unit circle for arcs
operators in javascript

do:

Create a sketch using the following prompt:

No man is an island. There is no such thing as a new idea. Everything is related to everything else. It’s all relative.
The world is defined through relationships and those relationships shape our perspectives. Use variables to build in some relationships between two or more elements in your sketch and think about how the perception of what’s happening is different depending on which element's perspective you take on. Think about:
- What’s related to what?
- How are they related?
- Is it a positive or negative relationship? Example sketch.
- Is it an amplifying or diminishing relationship? Example sketch.
You should definitely take a mathematical approach to answering these questions but you can also take a figurative, metaphorical approach. The elements common to all of your sketches are: position, dimensions, stroke thickness, color values. Can you relate one or more of these elements to:
- itself over time (so it changes over time)
- a different element in your sketch
- frameCount (which frame of animation is now)
- mouseX or mouseY or the combined (mouseX, mouseY) mouse position or something else!
You can revisit your self-portrait to build relationships (link the eyeballs together!) or create something new.

this worksheet

(optional) watch:

before HW: Videos 9.1 - 9.3(~1h)
after HW: Videos 3.1 - 3.4 (~30m)

Week 3

resources from class:
class 3 syllabus
class 3 slides
demo 1 - push pop review
demo 2 - cascading conditionals
demo 3 - if statements in order with rectangle moving around screen

links we talked about

do:

Create a sketch using the following prompt:

Two roads diverged in a yellow wood, And sorry I could not travel both... Life is full of difficult choices, use conditional statements to control the flow of your programs. Create a sketch that asks people to make difficult choices that have surprising consequences.
- Which choices are easier, harder? Which choices are false choices?
- What internal or external factors influence the choice? How do others’ choices affect your choices?
- What choices surprise you with unexpected outcomes?
- Can you combine choices to create hard-to-predict results? (Hint: Use && and ||)
Submit on homework form

this worksheet

(optional) watch:
before homework, these were already assigned last week but if you want further review:

review translate, push, pop: Videos 9.1 - 9.3(~1h)
review conditionals: Videos 3.1 - 3.4 (~30m)
primer for loops: Videos 4.1 & 4.2

Week 4

resources from class:

class 4 syllabus
class 4 slides review survey
worksheet 3 problem 2
worksheet 3 problem 4
demo -- replacing if with for loop
demo -- anatomy of a loop
we didn't do these in class but i said i would upload them:
demo -- slider from scratch
demo -- nested for loop

links we talked about

do

Create a sketch using the following prompt:

Our ability to see patterns is what makes us human. However we also see patterns where none exist because our brains are biased towards detecting certain kinds of patterns over others (e.g. faces).
- Create a pattern by making something with a lot of repetition.
- Is the resulting pattern easy to see or hard to see?
- What would it mean to create the illusion of pattern?
- Can you predict what the pattern will be when you run your code or does it surprise you?
You could take something you've already done where there was a lot of repetition in the code (e.g. your self-portrait) 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).
Submit on homework form

this worksheet

(optional) watch:

before homework, if you want further review:

Videos 4.1 & 4.2

after homework, if you want to prime for next week:

Week 5

resources from class:
class 5 slides
class 5 syllabus
class 5 function demo

links we talked about

do

REQUIRED ASSESSMENT ON LOOPS (1 of 2):

Location: Common Area outside of Room 426
There is no time-limit, however give yourself at least 30 minutes.
Topic: Loops. However it assumes basic knowledge of p5 drawing functions, variables and conditionals.
Available windows of time:
* Thursday Oct 4 3:30PM - 5:30PM
* Friday Oct 5 11AM - 2PM
* Wednesday Oct 11 1-3PM
this worksheet
Create a sketch using the following prompt:

Functions are the basic unit of labor in your code. Take a sketch you’ve already done and re-organize the code into functional units of labor that you define. You can also conceive of an entirely new world of labor. What kinds of labor does it take to make your sketch run?
- Aim to keep setup() and draw() as clean as possible, and do everything (calculations, drawing, etc.) in functions that you define.
- Take care to name your functions precisely and accurately. Whenever possible, use verbs to name your functions. A good test of whether your functions are well-named is: Can someone else comment in/out individual function calls and predict what behaviors will start / stop working in your sketch?
- Challenge goal: Write a re-usable function, a function you can call in multiple ways to do the same thing slightly differently each time.
Submit on homework form

Week 6

resources from class:
class 6 slides
class 6 syllabus
demo -- array poem
demo -- object poem
demo -- class poem

links we talked about
grepper code extension for chrome
data structures mdn documentation
array mdn documentation: tutorial
object p5 reference
object mdn documentation: tutorial class p5 reference
class mdn documentation: usage
class mdn documentation: tutorial
images p5 reference

do

DUE 10/19 MIDTERM PRESENTATION: EXPLAIN 1 THING.

Prepare a 5-minute technical presentation of one of your sketches.
- 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. You can create a slide deck or use a blog post to share diagrams of the flow of your program.
- Give yourself time to properly demo 1 aspect of your sketch.
- Explain 1 thing you learned in making your sketch. Talk about what programming concept(s) you are using (e.g. objects and arrays, nested for loops, toggle logic, portable functions)
OPTIONS FOR WHAT TO DO:
- Take this opportunity to really clean-up your code. You don’t even need to add any functionality!
- Add descriptive comments.
- Carefully name your variables and functions.
- Remove unnecessary repetition.
- Mash up a couple of your past assignments into a new sketch.
- Try incorporating arrays and classes with a sketch that has lots of something (balls, sheep, eyes).
- IF you are already working with classes/objects and arrays:
  - Re-organize / break-down your classes into the "smallest functional units" possible.
  - Try different ways to have your objects "communicate" with each other in some way.
Submit your updated sketch on homework form

DUE 10/26: this worksheet

(optional) watch:

before homework, if you want further review:
reminder -- these materials are always posted in the main ICM syllabus for the week along with additional material. i include these here for your convenience, but all the content for the semester is already posted there.