top of page
FORM GENERATOR
Fall/2021
JavaScript | Creative Coding | 2D Illustration
* Try moving your mouse and clicking on the canvas.
overview
This is an individual project from my critical computation class. In this project, I explored parameterized design and played with the variable, parameter, and randomness of an object through code. I experimented with different functions in P5.JS including:
- User-defined variables
- random()
- mousePressed() & keyPressed()
Process
Process
At the beginning of this project, I was simply brainstorming about something I like and would like on multiple scales. The ice-breaker that we did on our recitation inspired me, and I remember I said I like seafood. Then the perfect idea jumped into my head --- a crab(my favorite seafood among all)! I love crabs with longer legs and a smaller body(Alaskan king crab), and also ones with shorter legs and a larger body(Dungeness crab). So I decided to code a cute and delicious crab with moving legs and different scales. It will wave its claws to you, blow up and change color when you move your mouse.
Here’s what my initial design looked like:
Reflection
reflection
The key element I learned from this project is the rotation degrees with “PI.” Since there are a lot of elements that rotate with mouseX and mouseY, I really spent a lot of time on the rotation degrees to make them look correct and attached. I wanted my crab to wave its claws as it mimics real crabs when they see something unfamiliar or dangerous. Personally, I find that translating the origin point can make rotating a lot easier using push() and pop(). Yet I still preferred not to translate the origin when there’s no rotating involved, as there will be a lot of negative numbers for the coordination and can make the math more complicated.
I also find that keeping the crab’s eyes at the correct location while the scale of the body change can be quite challenging, there’re a lot of variables involved, and it really requires the programmer to be both meticulous and have a clear logic. It is crucial to keep the code tidy and always comment next to the code. It is great for keeping the workflow smooth and also saves a lot of time when wanting to make changes.
While I was browsing through the P5.JS reference and learning the functions online, I found the map() function, and I experimented with it in my project. I really think the map() function works well with this project as we are exploring the realm of mouse interactions. I really like how my project turned out and am excited to learn more about P5.JS.
bottom of page