I've been self-studying HTML/CSS/JS.  I read about [Wa-tor][1].  It's a population dynamics simulation which simulates fish and sharks breeding and predating.  This seemed cool so I decided to implement it.  I don't know much about javascript, my background is mostly in python and R.

Here's my [implementation][2].  Just hit Play.  And here's the [source code][3].

I had a lot of questions pop up while I was writing this.  Some of them:

 1. Did I take the right approach by using the Canvas?  I considered SVG but read that Canvas is better for many entities, especially if I did one-to-one pixels.  Would the next step be GL for this kind of thing?
2. Did I use JS's "class" system properly?  I don't think I took full advantage of `Fish` and `Shark` inheriting from `Animal`.
3. Did I organize my files properly?  I feel like three .js files may be overkill.
4. What does my code smell like?
5. Did I miss out on any helpful design patterns?

I don't have much experience doing this, so some guidance would be enormously helpful.  Thank you.


  [1]: https://en.wikipedia.org/wiki/Wa-Tor
  [2]: https://jeffshaul.github.io/wa-tor/
  [3]: https://github.com/jeffshaul/wa-tor