<!DOCTYPE html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-51165-1";
urchinTracker();
</script>
<title>Glen Murphy</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/png" href="/favicon.png">
<script src="controller.js"></script>
<script src="classlist.js"></script>
<body>
<div id="menu" class="menu">
  <a href="#hello" class="title">Glen Murphy</a>
  <div class="menu-section">
    <div class="title">Current</div>
    <a href="#android">Android</a>
    <a href="#chrome">Google Chrome</a>
    <a href="#route">Route.IO</a>
  </div>
  <div class="menu-section">
    <div class="title">2011</div>
    <a href="#mug">MUG001</a>
    <a href="#flock">Flock</a>
  </div>
  <div class="menu-section">
    <div class="title">2010</div>
    <a href="#dropmocks">DropMocks</a>
  </div>
  <div class="menu-section">
    <div class="title">2006</div>
    <a href="#browsersync">Browser Sync</a>
    <a href="#excanvas">ExplorerCanvas</a>
  </div>
  <div class="menu-section">
    <div class="title">2005</div>
    <a href="#webcomments">Web Comments</a>
    <a href="#cuttoribbons">Cut to Ribbons</a>
    <!--<a href="#">Sproutliner</a>-->
  </div>
  <div class="menu-section">
    <div class="title">2004</div>
    <a href="#robotmirror">Robot Mirror</a>
    <a href="#ducttape">Duct Tape</a>
    <a href="#nano">Nano Floor</a>
  </div>
  <div class="menu-section">
    <div class="title">2003</div>
    <a href="#freelook">Freelook</a>
    <a href="#fluidbodies">Fluid Bodies</a>
    <a href="#augmented">Augmented</a>
    <!--<a href="#">Crumbler</a>-->
    <a href="#c1">System C1</a>
    <a href="#b1">System B1</a>
  </div>
  <div class="menu-section">
    <div class="title">2002</div>
    <a href="#europa">Europa</a>
    <a href="#bezekric">Bezekric</a>
    <a href="#systemsa">System A_</a>
    <a href="#esite">E-site</a>
    <a href="#bodytag">Bodytag</a>
  </div>
</div>
<div id="main" class="main">
  <div class="main-section">
    <a name="hello"></a>
    <div class="title">Hello</div>
    <div class="description">
      Glen is an Australian computer nerd who works and lives in Palo Alto, California where he is
      cheerily responsible for the design of Google's platform products - Android, Chrome, and Chrome OS. Prior to that, he was a
      college dropout web developer who created and exhibited odd things in dark galleries while muttering about "<i>computationally
      connecting wonder and reality</i>".
      <br /> <br />
      Here are a selection of projects. More frequent and random updates appear on <a href="http://twitter.com/gmurphy">Twitter</a> and <a href="https://plus.google.com/u/0/106626801258696700254/posts">Google Plus</a>.
    </div>
  </div>
  <div class="main-section">
    <a name="android"></a>
    <div class="title">Android <span class="date">2015-Present</span></div>
    <a href="http://android.com/"><img src="i/android.png" highres="true" class="image" width="600" height="250" alt="Android M promotional picture" /></a>
    <div class="description">
      I'm head of Android UX. We design systems for things like phones, tablets, watches, TVs, and cars.
      <!--
      <ul>
        <li>As a starter project for myself, I made <a href="https://play.google.com/store/apps/details?id=com.glenmurphy.agendaface">a watchface</a> for fun.</li>
      </ul>
      -->
    </div>
    <div class="links">
      <a href="http://android.com/">Android</a>
    </div>
  </div>
  <div class="main-section">
    <a name="chrome"></a>
    <div class="title">Chrome + ChromeOS<span class="date">2006-2018</span></div>
    <a href="http://google.com/chrome/"><img src="i/chrome.jpg" highres="true" class="image" width="600" height="250" alt="Picture of Google Chrome" /></a>
    <div class="description">
      If any project could be called my life's work, this is it. I joined at the beginning as its designer, wrote a bunch of the first frontend, and in addition to Android, run the Chrome and ChromeOS design teams. Have some trivia:
      <ul>
        <li>I often answer questions about Chrome on <a href="http://www.quora.com/Google-Chrome">Quora</a>. For example, here's <a href="http://www.quora.com/Google-Chrome/Why-is-Chrome-called-Chrome/answer/Glen-Murphy">why Chrome is called Chrome</a>.</li>
        <li>As punishment for not providing images in a timely fashion, a friend made my head briefly <a href="http://techcrunch.com/2009/08/05/chromes-new-feature-click-the-ui-designer-to-close-the-window/">appear in the product</a>.</li>
        <li>I gave <a href="http://www.baychi.org/calendar/20081209/">a talk on Designing Google Chrome</a> at BayCHI shortly after we launched. Though I didn't know it at the time, I think it can be summarized as "our working style is very similar to Agile".</li>
        <li>I appear as the guy with a black shirt and glasses in <a href="http://www.google.com/googlebooks/chrome/">the Chrome comic</a>, a piece of promotional material for the initial launch that we accidentally released one day early.</li>
        <li>Occasionally, I appear in videos: <a href="http://www.youtube.com/watch?v=UiLSiqyDf4Y">Chrome multitask mode</a> and <a href="http://www.youtube.com/watch?v=lm-Vnx58UYo">Chromebook destruction</a>.
      </ul>
    </div>
    <div class="links">
      <a href="http://chrome.google.com/">Chrome website</a>
    </div>
  </div>

  <div class="main-section">
    <a name="route"></a>
    <div class="title">Route <span class="date">2012-Present</span></div>
    <a href="http://route.io/"><img src="i/route.png" highres="true" class="image" width="600" height="250" alt="Picture of Route.IO on a phone" /></a>
    <div class="description">
      Route links events and commands on your network-aware devices; it's how you connect the things on the internet of things together and control them.
    </div>
    <div class="links">
      <a href="http://route.io/">Route website</a>
      <a href="https://github.com/glenmurphy/route/">Route on GitHub</a>
    </div>
  </div>

  <div class="main-section">
    <a name="mug"></a>
    <div class="title">MUG001 <span class="date">2011</span></div>
    <a href="/"><img src="i/mug001.jpg" class="image" highres="true" width="600" height="250" alt="Picture of mug" /></a>
    <div class="description">
      This is a 3D-printed ceramic mug. It has a notch in the side for your teabag string.
    </div>
  </div>

  <div class="main-section">
    <a name="flock"></a>
    <div class="title">Flock <span class="date">2011</span></div>
    <a href="http://bodytag.org/flock/"><img src="i/flock.jpg" class="image" highres="true" width="600" height="250" alt="Screenshot of flocking app" /></a>
    <div class="description">
      A JavaScript experiment to see how many flocking particles I could put on screen at once.
    </div>
    <div class="links">
      <a href="http://bodytag.org/flock/">View</a>
    </div>
  </div>

  <div class="main-section">
    <a name="dropmocks"></a>
    <div class="title">DropMocks <span class="date">2010</span></div>
    <iframe width="600" class="video" height="315" src="http://www.youtube.com/embed/nNJ4so8AKag" frameborder="0" allowfullscreen></iframe>
    <div class="description">
      A weekend hack turned large. DropMocks was built in a sleepless marathon to show off how HTML5 drag and drop could be used to make a compelling image sharing service. It stuck around a bit longer than I thought it ever would, and the code has gone on to be used by a few startups who've done bigger and better things.
    </div>
    <div class="links">
      <a href="http://dropmocks.com/">Dropmocks website</a>
      <a href="http://github.com/glenmurphy/dropmocks">Source code</a>
      <a href="http://techcrunch.com/2010/11/22/dropmocks-chrome-designer/">Coverage</a>
    </div>
  </div>

  <div class="main-section">
    <a name="browsersync"></a>
    <div class="title">Google Browser Sync <span class="date">2006 [Defunct]</span></div>
    <div class="description">
      My first real project at Google - a Firefox extension that let you sync your bookmarks, history, tabs and cookies across multiple computers. I joined late in the project and mostly just made a nuisance of myself while learning to never volunteer to work on sync code ever again.
    </div>
    <div class="links">
      <a href="http://en.wikipedia.org/wiki/Google_Browser_Sync">Wikipedia article</a>
    </div>
  </div>

  <div class="main-section">
    <a name="excanvas"></a>
    <div class="title">ExplorerCanvas <span class="date">2006</span></div>
    <a href="http://code.google.com/p/explorercanvas/"><img src="i/excanvas.jpg" highres="true" class="image" width="600" height="250" alt="Cube spinning in space" /></a>
    <div class="description">
      My first use of Google's "20% time". Along with Erik Arvidsson and Emil Eklund, I spent a few days making this open source utility to allow web developers to use Canvas on Internet Explorer by emulating it using VML. It ended up becoming enormously popular, though now that modern versions of Internet Explorer support canvas natively, it's no-longer needed.
    </div>
    <div class="links">
      <a href="http://code.google.com/p/explorercanvas/">Project site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="webcomments"></a>
    <div class="title">Blogger Web Comments <span class="date">2005 [Defunct]</span></div>
    <div class="description">
      My starter project at Google. I had five weeks to build and launch this Firefox extension that showed you comments from across the web about the site you were viewing.
    </div>
    <div class="links">
      <a href="http://googleblog.blogspot.com/2005/12/new-firefox-extensions.html">Launch blog post</a>
    </div>
  </div>

  <div class="main-section">
    <a name="cuttoribbons"></a>
    <div class="title">Cut to Ribbons <span class="date">2005</span></div>
    <iframe class="video" width="600" height="315" src="http://www.youtube.com/embed/ynn4kfW8_0Y" frameborder="0" allowfullscreen></iframe>
    <div class="description">
      A projector based interactive installation artwork. The image processing code used two webcams to figure out the position of a object (such as a flashlight) and used that to generate ribbons in 3D space. It used red-blue glasses because I was cheap.
    </div>
    <div class="links">
      <a href="http://bodytag.org/cuttoribbons/">Project site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="robotmirror"></a>
    <div class="title">Robot Mirror <span class="date">2004</span></div>
    <iframe class="video" width="600" height="400" src="http://www.youtube.com/embed/ovCyzXGsxhY" frameborder="0" allowfullscreen></iframe>
    <div class="description">
      Another projector-based artwork; this maps brightness to time.
    </div>
  </div>

  <div class="main-section">
    <a name="ducttape"></a>
    <div class="title">Duct Tape <span class="date">2004</span></div>
    <a href="http://ducttape.glenmurphy.com/"><img src="i/ducttape.jpg" class="image" width="600" height="250" alt="3D ribbons" /></a>
    <div class="description">
      The game Doom 3 let you use your flashlight or your gun, but not both at the same time. This mod corrected that. This was one of the first mods for Doom 3, and filled enough of a gap that it was Slashdotted, Bluesnewsed, and downloaded 100,000 times in the first 24 hours.
    </div>
    <div class="links">
      <a href="http://ducttape.glenmurphy.com/">Project site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="nano"></a>
    <div class="title">Nano Floor <span class="date">2004</span></div>
    <iframe width="600" height="437" class="video" src="http://www.youtube.com/embed/a7CBgRC5-Wg" frameborder="0" allowfullscreen></iframe>
    <div class="description">
      Nano2 is a multi-user room-sized interactive installation created for the NANO exhibition at the Los Angeles County Museum of Art. It was commissioned by Victoria Vesna, Chair of Design | Media Art and Jim Gimzewski, Professor of Chemistry at The University of California, Los Angeles.
      <br /> <br />
      Nano2 takes the form of a projected floor covered in Carbon-60 molecules, otherwise known as buckminsterfullerines, or 'buckyballs' for short. By themselves, the buckyballs slowly roll together to form a hexagonal lattice. Collisions between buckyballs at speed result in snooker-ball like motion.
      <br /> <br />
      A vistor entering the area acts upon the buckyballs in the same way that the balls act upon each other, so children can run through swarms of buckyballs and disperse them as they would a flock of seagulls.
    </div>
    <div class="links">
      <a href="http://bodytag.org/nano2/">Project site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="freelook"></a>
    <div class="title">Freelook <span class="date">2003</span></div>
    <a href="http://freelook.glenmurphy.com/"><img src="i/freelook.jpg" class="image" width="600" height="250" alt="Freelook software montage" /></a>
    <div class="description">
      Freelook is computer-vision software that allows you to use movements of your head to accurately control your mouse cursor. This translates to hands-free viewpoint control in games (you can look around your car or plane by moving your head slightly), as well as providing a mouse alternative for handicapped users. Freelook is similar in execution to the excellent cam2pan and TrackIR systems, although unlike the latter, Freelook only requires a cheap off-the-shelf webcam.
    </div>
    <div class="links">
      <a href="http://freelook.glenmurphy.com/">Project site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="fluidbodies"></a>
    <div class="title">Fluid Bodies / Mood Swings<span class="date">2003</span></div>
    <a href="http://bodytag.org/fluid_bodies/"><img src="i/fluid_bodies.jpg" class="image" width="600" height="250" alt="Photos of fluid_bodies exhibit" /></a>
    <div class="description">
      Fluid Bodies is a work developed in collaboration with Victoria Vesna and Jim Gimzewski of UCLA. It ties together computer vision and fluid simulations to show a reflection of the future hidden worlds of nanotechnology.
      <br /> <br />
      Fluid Bodies has been exhibited in customized and differing forms at:
      <ul>
        <li>Nano, Los Angeles County Museum of Art, 2003-2004</li>
        <li>The Sublime Project, Phatspace@Projekt, Sydney. 2005</li>
        <li>Apeejay Media Gallery, New Delhi, 2005 (as <i>Cell Ghosts</i>)</li>
        <li>Crash and Flow, Seoul-Shinchon Art Festival, Seodaemun Prison, Seoul, Korea, 2004 (as <i>Cell Ghosts</i>)</li>
        <li>Crash and Flow, Seoul-Shinchon Art Festival, Red Gate Gallery, Beijing, China, 2003 (as <i>Cell Ghosts</i>)</li>
        <li>Ladyfest Berlin, 2005 (as <i>Mood Swings</i>)</li>
        <li>Cyberfem. EACC, Spain. 2007 (as <i>Mood Swings</i>)</li>
        <li>Inside Out Loud, Mildred Lane Kemper Art Museum. 2005 (as <i>Mood Swings</i>)</li>
        <li>Swabian Castle, Trani, Confini, Rome. 2004 (as <i>Balkan Ghosts</i>)</li>
        <li>The Art of the Mediterranean, MACRO, Museum of Contemporary Art, Rome. 2004 (as <i>Balkan Ghosts</i>)</li>
      </ul>
    </div>
    <div class="links">
      <a href="http://bodytag.org/fluid_bodies/">Project site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="augmented"></a>
    <div class="title">Augment 1 &amp; 2 <span class="date">2003</span></div>
    <div class="video" style="height:233px;"><iframe width="300" height="233" src="http://www.youtube.com/embed/Gsb1tQdi9ao" frameborder="0" allowfullscreen></iframe><iframe width="300" height="233" src="http://www.youtube.com/embed/Ymc2ghppxJM" frameborder="0" allowfullscreen></iframe></div>
    <div class="description">
      In 2003, I was convinced that Augmented Reality was the future, and spent a week producing a proof of concept that I demoed at the Unite meetup in Melbourne. Rather than use the now-ubiquitous squares, I hacked together my own marker system based on circles because the math was easier and circles looked nicer.
    </div>
    <div class="links">
      <a href="http://bodytag.org/augment1/">Augment 1</a>
      <a href="http://bodytag.org/augment2/">Augment 2</a>
    </div>
  </div>

  <div class="main-section">
    <a name="c1"></a>
    <div class="title">System C1 <span class="date">2003</span></div>
    <img src="i/c1.jpg" class="image" width="600" height="250" alt="In car head up display" />
    <div class="description">
      A head up display for my car; it used a vacuum fluorescent display, a handheld GPS, a laptop under the seat, and a small Python script.
    </div>
    <div class="links">
      <a href="http://riot.com.au/systems.php?s=c1">View project</a>
    </div>
  </div>

  <div class="main-section">
    <a name="b1"></a>
    <div class="title">System B1 <span class="date">2003</span></div>
    <img src="i/b1.jpg" class="image" width="600" height="250" alt="Glen looking like a giant nerd" />
    <div class="description">
      An LED-based mouse control system inspired by Minority Report. It's software, a webcam, and a hand-hacked-together velcro-and-solder glove with LEDs and buttons on it. Though it worked, it mostly only succeeded in convincing everyone that I was a giant nerd.
    </div>
    <div class="links">
      <a href="http://riot.com.au/systems.php?s=b1">View project</a>
    </div>
  </div>

  <div class="main-section">
    <a name="europa"></a>
    <div class="title">Europa <span class="date">2002</span></div>
    <a href="http://bodytag.org/europa/"><img src="i/europa.jpg" class="image" width="600" height="250" alt="Screenshot of a Processing applet showing Glen and Lauren ice-skating" /></a>
    <div class="description">
      I was bored and in love, so I wrote this Processing applet. It ended up in a few magazines, and there's a screensaver version floating around out there somewhere.<br /> <br />We got married eight years later.
    </div>
    <div class="links">
      <a href="http://bodytag.org/europa/">View applet</a>
    </div>
  </div>

  <div class="main-section">
    <a name="bezekric"></a>
    <div class="title">Bezekric <span class="date">2002</span></div>
    <a href="http://bodytag.org/abstraction_now/"><img src="i/bezekric.jpg" class="image" width="600" height="250" alt="Screenshot of Bezekric app." /></a>
    <div class="description">
      Bezekric was a generative artwork piece that was exhibited at Abstraction_Now, K&uuml;nstlerhaus, Vienna and at White Noise, ACMI, Melbourne.
    </div>
    <div class="links">
      <a href="http://bodytag.org/abstraction_now/">Project site</a>
      <a href="http://www.abstraction-now.at/the-online-project/?a=gmurphy">Exhibition site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="systemsa"></a>
    <div class="title">Systems A1 &amp; A2 <span class="date">2002</span></div>
    <img src="i/a2.jpg" class="image" width="600" height="250" alt="System A2" />
    <div class="description">
      These experiments into wearable computing involved finding ways to control music playback from external devices - in this case a Griffin Powermate or a Bluetooth phone. The headphones-plugged-into-a-laptop-in-a-backpack-controlled-by-my-phone System A2 was the best seven-pound, 3-hour-battery-life, 'portable' MP3 player of 2002.
    </div>
    <div class="links">
      <a href="http://riot.com.au/systems.php?s=a2">A2 (phone)</a>
      <a href="http://riot.com.au/systems.php?s=a1">A1 (powermate)</a>
    </div>
  </div>

  <div class="main-section">
    <a name="esite"></a>
    <div class="title">E-site <span class="date">2002</span></div>
    <a href="http://bodytag.org/esite/"><img src="i/esite.jpg" class="image" width="600" height="250" alt="E-site screenshot" /></a>
    <div class="description">
      This piece was commissioned by a magazine as a tutorial for Java developers. It was exhibited online by the National Gallery of Australia. When viewed on a modern computer, this applet demonstrates my complete lack of foresight when it came to controlling run speed - computers get faster over time, who knew?
    </div>
    <div class="links">
      <a href="http://bodytag.org/esite/">View applet</a>
    </div>
  </div>

  <div class="main-section">
    <a name="bodytag"></a>
    <div class="title">Bodytag <span class="date">2002</span></div>
    <a href="http://bodytag.org/"><img src="i/bodytag.png" class="image" width="600" height="250" alt="Bodytag screenshot" /></a>
    <div class="description">
      Bodytag was the place I dumped all my experiments and work for many years. Many of the things on it are now comically out of date, but it's where I played, and is special to me.
    </div>
    <div class="links">
      <a href="http://bodytag.org/">View site</a>
    </div>
  </div>

  <div class="main-section">
    <a name="riot"></a>
    <div class="title">Earlier <span class="date">1997</span></div>
    <div class="description">
      <p>
        <b>riot.com.au</b><br />
        I used to write computer game reviews for one of Australia's first gaming websites; after the site went under new management, I made my own. It's what lead me to web development.
      </p>
      <p>
        <b>Quake-C</b><br />
        I wrote mods for Quake. Though I'd always been a hobby programmer, this is what gave me the feedback loop I needed to fall truely and maddeningly in love with creating with text editors, Photoshop, and 3D Studio.
      </p>
    </div>
  </div>
</div>
</body>
<script>
var m = new MenuController();
</script>
