CINXE.COM

<!DOCTYPE html><html><head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("http://web.archive.org/web"); __wm.wombat("https://experiments.withgoogle.com/hopper","20231004030246","http://web.archive.org/","web","/_static/", "1696388566"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <title>Hopper the Penguin Explorer by Artists in Residence at Google Arts & Culture Lab: Jonathan Tanant, Nicolas Barradeau - Experiments with Google</title><meta name="description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><link rel="icon" type="image/png" href="/web/20231004030246im_/https://experiments.withgoogle.com/static/img/favicon.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Hopper the Penguin Explorer by Artists in Residence at Google Arts & Culture Lab: Jonathan Tanant, Nicolas Barradeau - Experiments with Google"><meta name="twitter:site" content="@google"><meta name="twitter:description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta name="twitter:image" content="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/P3wexVnl_cnM6o-7akKdnfzhtbB8sT7tj-SbDtcfc4cyK8Qaq_APuVp3ok-iahbKnme2uILZsREpw-il7g8MxIen-OHD4w"><meta property="og:title" content="Hopper the Penguin Explorer by Artists in Residence at Google Arts & Culture Lab: Jonathan Tanant, Nicolas Barradeau - Experiments with Google"><meta property="og:type" content="website"><meta property="og:url" content="http://web.archive.org/web/20231004030246/https://experiments.withgoogle.com/hopper"><meta property="og:image" content="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/P3wexVnl_cnM6o-7akKdnfzhtbB8sT7tj-SbDtcfc4cyK8Qaq_APuVp3ok-iahbKnme2uILZsREpw-il7g8MxIen-OHD4w"><meta property="og:image:type" content="image/jpeg"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta itemscope itemtype="http://schema.org/Article"><meta itemprop="title" content="Hopper the Penguin Explorer by Artists in Residence at Google Arts & Culture Lab: Jonathan Tanant, Nicolas Barradeau - Experiments with Google"><meta itemprop="name" content="Experiments with Google"><meta itemprop="description" content="Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments."><meta itemprop="image" content="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/P3wexVnl_cnM6o-7akKdnfzhtbB8sT7tj-SbDtcfc4cyK8Qaq_APuVp3ok-iahbKnme2uILZsREpw-il7g8MxIen-OHD4w"><link href="http://web.archive.org/web/20231004030246cs_/https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.css" rel="stylesheet"><link rel="stylesheet" href="//web.archive.org/web/20231004030246cs_/https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700|Source+Code+Pro:300,400,500,600,700" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"><link rel="stylesheet" href="/web/20231004030246cs_/https://experiments.withgoogle.com/static/css/vendors.css" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"><link rel="stylesheet" href="/web/20231004030246cs_/https://experiments.withgoogle.com/static/css/style.css" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"><script nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">!function(e,t,n,a,r){e[a]=e[a]||[],e[a].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var o=t.getElementsByTagName(n)[0],c=t.createElement(n),g="dataLayer"!=a?"&l="+a:"";c.async=!0,c.src="http://web.archive.org/web/20231004030246/https://www.googletagmanager.com/gtm.js?id="+r+g;var s=t.querySelector("[nonce]");s&&c.setAttribute("nonce",s.nonce||s.getAttribute("nonce")),o.parentNode.insertBefore(c,o)}(window,document,"script","dataLayer","GTM-WSXK4F2");</script></head><body class="experiment hide-butterbar" data-coll-name=""><header> <div class="wrapper"><div id="logo-holder"><a href="/web/20231004030246/https://experiments.withgoogle.com/"><nav id="logo" role="navigation" aria-label="Homepage">Experiments with Google</nav></a></div><div id="menuoverlay"><nav id="mainmenu" role="navigation" aria-label="main navigation"><ul id="collection-menu" style="padding:0"><li style="padding:0" class="menuitem coll-options"><a href="/web/20231004030246/https://experiments.withgoogle.com/collections" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Collections</a><div class="triangle-down">&blacktriangledown;</div></li><ul id="home-menu"> <li class="home-menuitem" data-coll-name="tfliteformicrocontrollers"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/tfliteformicrocontrollers" title="TensorFlow Lite for Microcontrollers" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">TensorFlow Lite for Microcontrollers</a></li> <li class="home-menuitem" data-coll-name="startwithone"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/startwithone" title="Start With One" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Start With One</a></li> <li class="home-menuitem" data-coll-name="creatability"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/creatability" title="Creatability" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Creatability</a></li> <li class="home-menuitem" data-coll-name="digitalwellbeing"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/digitalwellbeing" title="Digital Wellbeing Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Digital Wellbeing Experiments</a></li> <li class="home-menuitem" data-coll-name="webxr"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/webxr" title="WebXR Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">WebXR Experiments</a></li> <li class="home-menuitem" data-coll-name="arts-culture"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/arts-culture" title="Arts & Culture Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Arts & Culture Experiments</a></li> <li class="home-menuitem" data-coll-name="ar"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/ar" title="AR Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">AR Experiments</a></li> <li class="home-menuitem" data-coll-name="ai"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/ai" title="AI Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">AI Experiments</a></li> <li class="home-menuitem" data-coll-name="android"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/android" title="Android Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Android Experiments</a></li> <li class="home-menuitem" data-coll-name="chrome"><a href="/web/20231004030246/https://experiments.withgoogle.com/collection/chrome" title="Chrome Experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Chrome Experiments</a></li> <li class="home-menuitem" data-coll-name="All Collections"><a href="/web/20231004030246/https://experiments.withgoogle.com/collections" title="View all <built-in method count of list object at 0x3e4bff5381c0> collections" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">VIEW ALL 17 COLLECTIONS</a></li></ul></ul><a class="menuitem" href="/web/20231004030246/https://experiments.withgoogle.com/experiments" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Experiments</a><div id="searchwrap"><div class="menuitem" id="search"></div><input type="text" name="search" id="searchbox" value="" aria-label="Search experiments" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search" onfocus="this.placeholder=""" onblur="this.placeholder="Search""></div><a class="menuitem submit-btn border" href="/web/20231004030246/https://experiments.withgoogle.com/submit" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6">Submit Experiment</a></nav><div class="google-logo"></div></div></div></header><div id="main" class=""><div class="wrapper"><div id="exp-intro"><div class="cont-left displaytext"><h1 class="title">Hopper the Penguin Explorer</h1><p class="gray">July 2020 | By Artists in Residence at Google Arts & Culture Lab: Jonathan Tanant, Nicolas Barradeau </p><p style="margin-top:10px;width:90%">Travel around the world with a pesky penguin</p> <div class="action-button-holder" style="margin-top:25px"> <a class="button hollow caps" href="http://web.archive.org/web/20231004030246/https://artsexperiments.withgoogle.com/hopper" target="_blank" onclick="ga("send","event","Experiment Launch Button","Click","Hopper the Penguin Explorer")" aria-label="Launch Hopper the Penguin Explorer Experiment" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"> Launch experiment </a> </div></div><div class="cont-right"><h3 class="caps small">Collection:</h3><div id="collections-holder" style="display:block"> <a class="collection" href="/web/20231004030246/https://experiments.withgoogle.com/collection/arts-culture">Arts & Culture Experiments</a> </div></div></div><div class="video-holder" data-videoid="VqTHLegOoyk" data-exp-name="Hopper the Penguin Explorer"> <img class="video-cover-image" src="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/lW2cia5eIZiFiQtmFDbuZtZzDSQneV49WgB3SzU9bSjC5gnpmLny6gxxbIGnawYWPd31jI8ISa_Wd08gBrrIn-5V_0z4DA" alt="" data-img-alt=""> <div class="video-embed" id="video-VqTHLegOoyk" data-loop=""></div><img src="/web/20231004030246im_/https://experiments.withgoogle.com/static/img/video-play-btn.png" class="video-play-btn" alt="Video Play Button"></div><div id="featured-holder"><div class="featured-img-holder"><img class="featured-img" src="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/g332ypGHY3LkA2teYvlcwCf-OitFt12C9OpILrhDAkrxJM4uGx4aMVhqzfHXuyjAPY4qHdsiINjNY7dYc1f_JwpKWDoT" alt="" data-img-alt=""></div> <div class="featured-img-holder"><img class="featured-img" src="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/7mEkLgK9RmSjAu8-qoORamGfV8wyCY0a95bOeFsoPmfzRHwFRkXnuS4RZD6WNw7pmXjjy0hgY4nGrkqxphmnPdwCCKr8QA" alt="" data-img-alt=""></div> <div class="featured-img-holder"><img class="featured-img" src="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/Q_XXoqkXCbV8bJfYoLMvQCBEkRw-j65LoNTndRe-9Gk7BzLvdiarDRxaqVPrHNjMUQu7LkNPnYU9Ask21EFRNgOMQtKvxQ" alt="" data-img-alt=""></div> <div class="featured-img-holder"><img class="featured-img" src="http://web.archive.org/web/20231004030246im_/https://lh3.googleusercontent.com/NVkYP1BXSe76R2L5U6i0TE3CqmM0CppUJbfmt0Z5-WXLOtZANYdqr4Hc6jFfWG08nZJ_FEkFVtfBiSz25K2VVluORPGh" alt="" data-img-alt=""></div> </div><div class="content-wrap single"><div class="content-twothird"><div class="content-block displaytext"><p>Have you ever wanted to discover the pyramids of Giza or climb on top of the Eiffel Tower? Let our penguin be your guide and show you around some of the most beautiful places in the world. You can even snap a picture and immortalize some of your favourite virtual trips!</p><p><br></p><p>Launch the experiment and pick a destination. Drag and drop the penguin and let him show you some of the most magnificent places on earth. You can view on the map the route travelled from the beginning of your journey. </p><p><br></p></div> </div><div class="content-onethird"><h4 class="caps small">Built with: </h4><div id="tags-holder" style="display:block"> <a class="tag" href="/web/20231004030246/https://experiments.withgoogle.com/experiments?tag=Three.js">Three.js</a>, <a class="tag" href="/web/20231004030246/https://experiments.withgoogle.com/experiments?tag=3D">3D</a>, <a class="tag" href="/web/20231004030246/https://experiments.withgoogle.com/experiments?tag=Javascript">Javascript</a>, <a class="tag" href="/web/20231004030246/https://experiments.withgoogle.com/experiments?tag=GLSL">GLSL</a>, <a class="tag" href="/web/20231004030246/https://experiments.withgoogle.com/experiments?tag=es6">es6</a>, <a class="tag" href="/web/20231004030246/https://experiments.withgoogle.com/experiments?tag=WebGL">WebGL</a> </div></div></div></div></div><footer><div class="wrapper"><div class="google-logo"></div><div id="social-holder"><a href="http://web.archive.org/web/20231004030246/https://www.google.com/policies/" target="_blank" class="social-icon">Privacy & Terms</a><div id="social-icons"><a class="social-icon" href="http://web.archive.org/web/20231004030246/https://www.facebook.com/ExpWithGoogle/" target="_blank" aria-label="Link to our Facebook page"><img src="/web/20231004030246im_/https://experiments.withgoogle.com/static/img/social-fb.png" alt="facebook icon"></a> <a class="social-icon" href="http://web.archive.org/web/20231004030246/https://twitter.com/ExpWithGoogle" target="_blank" aria-label="Link to our Twitter page"><img src="/web/20231004030246im_/https://experiments.withgoogle.com/static/img/social-tw.png" alt="twitter icon"></a></div></div></div></footer><div id="page-loader"><div id="txt-submitting">Submitting...</div><div id="txt-saving">Saving...</div></div><div id="sitemenu-icon"><span class="line1"></span> <span class="line2"></span> <span class="line3"></span></div><div id="overlay"><div id="overlay-closebtn"></div><div id="overlay-content-wrap"><div class="wrapper"><div id="overlay-content"></div></div></div></div><script src="//web.archive.org/web/20231004030246js_/https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"></script><script src="/web/20231004030246js_/https://experiments.withgoogle.com/static/js/vendors.js" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"></script><script src="/web/20231004030246js_/https://experiments.withgoogle.com/static/js/script.min.js" nonce="e6-TOYORnEjERDc8DEQWxS2x2FhwKLF6"></script><script src="http://web.archive.org/web/20231004030246js_/https://www.gstatic.com/glue/cookienotificationbar/cookienotificationbar.min.js" data-glue-cookie-notification-bar-category="2B"></script></body></html>