Re-working the fire fox

For this assignment we were asked to take an existing project to re-work and clean up the code using functions, objects and arrays -- I selected my fire fox sketch. The purpose of using functions is to compartmentalize and simplify the code.

By creating a fox function() that called all of the arguments needed to construct the fox, I am not able to easily change the following:

  1. the x, y coordinates of the fox without having to move each shape individually
  2. create multiple foxes as seen in the image below
  3. add variation to the additional fox without affecting the original fox

Here is the location to view the code for the fire fox.

I definitely see the benefit of using functions however this assignment turned out to be a lot more difficult that initially expected.  For some reason, the way functions work doesn't come easily and so this sketch rework took me quite a long time. I am going to take more time this weekend to understand the basic principles.

One specific issue that I was having was that if you have a variable in the header that references random(), it breaks the code.  For a very long time I didn't understand what was going on.  Apparently, you need to call the random() in the setup() or draw() and not in the header because random() is a specific function to p5.js and the library needs to be referenced before this can be called (?).