-
Notifications
You must be signed in to change notification settings - Fork 0
Homework Dave 02
-
TEST YOURSELF: Complete Worksheet 3
-
DO: For this week’s assignment, you have 4 options to choose from. Pick one or many!
-
Option 1: Create your own version of a “bouncing ball” sketch. What kinds of events can you trigger when the “ball” hits the edge of the window (changing size, changing color, changing speed). What other types of physics can you simulate? Can you add gravity to the bouncing ball?
- Bouncing ball sketch references:
- Bouncing ball tutorial: https://youtu.be/LO3Awjn_gyU, code
- Bouncing DVD logo tutorial: https://youtu.be/0j86zuqqTlQ, code
- Bouncing ball sketch references:
-
Option 2: Try making a rollover, button, or slider from scratch. You are welcome to use the examples below as guides and inspiration:
-
Option 3: Create an algorithmic design with simple parameters. You may use any inspiration, but here is one of the earliest pieces of computer art as a starting point:
-
Option 4 Tie any of the above together! Can you create an interface element that controls the visual design or behavior of other elements in your sketch? For example, could a button start and stop the 10PRINT generation? Or could a slider alter the speed of a bouncing ball?
-
-
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...
- Junqi Zhang : How to make the ball move in a circle?
- Vivian Jia : For documentation purposes, is there a way to programmatically capture a GIF or image created in p5.js and download it directly from the sketch?
Homework Links: 1 Sketch Per Pair Note be sure to do a Blog post about your experience with your homework
- Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Code) -- any other comments
- Junqi Zhang -- Blog Post, catch the bouncing ball
- Tina Yu -- WEEK 3 BLOG,WEEK 3 PROJECT
- Michael Culleton -- Comp Media Week 3, Noise Coloring
- Sky Seo -- Comp Media Week 3, Noise and Ball Boundcing
- Keyi Ding -- ICM Week03
- Vivian Jia -- ICM_week3_blog,ICM_week3_rollover_power
- Laurel Fang Week 3 Blog Circle Art
- Yao Zhang -- Week3
- Olivia Lee -- Week 3, PoolSlider *Jenn Choi -- [Week3]https://editor.p5js.org/wonjchoi313/sketches/-sJCV_-II
- Siming Lu--Week3,HW3
- Rajeshwari Kotwal -- WEEK 3 BLOG, WEEK 3 Assignment
-
RESOURCES FROM CLASS:
-
TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.
-
DO:
-
Create an animated sketch!
-
As an exercise include all of the following.
- 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.
-
See if you can eliminate all (or as much as you can) hard-coded* numbers from the sketch. A hard coded number is something like fill(150). Better practice is to save 150 in a variable, for example myGreyColour, then use fill(myGreyColour)
-
-
-
WATCH, READ, RUN CODE:
- Watch Conditionals 3.1 - 3.4 ~1hr
- Getting Started with p5: Chapter 5 (Response). | Chapter 5 Code
- Learn about Transformations (Optional) Transformations Video Tutorials
- 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...
- Tina Yu - Is there a way to control frame rates for individual components within one project?
- Olivia Lee - Can we specifically take some time with the last challenge question from the worksheet?
- Rajeshwari Kotwal - How can I add background to the line moving at the top of my sketch, which has a gradient?
- Rajeshwari Kotwal - Can you please explain the function - Noise?
- Laurel Fang - Can we incorporate some pre-existing 2D/3D artworks/virtual fashion into P5?
- Vivian Jia - How can we control moving elements to ensure they stay within the frame without using the if() statement? or can we elaborate more on the if() statement in class?
- Luna Chen - Can we get a summarize of certain function? Like moving objects(without mouse interaction): speed, frameCount, target, easing.... Summary like these.... I'm confused everytime when I need to move a object, and also can't figuring out how to make the object back to original point automatically when the interaction is done.
- Homework Links: (Enter your Blog Post URL)
- David Stein -- [blog post](url to blog), [zoog]
- Tina Yu -- WEEK 2
- Junqi Zhang -- Rainbow Stripes, & Iteration Version: Rainbow Weave, blog post
- Culleton, Michael -- Comp Media Week 2, Block Layer Painter
- Laurel Fang --- [Blog Post],[Color Changing Lines]
- Vivian Jia --- ICM_week2_blog,ICM_week2_animated_sketch
- Jenn Choi --- https://editor.p5js.org/wonjchoi313/sketches/O-S77zkBe https://jennwchoiblog.cargo.site/intro-to-comp-media-1
- Olivia Lee --- Week 2,AnimatedSketch
- Rajeshwari Kotwal ---WEEK 2 HW
- Siming Lu----WeekTwo
- Sky Seo----WeekTwo
- Keyi Ding ---WeekTwo
- Han Bao ---Week 2
- Yao Zhang ——-Homework 2
- Luna Chen -- week2 Make an Art Using Animation, p5animationgraph
-
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?
- Sky Seo : How can I group the individual shapes to change the position of them together without changing all the shapes' position separately?
- Sky Seo : Can I use Hex Code in p5.JS? I don't see the option for hex code in 'colorMode()'.
- Sky Seo : IS the color RGB based or RGB'A' based? --- solved. RGBA based, but all the scales are 0 - 255 including 'Alpha' value.
- Tina Yu -- Question: Is there a more efficient way to determine your desired color and position for a shape requiring less guesswork?
- Junqi : What is an efficient way to understand the xy coordinate, especially when creating arc and curves. It was very hard to make the curve I want.
- Junqi : When I have a lot of variation in stroke/fill/color, what is the best approach to achieve a clean code?
- Laurel Fang: If I want to change the position of the hair clip altogether, is there a way to group all elements together and tilt the whole thing in one go?
- Laurel Fang: Can I change the brush properties, such as make it like a spray paint or has neon effect or a calligraphy pen?
- Yushin Li: How can I apply transformations like scaling or rotating to a group of shapes together more efficiently instead of doing each shape manually?
- Olivia Lee: I find that centering objects can be pretty difficult, is there some sort of function that can help with that?
- Jenn Choi: I was struggling making my top hair with oval shape + rotating. Is there any easier way to rotate them?
- Rajeshwari Kotwal : How do I make waves in p5? I tried doing that to my portrait for hair but could not achieve it
- Rajeshwari Kotwal : How do I select multiple objects and rotate them together?
- Vivian Jia: How does mirroring work with the arc() function?
- Bao, Han -- Han's ICM blog, Han's Self Portait
- Chen, Luna -- Week 1 Self Portrait, Self Portrait Luna
- Choi, Jenn -- Intro to comp media(https://jennwchoiblog.cargo.site/intro-to-comp-media-1), Jenn's face(https://editor.p5js.org/wonjchoi313/sketches/6_I5DIsxB)
- Culleton, Michael -- Comp Media, Self Portrait
- Fang, Laurel -- ITP ICM Laurel's Blog, Self-Portrait
- Jia, Vivian -- ICM_week1_blog,ICM_week1_self_portrait
- Kotwal, Rajeshwari Ranjeet -- Rajeshwari_Week 1 blog, rajeshwari_Week 1 Assignment 2
- Lee, Olivia -- ICM: Week 1, Self-Sketch
- Li, Yushin -- Intro to Comp Media Blog, [My panda skin](https://editor.p5js.org/Kuroihitsuji/sketches/6xkkTwC05 / a pixel version)
- Lu, Siming -- Intro to Computing Media, ICM-Siming-1
- Seo, Sky -- weekly documentation & coding activities, SKY - ICM 2024 -class 1_Portrait
- Yu, Tina -- ICM: week 1, TINA'S SELF PORTRAIT
- Zhang, Junqi -- How computation applies to my interests, W1 Self Portrait
- Zhang, Yao -- (What's the point of P5? Why do we draw in code instead of by hand?), self portrait
##Thursday, October 10