For Dan Shiffman’s incredible Nature of Code class at NYU ITP, I decided to build a Web-based aquarium that would tell the tale of the world’s fish populations over the last 100 years. See it in action at: http://athinkingsam.com/aquarium/
People hear how fish stocks are being depleted due to overfishing, but it’s difficult to understand the real magnitude of this decline. My project — the Nature of Overfishing — is a Web aquarium that tells the tale of the world’s fish populations over the last 100 years. While there was once big “predatory” fish and small “prey” fish in healthy proportions, overfishing has decimated our ocean’s big fish (i.e. the ones humans catch and eat) and left small fish populations overly abundant. The decline was modest until 1970, and then took a sharp and drastic turn for the worst. This digital aquarium is a data story, presenting the information visually. The data comes directly from a regression analysis by Dr. Villy Christensen and the renowned UBC Fisheries Centre.
- You can see the full code here: https://github.com/sslover/the-nature-of-overfishing. You’ll want to primarily look at index.html, aquarium.pde, and application.js in the JS folder.
- You can find Dan Shiffman’s entire Nature of Code book here (this book is approachable and lots of fun… highly recommended!): http://natureofcode.com/
- You have to be very conscious of how much you are drawing. I find it’s best to use Arraylists to easily remove elements of the sketch when they are no longer needed (and add new elements).
- You should give the user a prompt if their browser can’t display the animation properly. Again using JQuery, you can detect browsers that don’t have the needed attributes to properly display a ProcessingJS sketch, and let the user know accordingly (for example, for browsers that don’t support Canvas or are very tiny).
Rule 1: No Libraries
Rule 2: Size EVERYTHING based on the detected screensize
Check out this chunk of code to see what I mean:
Rule 3: Monitor How Much You Draw
This is more of a thought process than anything else. There’s times we all want to go crazy and animate everything we can think of, but in a Web canvas environment, that won’t always work (in my aquarium, I initially animated some pretty badass sea plants, before realizing this would render the animation painfully slow on the Web). You’ll need to manage what you’re drawing somewhat meticulously. Using the Processing ArrayList, you can easily add and remove elements as needed. In particular, if an item leaves the screen or is otherwise no longer needed in your sketch, best to remove it. Pro tip: Println() the size of your Arrays and ArrayList until you push to production. That way, you keep track of how much you are exactly drawing.
Before I go on, I must reference the amazing (and definititive) guide by Pomax: http://processingjs.org/articles/PomaxGuide.html#jstosketch. Seriously, read it.
Rule 5: Prompt the User if their browser won’t properly show the sketch
Finally, we must accept that the Web is a whole different beast. The fact of the matter is that some users are going to try to access your animation with old browsers that lack Canvas (which is needed to display a ProcessingJS animation (and almost all Web animations for that matter)), or on mobile devices that are teeny tiny and may not be suitable in displaying your work (for example, while my aquarium works on mobile browsers, it lacks the same visual effectiveness). In these scenarios, it’s a good idea to create a pop-up modal window letting the user know that the visualization is not compatible with his or her browser.
Check out this tutorial for a very easy way to create a pop-up modal window with JQuery. Note that the window is hidden at first and ONLY shows if certain conditions are met (in our case, the browser lacks canvas or is below a certain size).
Here’s the code I created to trigger the modal: