‘Jerrys’ in Soul
Link to the project: https://editor.p5js.org/Claire-y3/sketches/MBp8fgZTb
Description and Concept “Your Spark, Your Life”
The inspiration of my living creature came from a famous Disney movie Soul which was co-published by Pixar Animation Studio. In the movie, the counselors named “Jerry” were designed creatively. In the entire three-dimensional world, they are the only ones who appear as 2D images. They are composed of extremely simple and random lines, often making their bodies look like Picasso’s drawings. I really like the film and the concept it focused on, that’s partly the reason why I chose to portrayed the lovely Jerry in the project as a creative creature!
A Screen-recording of the project:
Coding —— arrays, translate() and rotate()
To better recreate the environment in the film Soul, I experimented on using for loop to generate a gradient background background. The for loop worked well in generating the background, however, it actually made operating process slower and slower. Perhaps loading an image or using lerpcolor() would be another solution for the gradient background.
To add variety in the creature, I decided to add the back-and-forth movement to the arm by using the sin() function and map() function to limit the range of angle change between -PI/12 and PI/12. Meanwhile, the origin of the moving part was transmitted to the top left edge of the pattern, which represents the “shoulder” of the creature. In this way, the “arm” can successfully rotate in a circular method.
Reflection
Arrays
For my project, I made use of arrays to draw my imaginary creature in different positions for 1 to 3 times randomly. Besides, the xArray.push(mouseX) and yArray.push(mouseY) are also embedded to generate a new creature at the mouse position whenever the user presses the mouse on the canvas. From my own experience, I found the arrays really helpful as the code for moving the creature and popping up new ones was apparently shortened and simplified by using a combination of for loops and xArray.length.
translate(), push(), and pop()
The push() and pop() functions are always used together. They function as a block to restore the drawing style settings and transformations. In other words, the settings programmed between push() and pop() are only applied to the codes in-between and won’t affect the other parts outside these two functions. Specifically, when we want to alter the origin from (0,0) to (a,b) for a specific group of code, we may use translate(a,b) between push() and pop() to apply the translate() function only to the selected part of the code.
User-Defined Functions
The user-defined functions are generally used for organizing and simplifying the code for potential modifications. Some of the UDF I used in this project are drawArm(), drawBody(), drawHead(), etc. They are effective since I only need to call them in the draw() function and adjust the parameters to make different rotations, origins, and scales for different sections.
Parameters
In my UDFs, I added x and y as two parameters related to the translate() function. By virtue of calling UDFs in the draw loop while setting their origin point (x,y) separately, I was able to clearly locate each part of the creature and even rotate the “arm” part to depict the waving of arms while walking.
Radically changed processes
After learning the array and translate() function, I noticed that I completely changed the way I set the position of different patterns. Previously, I would set different coordinates with (0, 0) as the origin. Now, modifying the translate() function would be a more convenient approach to assemble different parts of code.
drawHead(0, 0); drawBody(0, 0); drawEyes(0, -95); drawArm(-40, 15);