Technology

This Exquisite Forest is an online collaborative art project that makes use of several web technologies and Google products. On the server side, App Engine and Cloud Storage provide hosting, user accounts, and storage of thousands of user-generated animations. On the client side, Google Chrome provides fast JavaScript rendering and HTML5 features.

Google App Engine

The project is built and hosted on App Engine, Google’s cloud computing platform for developing and hosting web applications. App Engine allows us to easily build, maintain and dynamically scale the project.

  • User Accounts and Authentication

    App Engine uses Google accounts for authentication, which provides enterprise-grade security and allows users with existing Google accounts to skip the sign-up process. Accounts on This Exquisite Forest store profile information including contributions, favorites, draft animations, curation privileges, notification settings, and a drawn portrait.

  • Dynamic Scalability

    The more visitors the app receives, the more resources App Engine assigns, allowing it to dynamically scale depending on traffic.

Google Cloud Storage

Google Cloud Storage provides video and image hosting for the project. The service provides duplication across Google’s global data centers, meaning the animations (stored as WebM files) are served quickly to users around the world, regardless of location.

Google Chrome

The project makes use of several HTML5 features in Google Chrome.

  • Canvas

    The HTML5 Canvas element is showcased in the site’s drawing tool. Canvas is hardware-accelerated in Google Chrome, offloading rendering to the GPU and reducing CPU load, which improves performance.

  • SVG

    Google Chrome renders SVGs quickly, as seen in the site’s scalable tree browser.

  • Web Audio API

    The Web Audio API provides music playback when the user views an animation. Music is dynamically generated for each tree based on the input of the contributors.

  • CSS3

    Many of the project’s styling and transitions utilize CSS3.

  • HTML5 Video Tag

    All animations are played back using the HTML5 video player.

  • WebM Video

    WebM is an open source video framework that compresses videos into a small file size (considerably smaller than h.264) while maintaining high quality.

  • Google Web Fonts

    The fonts on the site are all freely available Google Web Fonts.

  • Local Storage

    Local storage allows saving local settings across browser sessions.

  • Wacom Tablet Support

    Many artists prefer drawing with a Wacom tablet instead of a mouse or trackpad. The native Wacom drivers inject embed tags in the browser, providing pressure sensitivity and eraser detection via a plug-in and JavaScript API.