Project #2: Form Generator

Description

This is an individual project from 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()

Design Process

At the beginning of this project, I was simply brainstorming about something I like and I 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(which is 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 it’s claws to you, blow up and change color when you move your mouse.

Here’s what my initial design looked like:

Reflection

The key element that 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 it’s 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 with the use of 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 work flow 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 excited to learn more about P5.JS.