-
Notifications
You must be signed in to change notification settings - Fork 3
Homework MimiY 01
-
RESOURCES FROM CLASS
-
TEST YOURSELF
- Worksheet - Due in 2 weeks.
-
DO: Prepare a technical presentation of one of your sketches.
- 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:
- 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!
- 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!)
-
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?
- Does it mean that HTML and CSS go alongside, since one is about the structure, and initial content and the other is all about the style?
- Does modularity happen when we comment out only one function? Or does it count if we comment out more then one since some functions will have some variables that are being used in other functions as well?
-
Homework Links
- Lisa Jeong --Raindrops_midterm
- Han Zhang -- Blog, Midterm_Time
- Sophie Lee --MIDTERM_crazyFlower
- Bosung Kim --Midterm_What is your mood
- Hank Hsu -- Have some flowers for yourself
- Elif Ergin -- [Blog], [Jiggle Jiggle Presentation]
- Yuxuan Qi -- Blog, Midterm_Shooting Bullets Pattern
- Maria Martinez --Piano Midterm
- Zoe Margolis -- Sunset Midterm
- Nakyung Youn -- Blog
- Tom Xia -- particles
- Anna Nikaki -- [Blog] (https://annanikakinyu.notion.site/Week6-33659fe90f844561bb64dfb4d901113c) , Midterm Composition
-
RESOURCES FROM CLASS:
-
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?
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other
- Maryia Markhvida -- Blog post, sketch
- Maria Martinez -- sketch
- Han Zhang -- Documentation, Blog, Sketch
- Lisa Jeong -- Blog post, Sketch
- Zoe Margolis -- Blog Post, Sketch
- Bosung Kim -- Blog Post, Sketch
- (Hyunju)Sophie Lee -- Sketch
- Yuxuan Qi -- Blog Post,Sketch
- Sarah Mok-- Sketch
- Tom Xia -- sketch
- Hank Hsu -- Blog Post,Sketch
- Anna Nikaki --Blog Post
-
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, more than you want to hand-code. 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? * Name (optional): Question
* Elif- Can you please go over map()? * Elif - What did "if (canSlide) x = mouseX;" meant in the Slider example? * Elif - How can we randomize colors? Do we have to give an array? * Elif - How can we rotate a line grid/or our checkerboard? + how does overlay() work?
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
- Maryia Markhvida - Blog post, Sketch 1, Sketch 2
- Han Zhang -- Blog post, documentation, Sketch
- Bosung Kim -- Blog post, Sketch
- Elif Ergin -- Blog, Jiggle Jiggle
- Maria Martinez - Blog, Bronzed Mangoes Sketch
- Zoe Margolis - Blog, Bubbles
- Nakyung Youn--Blog post
- Yuxuan Qi--Blog Post, Sketch
- Sarah Mok-Blog post, sketch 1, Sketch 2
- Tom Xia Blog - Dots Pattern sketch
- Hank Hsu -- Blog post, Sketch
- Anna Nikaki [Blog post] (https://www.notion.so/annanikakinyu/week-4-dca0c53b0b9f4d558da847ceda2ed210) ,***
- Lisa Jeong -- Blog post, Sketch
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Complete Worksheet 3
-
DO: Use conditional statements to control the flow of your programs. Create a sketch that asks you to make difficult choices that have either small, medium or large 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...
- How do we use the function mousePressed(); (Since it's different from mouseIsPressed... We couldn't figure out function mousePressed and went along with mouseClicked();.. What is the difference between mouseClicked and mousePressed?
- If for() loop is so efficient, why do we still need the while() loop and when should we use it?
- How do I set the if statement for something that's always moving/rotating?
- How can I make a line rotate around its middle point?
- Is it possible to turn a shape like rectangle or circle into a button? Like clicking the shape area would trigger a function.
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Code) -- any other comments
- Maria Martinez -- Color Me Piano, Piano Keys
- Han Zhang --documentation, conditional statements p5, blog
- Sophie(Hyunju) Lee -- Color Me Piano -- Sophie Lee & Maria Martinez
- Anna Nikaki & Hank Hsu -- [blogpost], Hank's blog post, Choices Sketch -- Anna created the buttons and animations triggered by them (output behaviors); Hank set up the booleans and if-else statements (input behaviors).
- Maryia Markhvida and Lisa Jeong -- Maryia's blog, code
- Elif Ergin [Where do I begin?],[Choose Your Mood!] by Zoe Margolis & Elif Ergin
- Nakyung Youn & Yuxuan Qi--A Broken Clock
- Zoe Margolis -- Zoe's Blog Post, Choose Your Mood! (With Elif)
- Han Zhang(output and input) & Tom Xia(input) -- Disco
- Sarah Mok (Input behaviors) & Bosung Kim (Output behaviors) -- What is your mood today? Bosung Kim, Sarah Mok
- Anna Nikaki -- Blogpost
- Lisa Jeong - Blogpost, Lisa Jeong a collab with Maria
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.
-
DO:
- 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.
-
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 do you move a shape from point A to point B
- similar question: How to make the animation of colors in a controlled range in order to get the exact color change we want? I tried with constrain() but still didn’t get the ideal color change I want
- What is the difference between “var” and “let”?
- What’s the difference between declaring “let something = something” before function setup() and inside function draw()?
- How to keep a certain motion/animation going every time its triggering event occurs (instead of just playing it once initially when the code is run)? For example, fade an object in and out every time the mouse performs a certain action.
- Boaty McBoatface -- [blog post](url to blog), [zoog]
- Maria Martinez -- blog post
- Anna Nikaki -- [blogpost] --project1--project 2
- Hank Hsu -- blog post, self-portrait revisited
- Bosung Kim -- blog post, Bosung
- Maryia Markhvida -- blog post
- Sarah Mok -- [blog post](Sarah)
- Nakyung Youn-- blog post
- Yuxuan Qi-- blog post,Yuxuan
- Zoe Margolis-- Blog Post, Zoe
- Han -- Documentation Blog, General Thoughts, Experiment 1, Experiment 2
- Elif - Blog, [elif]
- Tom Xia [blog post]
- Anvay Kantak -- Blog Post, Animated Anvay
- Sophie(Hyunju)Lee - Blog post
-
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?
- What are the mechanics of curveVertex()?
- How can I round up only one corner of a rect() or a different shape?
- Can I make an ellipse-looking shape with sharp edges?
- What are some shortcuts for getting a specific color?
- How to set a time duration for the animation using “var” and “let”?
- How to animate the background color to make it switch between preset color schemes?
- How to make an ellipse or any other shapes askew? (not just horizontal or vertical)
- Boaty McBoatface -- [blog post](url to blog), zoog -- any other comments
- Peter Zhang -- Blog post, PETE
- Anna Nikaki -- [Blog post ],Blog -- ANNA
- Nakyung Youn--[blog post], Nakyung Youn
- Mary(ia) Markhvida -- blog post -- MARY
- Bosung Kim -- blog post, Bo
- Zoe Margolis -- Blog Post, Zoe
- Elif Ergin - (blog post) https://zelifergin.cargo.site/Computational-Media ,(Portrait) https://editor.p5js.org/zelifergin/sketches/0JiFk5ONw -- I'm sorry I just couldn't insert the links.
- Yuxuan Qi -- Blog Post, Yuxuan
- Maria Martinez -- Blog Post, Maria
- Alina Gardamshina -- Blog post[Alina]
- Lisa(Hokyeong) Jeong - Blog Post, Lisa
- Han ZHANG -- blog post, Han and Han (all inside the setup()without interaction)
- Sophie Lee (Hyunju) -- Blog post, Sophie
- Sarah Mok -- Blog Post, Sarah
- Tom Xia -- blog post, Tom
- Hank Hsu -- blog post, Hank
- Anvay Kantak -- blog post, Anvay
- Simran Chodavarapu -- blog post
- 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)
- 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
- p5VideoKit for Video Mixing Effects
- Full Resources
Dipika Titus--Blog