This week we were tasked with creating an object-oriented sketch, consisting of objects and arrays.   I was inspired by the following clip to create a jellyfish sketch where the jellies would interact with the environment and eventually an intruder. 

In order to track my progress, I made multiple drafts of the sketches so that I can present them here.

I envisioned a scene in the deep ocean where a school of jelly fish were floating around and reacting to the currents.  As the jelly fish floated downwards, their movement would be easy/gradual.  Once they hit the point where they wanted to swim up, their movement would increase.  Eventually, an intruder, possibly a shark, would enter their swarm entered causing the jellies to move away to avoid the intruders. 

 Draft 1:

Code

I began this journey by creating a jelly fish function that had all the capabilities I desired.  Once that was working, I created a class titled JellyFish which housed the the methods constructor(), show(), swim() and move(). 

I had originally wanted to have a more fluid shape for the jelly fish but, after experimenting with various combinations of functions, settled on using an ellipse and an arc.  I would like to learn how to crate different shapes outside of the ones we have available to us in the P5.js reference for 2D shapes.   Had I been able to create the shape I wanted to, I was worried as how to make those shapes interact with each other.  As noted in one of Dan Shiffman’s videos, it is possible to work with shapes other than rectangle and ellipse but it is just more complicated. 

Draft 2:

 Code

Next, I worked to create varying sizes of the jelly fish.  I do like this effect but am not totally satisfied with how the jelly fish are all oriented so that as you go closer to (0, 0) they get smaller.  I was not sure why that happens when I used push(), scale(), and pop(), to create the different sizes.  This is a nice effect and adds the dimension I would like but I am not sure why this effect happens this way. 

Draft 3:

Code

For the 3rd draft, I worked to make it appear as if the jelly fish were in a confined space.  I added the height and the width of the sketch as a boundary for where they could swim.  When the jelly gets to the edge, it reverses course and swims away.  As you can see, I also removed the scaling of their sizes. 

 
Shark:

 Code

Next, I looked at adding an intruder into the jelly fishes’ environment.   Above is the shark I created much in the same way I created the JellyFish class. 

Draft 4:

 Code

Since I wanted the scale of the jelly fish and sharks to be proportional, I shrunk the jellies.   Within this sketch the JellyFish and SharkAttack are in two different classes.  I played with getting the jelly fish to move out of the way of the shark unsuccessfully.  IN the next draft, I moved the SharkAttack into the JellyFish class, renaming it JellyFishLife. 

Draft 5 Final:

 Code

I merged the classes into one, but did create two different objects using for the jelly and the shark. 

In conclusion and questions:

In order to bring this project to where I would like it, I need to figure out the following:

• How can I get the two classes in draft 4 to interact with each other?  I would like to also have the sharks moving along both the x and the y axis .  Maybe even chasing after the jelly fish. 
• How can I make color change in a liner fashion in stroke.  Instead of the stroke being a strobe, I would like the color to move around the body like on actual jelly fish. 
• Is there a millis() function, or something comparable, within JavaScript?  I would like to know how to work with objects that have various timing in their effects.  Currently, I am working with frameRate() to adjust the rate at which the effects happen.  Unfortunately, this makes all the effects happen at the same rate.
• I need to look into scale() further in order to get the varying sizes I would like.  This will help to create depth within my sketch.