-
Notifications
You must be signed in to change notification settings - Fork 3
Homework John Henry 02
ICM Section 02 • Meeting Wednesday 12:10PM - 2:40PM EST in Room 411
- Week 1 • Sept 7 • Introduction and Drawing in p5.js
- Week 2 • Sept 14 • Animation with Variables
- Week 3 • Sept 21 • Interaction with Conditionals
- Week 4 • Sept 28 • Repetition with Loops
- Week 5 • Oct 5 • Organization with Functions
- Week 6 • Oct 12 • More Repetition with Classes
- Week 7 • Oct 19 • The DOM: HTML and CSS / Present Final Assignment
Submit all assignments using our homework form
All assignments are due the night before class
- Welcome! and introductions
- Course overview
- What is p5?
- p5 web editor
- p5 functions
- Tips for learning to code
- Syllabus / schedule
- What can we do with creative coding?
- Week 1 Syllabus Resources
- HTML, CSS, JavaScript / p5.js Website Demos | Code
- p5 getting started
- DO - Create a p5 web editor account. - Have a place online to document your creative assignments. This could be a website/blog, Notion page, or even a Google document. If you’re not sure what to use, please reach out to me for help.
- WATCH (BEFORE EXERCISES) • Coding Train videos 1.1-1.6 ~1hr 20min
- (OPTIONAL) if you prefer to READ:
- First steps - by Allison Parrish
- Chapters 1-3 of Getting Started with p5.js cover the same material. Log into the NYU network to read it for free
- PRACTICE • Week 1 Worksheet
- CREATE • SELF-PORTRAIT
- Think about what a self-portrait means to you. Is it a depiction of what you look like? A bridge between your private and public regard? Or a collection of your lived experiences?
- Consult the p5 Reference. Add comments to your code to describe the different parts.
- Submit your assignment on our homework form.
- WATCH (AFTER EXERCISES) • Coding Train Videos 2.1-2.5 about variables,
random(), andmap()~1hr - WATCH • Eyeo 2019 - Amon Millner ~40min
- Introduction Remix
- Animation: Variables Remix
- Share our homework
- Logging values to the Console
- Introduction to variables
- Animating shapes
- p5's system variables
- 1.2 draw_shapes_ui Coordinates and Color. Why Shapes sometimes green?
- p5js Code! - 2.1 - mouseX,mouseY
- p5js Code! - 2.2 - make your own variable
- p5.js Code! - 2.4 random() - Random Square Design
- circleX modulo Expressions
- circleX follow Building an algorithm
- circleX buttons Variables for animation
-
PRACTICE • Week 2 Worksheet
-
CREATE • 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.
- Submit on our homework form.
-
WATCH, READ, RUN CODE:
- Coding Train Videos 3.1 - 3.4 ~1hr | Get Code
- Getting Started with p5: Chapter 5 (Response). | Get Code
- Interaction: Conditionals Remix
-
- Make your own!
-
Object Literals
-
PRACTICE • Week 3 Worksheet
-
CREATE • Assignment #3 Make a rule-based animation that incorporates 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().
-
Be sure to cite the source of any material / code you use.
-
Submit on our homework form.
-
-
WATCH, READ, RUN CODE:
- Coding Train Videos 4.1 - 4.2 ~23min | Get Code
- Getting Started with p5: Chapter 4.5-4.13 (Variables). | Get Code
- Repetition: Loops Remix
- Review worksheet
- Share our homework
- Review conditional statements
- Introduction to loops
- Preview of functions
- Test Pattern by Ryoji Ikeda (video) | Generative Digital by Tyler Hobbs | Daily Art from Saskia Freeke | Shimmer by Dave Whyte | Quarantena generativa {2020} by Anna Carreras
- PRACTICE • Week 4 Worksheet
- CREATE • PATTERNS
- We humans have a tendency to look for patterns everywhere. We see patterns in nature and on the urban streets of New York. We rely on patterns we’ve detected in life to make predictions and acquire knowledge.
- Observe, both outside (your surroundings) and inside (your history of thoughts and feelings), make a sketch about a specific pattern you find.
- Think about how you can tell the unique story of the pattern using code.
- Submit on our homework form.
- WATCH
- Coding Train Videos 5.1-5.3 about functions and Videos 7.1-7.2 about arrays ~55 min
- Organization: Functions Remix
- For-loop review
- Introduction to arrays
- Defining and Using Functions
-
PRACTICE • Week 5 Worksheet
-
CREATE • Functions
-
Part 1: 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? Add comments and use well named functions and variables to help explain your code.
-
Part 2: Make your sketch canvas size independent. We should be able to adjust the canvas size with reasonable values.
-
Part 3: Pair up with someone to review your code. The reviewer should try to describe how your code works.
-
Submit on our homework form.
-
-
WATCH • Coding Train Videos 6.2-6.3 and 7.3-7.7 about writing classes to create many objects, mouse interacting with those objects, and objects communicating with each other ~1hr 40min
Dipika Titus--Blog