I developed this project while working at Column Five Media in 2014. The final client for the project was the United States Department of Agriculture and aimed to serve as a tool to educate middle schoolers on invasive pest species, so-called 'Hungry Pests.' This was perhaps one of my favorite projects I took on at Column Five; our team was given a lot of creative freedom, and I was given the duty of scoping our development, determining technical requirements & feasibility, and developing it. Ultimately, the project came in just under budget and was later deployed on the USDA's Hungry Pests microsite.
Under the hood, the project is fairy simple. It takes a state based approach to manage the interactivity and transitions between the scenes and subscenes. States and their associated data are encapsulated in a JSON object. It uses Knockout.js to manage a large portion of the interactivity via an MVVM pattern, with the item collector being perhaps the best example of this. Modernizr is used for browser detection and mobile interactivity. To expedite development, I used D3.js for SVG manipulations, though I certainly took a liberty there. Finally, perhaps one of the more interesting challenges was replicating the dark green multiply filter that one our talented designer had created for the mockups. Funny thing: this is not at all easy to do in the browser (or at least wasn't circa 2014) because it's not natively supported across modern browsers. The solution: create a simple image of it and overlay it. Hax.
Checkout the Github hosted site...and watch out for Vin Vasive!
