The Art of Touch
Behind the Technology
November 2011
Introduction
Microsoft Corp. is encouraging artistic creativity through the launch of an international art project
called “The Art of Touch,” available at http://www.artoftouch.com, which provides a palette of
brushes and effects to easily create, save and share original works of art using a mouse and a
modern Web browser. This process takes full advantage of HTML5 and leverages hardware
acceleration to perform the computations necessary to create the art. The Art of Touch palette
was inspired by the natural movements of the Microsoft family of Touch mice consisting of the
Microsoft Touch Mouse, Arc Touch Mouse and Explorer Touch Mouse.
Art Creation
The art creation process with the Art of Touch palette is the collaboration between human and
computer. The human selects a brush from three digital brushes — a ribbon, smoke or streak — in
combination with one of five different effects to render into a masterpiece. Brush effects include
starbursts, ribbons, trees, splats and waves. As a person draws, thousands of raw data commands
per second are generated to represent the artwork. The computer generates a representation of
the design in raw metadata that includes instructions for how the effect is animated and where it
will land on the digital canvas.
The canvas feature of HTML5 is combined with JavaScript drawing libraries to render the strokes
and computer-generated animations of the effects in real time to a Web browser. The outcome is
rich, unique, user-generated artwork that merges artistic inspiration with computer
sophistication.
Great Saves
Each person’s masterpiece is stored in a “raw” string format as the art is created. Every 1 MB of
raw data generated during the drawing process is streamed to the Art of Touch servers in the
background and aggregated into a single raw representation of the art piece. A custom server
component was built using Windows Presentation Foundation to store and read this aggregated
data. This component allows artists to recreate original 1,280-pixel-by-690-pixel artwork from
scratch, stroke by stroke, and render it out to alternate resolutions. That’s how the artwork seen
on screen can become a 2-foot-by-3-foot work of art displayed on a wall — or a postcard,
computer desktop or phone cover, without any pixilation.
Once the artwork is saved to the server, it’s incorporated into the Art of Touch communal canvas
and available for others to view. This ever-evolving community masterpiece is a composite of
everyone’s renderings, served up via repeated AJAX calls to the server and delivered in a size and
format that’s optimized for smooth scrolling as visitors explore each piece of communal art.
Brilliant Strokes
The artwork is inspired by visualizations that were previously available only through professional
drawing tools. These visualizations were then animated for the Web with a custom 2-D JavaScript
library and optimized for the HTML5 canvas. The digital brushes are defined in code, and their
characteristics are enhanced dynamically based on stroke velocity, acceleration and rotation.
For more information, press only:
Kelly Enstrom, Edelman, (206) 268-2281, kelly.enstrom@edelman.com