Mini Project 5: Imaginary Creature

 

 

 

 

 

 

p5.js Link

For this mini project, I created an imaginary creature named Dradra. I first began by implementing my own user designed function of drawCreature, where I added the necessary codes of creating its body parts and details. In the first trial of this code, I used push and pop in the drawCreature function itself, and also fixed the translate origin at a set value instead of using variables of x and y. On top of this, I made separate user-defined functions for the creature’s arms, feet, and eyes, as I wanted to incorporate movement and rotation into these aspects. However, I struggled with having the code run the way I wanted it to, due to failure in noticing that I had to replace some fixed values with x and y, in order for the function to run properly. I also had difficulties in making the second creature appear when the key “q” is pressed, as I failed to properly define the layout of the code. Furthermore, I had to refer back to the 2 moving cabs we coded in class to assist me with the movement functions, and how to incorporate all separate user-defined functions into the one drawCreature function. It is evident in my code that I commented out multiple codes as I revisited and fixed my mistakes. After I had designed the creature, I wanted to add variables of randomness, in which I chose to add random colors to its party hat as well as the print on its belly. My original vision was to make the creature move in and out of the frame, as if it were on a loop, while making the feet rotate to give the illusion of movement. To add in more motion, I decided to make the arms also rotate, with the left arm rotating slightly faster than the right arm for some variation between speeds. To make things more interesting and interactive, I desired to make another creature appear once a key was pressed, therefore, I revisited my previous mini project of interactive drawing, to help me make this vision come true. I further incorporated mathematic elements by using radians and angles to make the rotations work, and variations of pi to create half circle shapes. Throughout this project, I encountered numerous difficulties with the code not running the way I desired it to, but I was able to overcome these obstacles by referring back to the lecture slides, previous mini projects, and codes we made in class. This mini project was quite fun to do as I got to create something out of my imagination, and have it move around the screen as I pleased.

In our codes, we use the translate() function in order to create new origins for new shapes, and also to make origins for movement. If we did not use the translate function, then we would need to make more calculations, and our incorporations of movements like rotations would not run properly as the original origin would be at 0,0. The push() and pop() functions are always used together because they essentially separate certain codes from the rest of your code. The push() signifies the start of a new code that contains settings of style and transformations, while pop() will restore these altered setting throughout the rest of the code. Therefore, push and pop are essential in coding numerous layers and adding motion, as they separate those changed settings without altering the rest of the code. User-defined functions are extremely useful as they help our codes become neater, and much easier to maneuver through. Having every code listed in the original draw function would make things much harder to look at and identity which item the code belongs to. Having these user-defined functions means that you can multiply them easily, and make slight changes or variations to each one, without having to recode everything.

Leave a Reply

Your email address will not be published. Required fields are marked *