This week in ICM, our homework is to create something that applies our new knowledge in Video & Audio in the p5.js environment. Part of the HW is to watch/work through Daniel Shiffman’s coding train playlist #11: Video and Pixels – P5.js. Below are screen-recordings of me following along with the tutorials & their github code examples here ❤ ❤
Full Screen (in browser)
P5.js Editor view
Week 6 Assignment
Create a sketch that it uses HTML controls (like buttons, sliders, text input fields) as a means of modifying the sketch’s behavior in real time. (You can adapt a previous homework assignment for this if you’d like.) BONUS: Incorporate an HTML control from p5.dom that we didn’t talk about in class. Alternatively or in addition, use p5.dom to modify other elements on the page (these elements could be added by hand in index.html or dynamically added by your code.)
Arrays and objects allow you to do something new with your programs: keep track of user action over the course of your sketch’s execution. For this week’s assignment, create a sketch that takes advantage of your new skills. The sketch should allow the user to use clicks, key presses, etc. to add new elements to the scene (and potentially to remove them later). Your sketch should use an array of objects. (Using a constructor function or the
class syntax is optional.)
Originally I was inspired by Allison Parrish’s example in the notes on Objects & Arrays
- Thinking about Arrays within Arrays (or really arrays as objects?)
- Would like to comb back through code with an *objects & methods* approach:
- When talking with classmate Jiwon Shin we started talking about how i could add a deletion tool to my current sketch state (which pushed mouseDrag to an empty array when you drew with mouse down to create each cloud). She walked me through how I could push all of the point drawn with the mousePressed into an array that is then pushed into another array – essentially making cloud objects?
- One issue I hit when deleting was the program would break if you hit the delete key too many times. When debugging it in the console, we noticed it would try to call a negative number from the array (which doesn’t exist), as a solution – limited the call number to positive numbers only. So no matter how many times you hit “c” the program will still only reference the array number 0, and add on as you draw more clouds.
- it still breaks if you click without drawing something – it confuses the program, due to no information being pushed to one of the arrays?