📌 Assignment
Find any sketch you previously created in p5.js with separate x,y variables for elements on the sketch. Can you rewrite the sketch with createVector() for each of these pairs?
✍️ Process
This week, I started my process by reading through the textbook chapter on vectors and following along with the examples. I remember back in the Fall of 2021, when I was first learning p5, we learned how to display multiple dots on a screen in a grid (here is that original sketch).
I was also inspired by another dot-grid sketch I wrote a few months ago:
I rewrote this code and generated a grid of small dots on the screen. I planned on creating some sort of mouse interaction, but just kind of jumped in without a specific plan. I first used dist to draw lines connecting dots in a certain radius of the mouse. I thought this created a fun, kind of spider web effect!
As I continued following along with the book, I learned about acceleration and how to make the dots move towards the mouse. By setting the magnitude of the acceleration to negative, I was able to make the dots run from the mouse. I also stored the original position of the dot so that it can return to its original location and kind of bounce around:
I had (and still have) an issue where the dots never fully settle back to the original position. I can make them more steady by setting the magnitude of acceleration to 1, but they still jitter a little bit. I would love any suggestions on how to fix this!
I messed around a lot with the values and still could never get this issue fixed. At one point I just made the dots teleport back to their original position, but that did not look the greatest or most realistic. Regardless, I decided to accept the jitter and pushed on, deciding to gamify the experience.
I made it so the dots are attracted to the pointer within a certain radius from the mouse. As you collect more dots, this radius gets smaller and smaller, making it more difficult to hold all the dots at once. There is a score in the top left that displays the number of dots captured.
This felt similar to trying to vacuum the most annoying dust off a floor and hence the name “Clean the Floor!”
😋 Concluding Thoughts
Overall, I feel that I have an okay understanding of vectors. As the textbook said, it takes time to fully grasp new concepts and realize their potential. When I first was learning how to create Objects, I saw no real use for them, but now use them all the time to simplify projects.
I do not feel that I have a complete grasp of how vector math works, either. This is something that I think I just need to spend more time watching the videos to gain a deeper understanding of the specifics of all the operators.
Looking forward, I am excited to continue to use vectors in projects. I can see they have a lot of potential to create beautiful sketches but it will just take time to get to the point of using them confidently.
As for this project specifically, in the future, I would love to add more of the typical game elements (welcome screen, game win screen, restart button) and fix the jittering problem. It could also be fun to maybe make the mouse a little vacuum icon and add texture and randomness to the ‘dust’ (maybe with a noise function 😏).