-
Notifications
You must be signed in to change notification settings - Fork 1
Homework MimiY 01
- Post at least 1 question here. Need help on asking a question?
Questions (example questions)
- Videos: Pixels - Focus on "The Pixel Array"
- Chapter 7 in Getting Started with P5.js through Ex 7-9 | Code
- p5VideoKit for Video Mixing Effects
- Full Resources
-
RESOURCES FROM CLASS
-
TEST YOURSELF
- Worksheet - Due in 2 weeks.
-
DO: EXPLAIN 1 THING.
- Prepare a 5-minute technical presentation of one of your sketches.
- Focus on what's happening in your sketch computationally. Clarify the vocabulary you will use. 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:
- Take this opportunity to really clean-up your code. You don’t even need to add any functionality!
- Add descriptive comments.
- Carefully name your variables and functions.
- Remove unnecessary repetition.
- Mash up a couple of your past assignments into a new sketch.
- Try incorporating arrays and classes with a sketch that has lots of something (balls, sheep, eyes).
- 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.
- Take this opportunity to really clean-up your code. You don’t even need to add any functionality!
-
READ / WATCH
-
Videos 8.1-8.10(~2 hours)
- 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
- Tamanna -- MidTerm Blog, Lines,lines,lines!
- Octavio -- SKETCH
- Chienn -- ICM Week 6 blog, Hectic Period
- Xinyu -- feeding balls
- Shohnigor -- life cycle, 6 week blog post
- Yidan -- Stars
- Cassidy -- pixel drawing
- Zoey - Cat moods upgraded
- Sahal -- Your Toy
- Josh bubbles
-
RESOURCES FROM CLASS:
-
REQUIRED ASSESSMENT ON LOOPS (1 of 2):
- Location: Common Area outside of Room 426
- There is no time-limit, however give yourself at least 30 minutes.
- Topic: Loops. However it assumes basic knowledge of p5 drawing functions, variables and conditionals.
- Available windows of time:
- Thursday Oct 4 3:30PM - 5:30PM
- Friday Oct 5 11AM - 2PM
- Wednesday Oct 11 1-3PM
-
TEST YOURSELF
- Complete the Worksheet
-
DO: 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?
- Aim to keep
setup()
anddraw()
as clean as possible, and do everything (calculations, drawing, etc.) in functions that you define. - Take care to name your functions precisely and accurately. Whenever possible, use verbs to name your functions. A good test of whether your functions are well-named is: Can someone else comment in/out individual function calls and predict what behaviors will start / stop working in your sketch?
- Challenge goal: Write a re-usable function, a function you can call in multiple ways to do the same thing slightly differently each time.
- Aim to keep
-
READ / WATCH
- Video 2.3 on JavaScript Object Literals (~10m)
- Videos 6.1-6.3, 7.1-7.7(~2h)
- 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?
- Josh: how do I upload a font to p5js? Prelaoding external links doesn't work for font file in google drive. Google font embedding is also confusing.
- Octavio Figueroa -- Week 5 Blog, DropSquareBlink
- Sahal Ali -- Week 5, a braid V2
- Tamanna -- Week 5, Difficult Choices
- Yidan Hu -- Week 5, Week 5 Assignment
- Xinyu Zhang -- [Week 5 blog is still on the way :D ], still the sea wave
- Shohnigor Ulmasova -- Week 5 blog post, pattern that changes color
- Josh Sun -- Week 5 Blog, who/where/what am I???
- Cassidy Chen -- Difficult Choice
- Zoey Ferguson Blog post, Cat choices with modularity
- Chienn -- Organised: Dust in NY houses
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 4
-
DO: Our ability to see patterns is what makes us human. However we also see patterns where none exist because our brains are biased towards detecting certain kinds of patterns over others (e.g. faces). Create a pattern by making something with a lot of repetition. Is the resulting pattern easy to see or hard to see? What would it mean to create the illusion of pattern? Can you predict what the pattern will be when you run your code or does it surprise you? You could take something you've already done where there was a lot of repetition in the code (e.g. your self-portrait) 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? * Octavio: Is there a quick way to comment out large sections (several lines) of code? * How can we make a shape repeat without the for loop and using our own functions? * Chienn- so is it because p5 lanauge understand setting up a variable "i" so that we don't necessarily have to declare it before we use it? * Josh - I'm having trouble of letting things drawn by any loop or random() function stay unchanged on canvas just waiting for new frames being drawn. (see my worksheet challenge 5) - why my function can't be used continuously without interfering with each time it's called? * Zoey - Can we go over adding delays into while loops?
- Octavio Figueroa -- Week 4 Blog, Crop Circles
- Shohnigor -- 4 week blog post, Pattern changing color
- Tamanna -- Week 4 Blog, Interactive Squares Pattern
- Chienn -- Week 4 Blog, Dust compiling in NY houses and flats
- Sahal Ali -- Week 4, a braid
- Yidan Hu -- Week 4,Lines
- Cassidy -- Week 4 Blog, Patterns
- Xinyu Zhang -- Week 4 Blog, Waves
- Josh Sun -- Week 4 Blog, Only modified the 10print but it's kinda pretty? after a minute
- Zoey Ferguson Blog post, Moon phases
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 3
-
DO: Two roads diverged in a yellow wood, And sorry I could not travel both... Life is full of difficult choices, use conditional statements to control the flow of your programs. Create a sketch that asks people to make difficult choices that have surprising consequences.
- Which choices are easier, harder? Which choices are false choices?
- What internal or external factors influence the choice? How do others’ choices affect your choices?
- What choices surprise you with unexpected outcomes?
- Can you combine choices to create hard-to-predict results? (Hint: Use && and ||)
- Work in Pairs Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors (if statement) and the other one codes the output behaviors (what to do if it’s true.) Can you swap sketches and riff off of your partner's work? Provide 1 sketch link per pair, however clearly describe who did what in the code.
-
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...
- Josh Sun: Is there any way to push the drawing into different layers? Does it have to be clear logical chain of commands? Sometimes moving around blocks of codes will interrupt the train of thoughts while coding, can I just call for new things to be in the background easily? Also is there a way to set up two sets of frameCount? I know it sounds insane but when many output all use that and all require resetting it then one frameCount won't fit it all.
- Why can't you just type delay and set for the time period?
- Zoey: Is there a built-in function or boolean which relates to the space bar / other keys being pressed?
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Code) -- any other comments
- Chienn Tai -- Week 3 blog post , The truth about small talk
- Octavio Figueroa -- Week 3 blog post, Two Roads
- Tamanna -- Week 3 , Difficult Choices
- Cassidy -- Week 3 blog,Difficult Choices
- Yidan -- Week 3,Choose
- Sahal Ali -- Week 3, Your Toy
- Shohnigor -- 3 week blog post, Comfort zone
- Xinyu Zhang-- Week 3 Blog, week3 choices
- Josh -- Week 3 Blog, need to marry into the 1%
- Zoey Ferguson -- blog post, Cat choices
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.
-
DO:
- Consider the following cliches / pearls of wisdom: No man is an island. There is no such thing as a new idea. Everything is related to everything else. It’s all relative. The world is defined through relationships and those relationships shape our perspectives. Use variables to build in some relationships between two or more elements in your sketch and think about how the perception of what’s happening is different depending on which element's perspective you take on. Think about:
- What’s related to what?
- How are they related?
- Is it a positive or negative relationship? Example sketch.
- Is it an amplifying or diminishing relationship? Example sketch.
- You should definitely take a mathematical approach to answering these questions but you can also take a figurative, metaphorical approach.
- The elements common to all of your sketches are: position, dimensions, stroke thickness, color values. Can you relate one or more of these elements to:
- itself over time (so it changes over time)
- a different element in your sketch
- frameCount (which frame of animation is now)
- mouseX or mouseY or the combined (mouseX, mouseY) mouse position
- or something else!
- You can revisit your self-portrait to build relationships (link the eyeballs together!) or create something new.
- Consider the following cliches / pearls of wisdom: No man is an island. There is no such thing as a new idea. Everything is related to everything else. It’s all relative. The world is defined through relationships and those relationships shape our perspectives. Use variables to build in some relationships between two or more elements in your sketch and think about how the perception of what’s happening is different depending on which element's perspective you take on. Think about:
-
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...
- Sahal -- I had difficulty understanding easing—particularly the expression used to calculate it. Is there a simpler way of explaining it?
- Octavio -- Documentation for the keyTyped function recommended adding 'return false;' at the end of the function, why?
- Chienn -- this is outside of our current content, but will we get a chance to talk a little bit about FFT?
- Josh Sun -- When I change variables within push() and pop(), the variables outside of that still get affected. Is there a way for me to reset the variables when they are out of the push & pop space so I don't have to create a bunch of them to use?
- Xinyu -- How can we upload photos from our computer to a web-based editor? I've tried using URL uploads, but it seems to fail every time.
- Boaty McBoatface -- [blog post](url to blog), [zoog]
- Tamanna Jain -- Eyes following the Mouse
- Sahal Ali -- Week 2, I'm shy
- Octavio Figueroa -- Week2 Blog, Mexican Spacefleet
- Cassidy Chen -- Week2 Blog, interference
- Yidan Hu -- My Mind
- Shohnigor Ulmasova -- 2 Week Blog Post, friendship
- Xinyu Zhang -- week 2 BB, Journey
- Josh Sun -- Blog Week02, What am I even doing
- Chienn Tai -- Fly that we can never catch
- Zoey Ferguson -- blog post, Color changing blobs
-
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. Play with symmetry in your portrait. Shapes include –
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, due 24 hours before the next class. 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?
- Josh -- For curve/bezier/quad/arc and more complicated functions, I had to measure all the specs in photoshop to use them, it is extremely counterintuitive and I definitely believe there are better ways to do it. So how?
- Sahal -- In what situations might you use the curve function instead of the bezier function? Is one easier to use than the other?
- How can we interpret the four points on the curve, and is there a tool, such as a ruler, that can assist in accurately measuring the pixel values for both the x and y axes?
- Tamanna -- Can we get accurate coordinates of x & y when placing shapes and lines in the canvas, and is it possible to change the ellipsemode or rectmode from centre to corner for different layers or shapes or does it stay the same for all?
- Shohnigor - I was not able to use triangle and arc it was hard for me to control them and put them where I wanted them to be, could you explain how to use these figures
- Octavio - The image we had to reproduce had a diagonal red rectangle (or line) which seemed to have stroke on one side and no stroke on the other side. I noticed that some of my classmates achieved that same effect just by drawing a red line with stroke, why is that?
- Xinyu - Is there any easy way to fill irregular area? Just like the paint bucket in the computer's drawing function that can quickly fill colors in a closed area?
- Chienn - Are we just trying to test our dimensional analysis to draw without a ruler/grid for this stage?
- How to rotate a shape? And how to set it back to its original?
- Boaty McBoatface -- [blog post](url to blog), zoog -- any other comments
- Josh Sun -- ICM Week 1, I think it's glorious and I need a facial
- Sahal Ali -- ICM Week 1, I grow
- Zoey Ferguson - ICM Week 1 blog post, Scary self portrait
- Yidan Hu -- ICM Week 1 Post, I look like a Circle
- Xinyu Zhang -- WEEK 1, Knowledge, the best sleeping pill -- OMG my neck is killing me (T^T)
- Octavio Figueroa -- WEEK 1 ICM Blog Post, Blinking Self Portrait
- Tamanna Jain -- ICM Week 1 Blog, So Pretty
- Shohnigor -- ICM Week 1 Blog post, I programmed to draw my face -- it was fun to make
- Chienn Tai -- ICM week 1 post, Self-Portrait: Alien Version a reflection of my hectic state in NYC. Edit: I thought we were doing more of an abstract/contemporary version of self-portrait I didn't expect to see my peers going on ALL IN mode lol now I feel like I have to re-do it.
- Cassidy Chen -- ICM week 1 blog, Self Portrait