-
Notifications
You must be signed in to change notification settings - Fork 5
Homework Ellen 07
ICM Section 07 • Meeting Mondays 12:20PM - 2:50PM ET in Room 410
- Contact Ellen
- About Our Course
- Week 1 • Sept 13 • Introduction and Drawing in p5.js (p5)
- Week 2 • Sept 20 • Animation with Variables and Objects
- Week 3 • Sept 27 • Interaction with Conditionals
- Week 4 • Oct 4 • Arrays / Repetition with Loops and Over Time
- Week 5 • Oct 12 (Tues) • Arrays / Organization with Functions
- Week 6 • Oct 18 • More Repetition with Classes
- Week 7 • Oct 25 • The DOM: HTML and CSS / Present Final Exercises
- 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.
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.
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.
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.
- Our class Miro board
- ICM Code syllabus (overview, grading and attendance policies, and statements)
- p5 Resources
- p5 creative coding library: Reference | Web Editor
- Video tutorials
- Written tutorials
- Allison Parrish’s Creative Coding Notes
- Lauren Lee McCarthy's Getting Started with p5.js online at NYU Library | Amazon
- HappyCoding.io
- Digital Harbor's Creative Programming Course
- Coding for Designers Demystifying Code and Learning JavaScript
- Processing Foundation Discourse: A forum for asking / answering Processing and p5 questions
- 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 to ask ITP student mentors about your code.
- Here are some examples of how to ask code-related questions.
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:
- Week 1 syllabus resources
- HTML, CSS, JavaScript / p5.js Website Demos | Code
- Our first sketch
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()
, andmap()
~1hr
In class:
- Share our homework assignments
- p5 functions
setup()
anddraw()
- Introduction to variables
- Create our own variables
- Introduction to object literals
- p5 system variables
Examples:
- Week 2 syllabus resources
- Interactive Bézier curve demos (scroll down in these resources):
- Scope: global and local variables
- Moving circles with direction and speed variables
- Object literal
- Responsive rect (size and position)
- Responsive position (bird nest and tree)
- Ellen's portrait animated with
random()
andmap()
Homework assignment due Sunday, Sept 26, at 11:59pm:
- TEST YOURSELF • Complete the practice questions in Week 2 Exercises
- WATCH (OPTIONAL)
-
Coding Train Videos 16.1-16.2 about keywords
let
,var
, andconst
~20 min - Coding Train Videos 9.1-9.3 about more p5 drawing functions, including rotation ~1hr
- Coding Train Coding Challenge #163 on Bézier curves ~23 min
-
Coding Train Videos 16.1-16.2 about keywords
- CREATE • How can we start to make our sketches more expressive? Experiment with a sketch that includes all of these:
- 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 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
In class:
- Share our homework
- Introduction to conditional statements
- With relational expressions
- With Boolean variables
- Combining expressions
Examples:
- Week 3 syllabus resources
translate()
androtate()
translate()
androtate()
withpush
andpop
- Introduction to conditionals
- Hover over 3 columns
- Boolean variables with if statements
- Toggle the switch
- Bouncing ball
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()
, andkeyIsDown()
. - 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