-
Notifications
You must be signed in to change notification settings - Fork 5
Homework MimiY 01
- Complete worksheet and also complete last week's worksheet if you haven't already.
- Post at least 1 question here. Need help on asking a question?
Questions (example questions)
- Josephine: (From Week 6) When using for (let each of array) or for (let other of array), how can we identify an item's index number? Do we have to use for (let i = 0; i < array.length; i++) to do so?
- Cat: I am not sure why my first question code (grid that changes colors when clicked on) is not working properly
- Vesper: how to manipulate the .js file on a webpage console?
- Videos: Images/Video 11.1-11.8 - Focus on videos 11.1 and 11.3
- Chapter 7 in Getting Started with P5.js through Ex 7-9 | Code
- Full Resources
-
RESOURCES FROM CLASS
-
TEST YOURSELF
- Optional Worksheet - You can complete it for Week 8 if you'd like.
-
DO:
- Next week you will be presenting your own assignments. Duration: 5 minutes. 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. See my demo video (It is much longer than the time you will have!)
- 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)
- Write down what you're going to say ahead of time. Prepare diagrams to help get your point across!
- OPTIONS FOR WHAT TO DO:
- Mash up a couple of your past assignments.
- Re-factor a past sketch and make it better.
- Design a sketch that has lots of something (balls, sheep, eyes) using either arrays or arrays and objects.
- 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.
- In the end the goal is to have code in
draw()
that only makes calls to objects. Something like:
- Next week you will be presenting your own assignments. Duration: 5 minutes. 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. See my demo video (It is much longer than the time you will have!)
function draw() {
background(0);
// A single object
apple.chop();
// Another object
orange.peel();
// Calling a function on all of the objects in an array
for (var i = 0; i < grapes.length; i++) {
grapes[i].pluck();
}
}
-
READ / WATCH
-
Videos 8.1-8.10(~2 hours)
- There's a lot, so if it's too much new information, just focus on the basics, videos 8.1, 8.2, 8.4 (~30 minute)
- More resources from syllabus
- p5.dom section of Chapter 13.4-13.6 in Getting Started with P5.js
-
Videos 8.1-8.10(~2 hours)
-
Examples
-
ASK
- Post at least 1 question here. Need help on asking a question?
-
Homework Links
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
- Josephine Wang -- ICM Midterm Assignment Week 6, Trees
- Cat Dinh - Blog,Midterm
- vesper guo - midterm, blog
- Oscar Durand [Midterm][Blog]
- Yang Xu (Nunu) - Midterm, blog
- Ruoxiao Sun - Midterm Ink Painting, Midterm Blog
- Honglin Cai- midterm, test1, test2Blog
- Angel Mai -- Week 6 - ICM, Midterm Sketch
- Shuchen Xu -- Wk6_Blog , Wk6_Project
- Shanshan Bai --cubelife
- Coco Ma -- Week 6 - ICM
- Nana Liao -- ICM_Week_6
- Tony Li -- WK 6 - ICM
-
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
-
ASK * Post at least 1 question here. Need help on asking a question?
- Lifei: In the last question of the worksheet, I try to use the function I created (assigned with variable coordination multiple times) in draw(), but they always overlapped no matter how I change the location or the size of the ball. I wonder why that is keep happeing.
- Sarah: The syntax for defining a constructor a different in the videos and the books. I assume this is just a preference, but can you share if there are any pros and cons for using class Bubble () {} vs function Bubble () {} ?
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other
- vesper guo -- vesper's blog, sketch
- Josephine Wang -- Cook,Eat,Repeat
- Cat Dinh -- sketch
- Ruoxiao Sun -- Week 5 HW sketch, Week 5 Blog
- Oscar Durand -- [Sketch] [Blog]
- Honglin Cai -- sketch blog
- Angel Mai -- [Week 5 - ICM](Link to Blog Post), Sketch
- Yang Xu (Nunu) -- Sketch, blog
- Shuchen Xu -- Sketch, Blog
- Coco Ma -- Week 4 Sketch - My Ripped Jeans,Blog
- Tony Li -- Week 5 Assignment
- Nana Liao -- ICM_Week_5
-
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
-
ASK * Post at least 1 question here. Need help on asking a question? * Name (optional): Question
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
- vesper guo -- vesper's blog, sketch
- Shanshan Bai -- ICM blog, Shanshan Bai sketch
- Ruoxiao Sun -- Week 4 Blog, Week 4 Sketch
- Josephine Wang -- ICM_Week4_Loops
- Honglin Cai -- blog assignment
- Yang Xu (Nunu) -- blog,ICM_Week4_HM
- Oscar Durand -- [Assignment] [Blog post]
- Coco Ma -- Coco's Blog Post, Sketch:Growing wild in Romanticism
- Nana Liao -- ICM_Week_4
- Angel Mai -- Week 4 - ICM, Sketch
- Cat Dinh -- sketch
- Shuchen Xu -- Week_4,Blog
- Tony Li -- Week_4_Assignment
-
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
-
ASK
- Post at least 1 question below. Examples of good questions...
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Code) -- any other comments
- Vesper & Angel -- Week 3 - ICM (Angel), vesper blog, Group Project 1
- Ruoxiao Sun & Yang Xu -- Week 3 Blog (Ruoxiao), Week 3 Blog (Yang), Group Project 1
- Cat & Tony -- Group Project, Blog(Tony)
- Honglin Cai & Shanshan Bai -- Group Project Blog Honglin
- Oscar & Coco -- Group Project ,Blog Post (Coco), [blog post Oscar]
- Josephine & Shuchen & Nana -- Group Project - RBG Sliders, Blog
-
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)
-
ASK
- Post at least 1 question below. Examples of good questions...
- How to use conditionals to see if my mouse is off canvas?
- How to change the refresh rate of draw()?
- How to fix the quivering circle that follows my cursor...? (question by vesper and here is the p5js link)
- Do lines such as noStroke() apply to only the first shape underneath it or all shapes written underneath it?
- Is it possible to slow down the circles (using random();)?
- Boaty McBoatface -- [blog post](url to blog), [zoog]
- Josephine Wang -- Morning Meeting, a self portrait_v2.0
- Vesper Guo -- blog,selfportrait
- Cat Dinh -- [new art piece] [blog]
- Honglin Cai -- blog, self portrait
- Yang Xu (Nunu) -- blog, self portrait02
- Ruoxiao Sun -- Process of Improving Self Portrait, Improving Self Portrait
- Rongyu Li(Tony) --improved self-portrait, blog
- Shanshan Bai--animated self-portrait
- Angel Mai -- ICM - Week 2, tyra
- Oscar Durand -- [new sketch] [blog]
- Coco Ma --- ICM - Week 2,Blog
- Shuchen Xu --- Wk2_Blog, New_Self_Portrait
- Nana Liao --- ICM_Week2_new_sketch
-
RESOURCES FROM CLASS:
-
SET UP:
- Sign up for a Github Account. You need it to edit this wiki page.
- Log into a p5.js web editor account with your github account.
-
DO:
- Complete this worksheet. Our weekly worksheet become the basis for the next class. You must be logged in with your NYU account to access the worksheet.
- Create a "self" portrait using 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 an example: Zoog - 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? Did you post any issues to github?
-
READ AND WATCH:
- Follow the TO THE LESSON Link:
- Watch before HW: Videos 1.1 - 1.6(~1h 15m)
- Watch after HW: Videos 2.1 - 2.3(~30m)
- 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.
- Follow the TO THE LESSON Link:
-
ASK
- Post at least 1 question below. Examples of good questions...
- Name (optional) -- Question: Why is it that this is like this and that is like that?
- In what situations do you initialize a variable as you are declaring it, i.e., let circleX = 0; function setup() {?
- How to see my curser's real-time coordinates on my canvas?
- Boaty McBoatface -- [blog post](url to blog), zoog -- any other comments
- Angel Mai -- ICM - Week 1, tyra
- Oscar Durand –– [blog post] (url to blog), [oscar]
- Josephine Wang -- ICM Assignment Week 1, Morning Meeting, a self portrait
- vesper guo ICM blog, self portrait -- Q: When I created the same function twice (both are draw) with different arguments within, it only shows commands from the second function draw(), why not both?
- Ruoxiao Sun -- ICM Wk1 HW, Process of Self Portrait, Self Portrait -- Q: how do I know the accurate position of control points for curve()? How can I show different thicknesses in one line?
- Cat Dinh -- Week 1, Self Portrait
- Honglin Cai -- ICM-Week 1, Self Portrait
- Coco Ma ---Blog Post Week 1, Self Portrait
- Shuchen Xu ---Blog Wk 1, Self Portrait Q:What is the order of the points for curve()? What is the logic behind curve()?
- Yang Xu (Nunu) ---ICM-Week1, Self Portrait
- Chensu(Nana) Liao - blog, portrait
- Shanshan Bai ---[self-portrait],Blog
- Tony Li ---Self-Portrait, Blog