-
Notifications
You must be signed in to change notification settings - Fork 5
Homework Luisa
- Homework Guidelines
- Getting Support
- Class Outlines and Assignments
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!
- Practice by completing the weekly worksheet.
- Do the assignment.
- Contribute a question.
- Post blog documentation: Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, put your energy into writing about what didn't work and what you did to try to solve it.
Assignments are due the day before class each week. I want you to succeed. The material can sometimes be challenging. I'd still prefer that you turn in work that is unambitious or incomplete, rather than turn in work late.
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.
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. If you have work you want to turn in that you don't want to share with everyone, let me know, and we can make alternative arrangements.
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, a walk-up (and virtual) help desk for NYU students to get help with their code from ITP student mentors.
- Post a question in the ITP/IMA 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?
-
BEFORE CLASS:
- Log into a p5.js web editor account
-
CLASS OUTLINE:
-
Activity 1: Introductions. In a few minutes, create a slide to introduce yourself.
-
What is computational media?
-
Activity 2: Program a drawing. Shared slides
-
Intro to the p5.js editor, invoking functions, using parameters
-
-
DO:
- Test yourself: Complete this worksheet. Tip: for the red line, look up
line()
andstrokeWeight()
. You must be logged in with your NYU account to access the worksheet. - Create your own screen drawing: self-portrait, alien, monster, etc. Use 2D primitive shapes –
arc()
,curve()
,ellipse()
,line()
,point()
,quad()
,rect()
,triangle()
– and basic color functions –background()
,colorMode()
,fill()
,noFill()
,noStroke()
,stroke()
. Remember to usecreateCanvas()
to specify the dimensions of your window and wrap all of your code inside asetup()
function. Here's a sample example: Zoog - Articulate and write down at least 1 question that came up while doing the above.
- Write a blog post about 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? (You can review and contribute to the ICM Inspiration Wiki page). In the same post (or a new one), 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?
- Submit all the above using our homework form (this will be the same every week and is also listed under the 'How to Submit' section on this page).
- Test yourself: Complete this worksheet. Tip: for the red line, look up
-
READ AND WATCH:
-
Watch before homework: Videos 1.1 - 1.6 (~1h 15m) | Watch after homework: Videos 2.1 - 2.3 (~30m)
- If YouTube bothers you, ask Daniel Shiffman for a link to videos on Google Drive.
- If you prefer books, Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free.
-
Watch before homework: Videos 1.1 - 1.6 (~1h 15m) | Watch after homework: Videos 2.1 - 2.3 (~30m)
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.
-
DO:
- Create a sketch that includes (all of these):
- 1 element controlled by the mouse.
- 1 element that changes over time, independent of the mouse.
- 1 element that is different every time you run the sketch.
- e.g. Try refactoring your Week 1 HW 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.
- e.g. Do the above but change color, alpha, and/or strokeWeight instead of position.
- Or make something new!
- Create a sketch that includes (all of these):
-
WATCH, READ, RUN CODE:
- Watch Conditionals 3.1 - 3.4 ~1hr | Get Code
- Getting Started with p5: Chapter 5 (Response). | Get Code
- Go further with Transformations (Optional)
- Video Tutorials 9.1-9.3
- Getting Started with p5: Chapters 6 (Transformations) and 8.10-8.15 (More complex motion)
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 3
-
DO: 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. Start by working in pairs as below. Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors and the other one codes the output behaviors.) Can you swap sketches and riff off of your partner's work? You can post together or break off and complete the assignment individually.
- Can you tie your two ideas together with an interface control element?
- Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compares to interface elements we'll get for free from the browser.
-
READ / WATCH
- Videos 4.1-4.2(~25min) in the learning p5.js series. | Code
- Chapter 4.5-4.13 of Getting Started with p5.js book | Ebook (free with NYU Library login) | Code
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 4
-
DO: 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? Try creating an algorithmic design with simple parameters. (One example is 10PRINT, example code).
-
READ / WATCH
- Videos 5.1-5.3(~40min) in the learning p5.js series.
- Getting Started with p5.js chapters 9-10
-
RUN CODE
-
RESOURCES FROM CLASS:
-
TEST YOURSELF
- Complete the Worksheet
-
DO: The idea this week is to explore re-organizing your code. 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. You may, however, choose to try a new experiment from scratch. Aim to keep
setup()
anddraw()
as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):- Reorganize "groups of variables" into objects. | How to do this.
- Break code out of
setup()
anddraw()
into functions. - Use a function to draw a complex design multiple times with different arguments.
- If you are feeling ambitious, try embedding a function into an object.
-
READ / WATCH
- Videos 2.3, 6.1-6.3, 7.1-7.7(~2h 15m)
- More resources and code examples
- Getting Started with p5.js chapters 10-11
-
Examples