Posted:

Posted by Valdean Klump, Data Arts Team

Originally posted to the Google Chrome blog

In 2009, we launched Chrome Experiments to showcase the work of creative coders who pushed HTML5 and JavaScript to the limits in order to build beautiful, unique web experiences. At first, the site had only 19 experiments, but we hoped they would be a source of inspiration for programmers who made art with open web technologies. Since then, we’ve been humbled by the quantity and quality of new submissions. Today, we’ve reached a major milestone: 1,000 experiments.

To celebrate, we’ve created a special Experiment #1000 that visualizes every other experiment on the site. You can explore all 1,000 in a variety of ways, including a real-time code editor and a timeline with selectable tags. Click on the WebGL tag, for example, and you’ll see how that technology surged in popularity when it was added to Chrome in 2011.

A visualization of the first 1,000 Chrome Experiments

Along with Experiment #1000, we’ve redesigned ChromeExperiments.com using Polymer. It’s mobile-friendly, so no matter what kind of phone or tablet you have, or how you hold it, the site scales smoothly. If you’re on your phone, you can also filter the list to mobile-compatible experiments by selecting the Mobile tag.

The new ChromeExperiments.com

Looking back at the old experiments this month has been a joy. Highlights include Mr.doob’s classic Ball Pool (one of the original 19 experiments), the first WebGL experiment by Gregg Tavares (try 4,000 fish – this used to be very slow!), and Dinahmoe’s multiplayer audio toy Plink, which combines the Web Audio API with Node.js. At Google I/O in 2012, we released the first mobile experiments, including AlteredQualia’s Multitouch Toy and Dominic Szablewski’s X-Type. And each year afterward, new web technologies appeared, like getUserMedia and the Web Speech API. It’s been a wonderful journey.

Thank you to everyone who has supported the site, and most of all to the creators who have shared their work. We’re excited see what experiments you come up with next.

Posted:

By Aaron Koblin, Data Arts Team and Bill Schilit, Research

Cross-posted from the Official Google Blog

As digital designers, we often think about how to translate traditional media into a virtual space. Recently, we thought about the bookcase. What would it look like if it was designed to hold digital books?

A digital interface needs to be familiar enough to be intuitive, while simultaneously taking advantage of the lack of constraints in a virtual space. In this case, we imagined something that looks like the shelves in your living room, but is also capable of showcasing the huge number of titles available online—many more than fit on a traditional shelf. With this in mind, we designed a digital bookcase that’s an infinite 3D helix. You can spin it side-to-side and up and down with your mouse. It holds 3D models of more than 10,000 titles from Google Books.

The books are organized into 28 subjects. To choose a subject, click the subject button near the top of your screen when viewing the bookcase. The camera then flies to that subject. Clicking on a book pulls it off the shelf and brings it to the front and center of the screen. Click on the high-resolution cover and the book will open to a page with title and author information as well as a short synopsis, provided by the Google Books API. All of the visuals are rendered with WebGL, a technology in Google Chrome and other modern browsers that enables fast, hardware-accelerated 3D graphics right in the browser, without the need for a plug-in.

If you’ve finished your browsing and find a book you want to read, you can click the “Get this book” button on the bottom right of the page, which will send you to that book’s page on books.google.com. Or, you can open the title on your phone or tablet via the QR code that’s in the bottom left corner of the page, using a QR code app like Google Goggles. You can also browse just free books by selecting the “Free Books” subject in the subject viewer.



Bookworms using a modern browser can try the WebGL Bookcase today. We recommend using Google Chrome and a fast computer with a powerful graphics card. Even with new hardware, this interface is experimental and may not work on some machines. For more creative browser experiments, check out Chrome Experiments, a gallery of more than 300 creative projects made by developers and artists from around the world, many utilizing WebGL.


Posted by Scott Knaster, Editor

Posted:

By Ricardo Cabello (aka Mr.doob), Google Data Arts Team



Last August, we released “The Wilderness Downtown”, a music experience that brought together HTML5 and JavaScript, as well as the Google Maps and Street View APIs. Today, we’re excited to introduce our newest project, “3 Dreams of Black”, made with WebGL, HTML5 and JavaScript, and designed for modern browsers like Google Chrome. We previewed this music experience yesterday with web developers at Day 2 of the Google I/O keynote.

“3 Dreams of Black” takes you on a journey through three dream worlds constructed through a combination of rich 2D drawings and animations interwoven with interactive 3D sequences. Throughout various points in these dream worlds, you can grab your mouse and guide the protagonist’s point of view through the experience. This music experience also includes a 3D model creator that allows you to create your own relics and contribute to the shared collective dream. “3 Dreams of Black” is written and directed by Chris Milk, and developed with a few folks here at Google.



In creating “3 Dreams of Black”, we’ve had the opportunity to build many tools, libraries, and models. We’ve fully opened up the source code and made it available for web developers to tinker with us at www.ro.me/tech. In addition to the code, a few other highlights include eight WebGL demos, a fun model viewer for interacting with some of the animals from the web experience, and the Three.js 3D library used for building the experience. In addition, a big part of the project was to define a good pipeline for getting all the animals and environment models right in WebGL -- for this, we extended Blender with custom plugins so we could manipulate and export the data with ease.







“3 Dreams of Black” is set to the song “Black” off the album ROME, presented by Danger Mouse & Daniele Luppi, featuring Jack White and Norah Jones on vocals, to be released soon on the record label EMI. Because it’s built in WebGL, it requires a WebGL-supported browser like Chrome, and Windows Vista / Mac OS X 10.6 and above to help ensure that your computer has the necessary and up-to-date graphics drivers. We hope you’ll take a moment to dive into the experience and the developer resources at www.ro.me

Ricardo Cabello is a designer/developer in the Google Data Arts Team. He is the creator of several popular Chrome Experiments, including Google Gravity, Ball Pool, and Harmony.

Posted by Scott Knaster, Editor