Week 2: Animated Elephant

This week I modified my previous program to accommodate the guidelines of this week’s assignment.  My goals could be divided into three parts.  First, I wanted to animate the elephant’s trunk dependent on the position of the users mouse.  Second, I wanted to add a message cloud to the elephant image that displays the word “Hello” in a different way each time you run the code.  Lastly, I wanted to change the color scheme of the elephant so that it randomly changes color over time. 

To achieve this goal, I modified my previous planning method to accommodate the way I would code these new effects.  Figure 1 shows the diagramed plan that I made.

  Figure 1 : Plan

Figure 1: Plan

First I re-drew the elephant and re-numbered the triangles that made up the elephant.  The way I numbered them this time allowed me to group them into body parts.  This made them easier to decipher and group in the code.  The list of which triangles belong to which body part is represented on the right of the figure in the following groups; back leg, front leg, body, ear, face, and trunk 1.  I then drew a triangle configuration for a new trunk (called trunk 2) which was used to animate the elephant with the movement of the mouse.  I lettered each vertex on the elephant and on the new trunk and listed them below the elephant sketch.  I copied the coordinates associated with each vertex from the previous weeks plan onto this drawing.  Using p5, I drew the new trunk (Figure 2) and recorded their desired coordinate positions on the plan.

  Figure 2 : Trunk 2

Figure 2: Trunk 2

To keep the color mapping consistent, I created a color scheme plan (top right of Figure 1).  Here I referred to the previous weeks project and noted which triangles were made the same color.  For instance, triangles 2 and 6 were the same color in my previous drawing, so I assigned them to be the color ‘c2.’  This way the randomizer will make triangles 1&2 different, for example, but keep 2&6 the same.  

Now I was ready to tackle the drawing in p5.  I first redrew my elephant with variables in order to clean up the code.  I also used comments to organize the triangles by body part.  Using an if statement I alternated trunk 1 and trunk 2 dependent on the position of the users mouse.  Trunk 2 included the message bubble and text.  Figure 3A&B represent the drawing when the mouse is on the left and right sides of the screen, respectively.

Using an array, I randomized what language the message would say hello in.  Every time the page is reloaded, the message displays the word hello in one of ten languages.  To randomize the color scheme, I assigned a random number generator for the RGB ranges within each color group (c1, c2, c3, etc).  I then applied those color fills to the appropriate triangles using the c1, c2, c3, etc variables.  The biggest problem that arose at this point was that the color randomization was happening every time the code looped.  Thus, the colors were changing so fast it looked like the image was flashing and created an epileptic effect.  In order to trouble shoot this problem, I changed the frame rate of the program.  This slowed down the transition of colors but also delayed the user interaction with the mouse position.  In order to slow the color transitions without affecting the mouse interaction I eventually implemented the timeInterval() function instead of the frameRate() function.  In this instance I created my own function and called it through the setup function every half second. The final result is represented here or in Figure 4.

The problems that I faced this week cause me to think creatively about how I would write my code in a clear way and still execute the goals I made for myself.  While the planning took a long time, I think that it gave me a clear path for developing the code.  I also was happy with how I spit the problem into three sections.  First I implemented the animation, then randomized the message, then randomized the color scheme.  This made it easy to debug as I went.  The ultimate solution to the color issue took some trial and error.  With each solution, new problems arose that I had to figure out.  If I were to continue this project, I would further organize my code such that the randomizing functions were placed inside a for loop.  I also might add more languages to the program through a web search, instead of a hard coded array.  This would shorten the code and eliminate human error like typos. Overall, I am happy with the way the final product turned out.