Skip to content

Homework Allison 04

Jump to bottom Edit New page
Allison Parrish edited this page Sep 18, 2024 · 2 revisions

Helpful info

Guidelines

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!

  1. Do the assignment.
  2. Contribute a question.
  3. Post documentation in the form of a blog post. Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, you should feel free to put your energy into writing about what didn't work (and vent any frustrations!).

Contact Allison

My e-mail address: [email protected]

There's a link to schedule office hours with me on the ITP/IMA Help page (along with links for residents, staff, and other professors). If you don't see a time there that suits you, please send me an e-mail and we'll schedule something separately!

(You're welcome to send me e-mail at any time, day or night, but please be aware that I don't generally answer e-mail on the weekends.)

Allison's in-class examples

I save all of my in-class p5js examples in the web editor. You can see a full list here.

How to turn in your homework assignments

Assignments are due before class begins each week. I want you to succeed, and 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.

Use this form to turn in your homework assignments. Here's the spreadsheet showing everyone's submissions. 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.

Worksheets

I have a Google Drive folder that contains a worksheet for each week. (The worksheets were created by the inimitable Mimi Yin.) In my section, these worksheets are not required, but they are a very helpful way of testing your knowledge. If you have any doubts about your understanding of the week's material, I highly recommend doing the worksheet corresponding to that week. I won't be officially grading worksheets, but I do invite you to send me an e-mail or schedule office hours if you have questions about worksheet materials.

Schedule and class outlines

Week 1: Introduction and drawing

Make sure to set up a p5.js web editor account.

Allison's notes:

Assignment #1

  • 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 use createCanvas() to specify the dimensions of your window and wrap all of your code inside a setup() function. Here's a sample example: Elegant Composition
  • 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? (Review and contribute to the ICM Inspiration Wiki page. In the same post (or a new one), document the process of creating your sketches. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?
  • Optional: Week 1 worksheet

Resources

Read and watch for next week

Videos listed in Week 2 curriculum outline.

Week 2: Animation, variables

Allison's notes and examples:

Assignment #2

Create 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.

You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.

Optional: Week 2 worksheet

Read and watch for next week

Videos listed in the Week 3 curriculum outline.

Additional example code:

Week 3: Conditionals

Allison's notes:

Assignment #3

For this assignment, you'll be working in pairs. Make a rule-based animation that incorporates motion and interaction and includes a user interface element of your own design. Things to try:

  • Make a rollover, a button, or a slider from scratch. (Later we'll look at how this compare to interface elements we'll get for free from the browser.)
  • Create an algorithmic design with simple parameters. Make your interface element control the appearance or behavior of the algorithmic design.
  • When working in teams, try working separately and then combining your work together. Overlay your sketches, or have the interface element you created control your partner's algorithmic design (and vice versa). Trade sketches and riff on your partner's work. Or, sit next to each other at one keyboard and take turns coding while looking over each other's shoulder.

Optional: Week 3 worksheet

Read and watch for next week

Videos listed in the Week 4 curriculum outline.

Week 4: Repetition with loops

Allison's notes:

Assignment #4

Create an interactive artwork that implements the concept of repetition with variation. Use at least one for loop. (Note that this assignment might be easier if you consider making it non-interactive—try putting noLoop(); in your setup() function.)

Optional: Week 4 worksheet

Inspiration

Read and watch for next week

Videos listed in the Week 5 curriculum outline with links to tutorials, videos and examples.

Week 5: Functions

Allison's notes:

Assessment (mandatory)

You'll be taking a test this week! This test will help your instructor to get a better idea of the strong points and weak points in your understanding of class material so far. The test is proctored. I'll add links to a sign-up sheet when it becomes available.

Assignment #5

Re-work an existing assignment, using functions to compartmentalize your code. Write at least one function that takes parameters, and one function that has a return value. If your existing assignments already make use of functions, or if you don't want to build on existing work, feel free to make a new experiment from scratch. Goals and things to try:

  • Break code out of setup() and draw() into functions.
  • Use a function to draw a complex design (like this) multiple times with different arguments.
  • Write a function to that returns the result of a mathematical operation that you need to do several times in your code.
  • Reorganize "groups of variables" into objects.
  • If you are feeling ambitious, try embedding a function into an object.

Optional: Week 5 worksheet

Read and watch for next week

Videos listed in the Week 6 curriculum outline.

Examples:

Week 6: Objects and arrays

Allison's notes:

Assignment #6

Arrays and objects allow you to do something new with your programs: keep track of user action over the course of your sketch's execution. For this week's assignment, create a sketch that takes advantage of your new skills. The sketch should allow the user to use clicks, key presses, etc. to add new elements to the scene (and potentially to remove them later). Your sketch should use an array of objects. (Using a constructor function or the class syntax is optional.)

Optional: Week 6 worksheet

Read and watch for next week

Videos listed in the Week 7 curriculum outline.

Week 7: Document object model (DOM), final projects

Allison's notes:

See also:

Read and watch for next week

Add a custom footer
Add a custom sidebar
Clone this wiki locally