Skip to our site navigation Skip to the content

Responsive Web Design


Episode 148: Dance Tonite

What the heck is web VR? Jonathan Puckey tells us about the tools and processes used to create an interactive experience, Dance Tonite, in collaboration with LCD Soundsystem.

Web VR is VR that works in your browser. So, as a content creator, you’re able to make interactive experiences where people who have a VR device are able to use your interactive experience through the browser.

If you’d like, you can download this episode’s audio file. Additionally, you can follow us on iTunes, on Google Play Music, or subscribe to our RSS feed.

Buy The Books

Everything you need to go responsive, in four short books. Save 15% on all four!

Subscribe Now

The podcast may have ended in 2018, but you can still subscribe! If you want the latest episodes, fire up your favorite podcasting app and subscribe via RSS, Google Play Music, or on iTunes.



This Week’s Guest

Jonathan Puckey

Graphic Designer and Developer

Jonathan Puckey is an Amsterdam based graphic designer and developer. Describing the computer as a tool for making tools, he disregards the predetermined limitations of existing design software. Instead, he develops custom tools, that he uses to realise his projects.

In 2012 he founded the design studio Moniker together with Luna Maurer and Roel Wouters. With Moniker, which means nickname or pseudonym, they explored the influence of technology on daily life. Often the public is asked to take part in the development of projects, which are set into motion through the actions of others, and trigger a sense of play.

After leaving Moniker in 2017, he founded interactive design studio Studio Puckey. With a renewed focus on the Web, Studio Puckey works on assignments and self initiated projects. In 2016 he released Radio Garden, a website where over 15 thousand live radio stations can be browsed through a 3D globe interface. In 2017 he directed Dance Tonite together with Roel Wouters and Google DAT, an interactive VR music video for LCD Soundsystem.

Jonathan Puckey is the author of Paper.js, together with Jürg Lehni. Paper.js is an open-source vector graphics programming framework that runs on top of open-web standards such as Canvas 2D and SVG.

Jonathan Puckey teaches Interaction Design at the Gerrit Rietveld Academy and was appointed Graphic Design critic at Yale University School of Art.


Episode Transcript

Karen:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Karen McGrane.

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, I am thrilled, this is something new and exciting for us. We are here this week talking to Jonathan Puckey, who’s going to tell us about Dance Tonite. Jonathan, welcome!

Jonathan:

Thank you. Hi.

Karen:

So, I invited you on the show because I think you’re going to talk about something that is very interesting to both Ethan and I, that we’re not all that familiar with, which is web VR. So, my limited understanding of the VR space suggests that, much like everything else, there are native platforms and then there’s also web-based delivery, and that web-based delivery offers the benefit known as responsive web design, the ability to have things delivered across a range of different devices and screen sizes.

So, you’ve got a really interesting and innovative VR collaboration called Dance Tonite. So maybe with that intro you might introduce yourself, give us a little bit about your background, and then just give us a little bit of information about what Dance Tonite is.

Jonathan:

Sure. So, my name is Jonathan Puckey. I’m basically an interactive director/designer/developer based in Amsterdam. We did this project in collaboration with people from Moniker, who I’d been working with over the years. Like our client base is mainly in the cultural world and in the art world, we’re often called artists, although we’re happy to consider ourselves as designers, and we were approached by the Google Data Arts Team, which is a small team at Google who do, let’s say, creative collaborations with artists and designers outside of Google. They came to us, basically asking us if we would like to do some creative explorations with this new web VR standard.

We were really enthusiastic to do this, because we actually didn’t know anything about VR, and also the 3D aspect of VR. In our work, we’ve kind of shied away from 3D for a long time, so we thought, well, what a nice chance to delve into these technologies and see what was possible. They basically gave us a period of time to work on prototypes using the technology. It’s interesting, we really wanted to look at what is the difference between VR and web VR, like what is web VR actually adding, and when you make a project using VR, what are the things that you want to touch upon? Basically web VR is VR that works in your browser. So, as a content creator, you’re able to make interactive experiences where people who have a VR device are able to use your interactive experience through the browser.

Karen:

Could you maybe give our listeners a little bit more context about maybe the VR space in general, and why web VR or responsive web VR is interesting to developers or creators or designers or artists like you?

Jonathan:

Sure. I think the VR space, to us, like when we started looking into, right now it’s like one big question mark. I think there are some interesting technologies, but right now is when all the things are being discovered, like what can we actually use this technology for. I think in the game space are the most interesting experiences right now. So, like a bunch of really fun and interactive experiences are going on. Outside of that, things are not completely clear yet. Also, with web VR, our project is one of the first to use this technology, so we felt ourselves entering new territory and trying out new things—without much standards to sort of rely upon. When you do a project using web VR, I think, to us, one of the most important things that we wanted to hit upon was the power of the web. So, not just creating a VR experience that is only accessible through a browser and that’s it, but actually using the power of the web. So, having something that people can use on all kinds of different devices and have access to it. And also maybe create something where people are actually able to add something to the experience. So, it’s not something that they’re purely consuming, but it’s maybe also something that they are creatively involved in.

Ethan:

Jonathan, that’s fantastic. I wonder if you might take a moment to just give a little bit more background on Dance Tonite specifically, for our listeners. For folks that are hearing about this for the first time, what is the experience for? What can they actually do when they actually visit it?

Jonathan:

Sure. So, Dance Tonite is kind of like a VR music video. We actually call it a collaboration between this band, LCD Soundsystem, a New York band that mixes rock music and dance music, and their fans. When you come on to the website, the music starts playing and you’re moving through basically a series of rooms, and in every room there’s a performance going on. So, you’re seeing people dancing, and they’re not really people—these people are kind of expressed through two very basic shapes, like a cone shape and a cylindrical shape. You kind of go from room to room and see all these different dances going, performances. Depending on the device that you’re using, you’re also actually able to add your own performance to the music video. So, this project is changing every day. Whenever someone adds a new performance, if we really like it, we’ll add it in spots in the project so people can send it out to their friends, and it changes over time.

Ethan:

It’s pretty awesome, having checked it out. One of the things that struck me when I first visited the project, I don’t own any VR-enabled devices, and I was kind of surprised—when I’ve actually looked at other web VR experiments, they don’t really tend to work especially well, and I noticed that there was an effort at least made to make it accessible to non-VR users. Was that intentional? And if so, what was that process like?

Jonathan:

Yeah, I think actually the very first conversation we had about the project, we basically set ourselves the challenge to create something that, as a project, is consumable not only in VR but is also going to be as interesting on mobile and on desktop, but using its own strength. So on Dance Tonite, we kind of have a bunch of different levels of experience. If you have a room-scale VR device, which is the HTC Vive or the Oculus Rift, that’s basically the VR device where you’re hanging a bunch of sensors in your room and that can actually track your position inside a space, then you’re actually able to contribute a dance.

Then there are other VR devices—for example, you could call it the Cardboard standard, or the new Google Daydream, or the Samsung device, where you’re basically strapping a mobile phone to your face and you’re able to be inside VR and look around, and there it’s only actually tracking the rotation of your head. So, that’s something that we wanted to create an experience for. And then also just seeing how we can make a version of the experience for desktop and mobile where you’re actually able to—maybe we didn’t really want to mimic VR, so we didn’t want to make a fake VR on desktop, we wanted to bring that 3D experience and basically allow it to be consumed in a different way.

Karen:

One of the things that Ethan and I run into talking with organizations about responsive web design is that there’s often maybe some resistance to the idea that you can create an experience that will work well from the smallest size up through the largest sizes of screens. I think there’s also, particularly over the last five years, been maybe an assumption made by the web industry or the digital industry that native app experiences were going to take over the web and offered benefits that the web could never offer. Do you run into similar conversations like that in the VR space, and is there a sense that you still have to demonstrate why web VR or responsive solutions will work?

Jonathan:

To be honest, I see this narrative of native apps kind of taking over—I see that changing, and I see it becoming less. I think the web is improving so much that actually we’re able to create very much close to native experiences. I actually see it the other way around, where I’m seeing way more apps actually being developed using web standards, and actually basically a lot of apps being wrapped web experiences instead of being native experiences. So, the web is such a rich ecosystem, not only a place to create content, but it’s such a great tool set to create things with. So, I think in the VR space, web VR is going to be hugely important, especially for all the experiences that are bringing people together, all the sort of collaborative experiences and social experiences—it’s going to be really big.

Ethan:

Jonathan, I’d love to know a little bit, just as a designer, what does your toolkit look like these days? What kinds of applications and tools do you use to create a web VR-friendly experience?

Jonathan:

It’s quite a diverse stack. Basically most of it is open source technology. The design of this actually happened using some very basic 3D tools, and then just prototyping directly in code. So, we’re using 3GS, which is basically an open source 3D package for our prototypes. And then, yea, developing as we go—like our very first prototype for this project, we just had this question of instead of consuming things with VR, can we actually use VR as a motion capture device. So, can we record the positions and rotations of these points in space and actually play it back? Can we record someone moving and then actually, after that, watch someone move around? So then very quickly, using 3GS, I think in thirty minutes we had a working prototype of this and we were able to prove to ourselves that this is a really exciting thing to watch, and we kind of went from there. It’s a whole bag of little tools that sort of come together. And of course, the Chrome developer tools are an amazing addition to the tool chain of the web developer.

Karen:

You mentioned at the start that Dance Tonite is not the only thing you’ve ever worked on and that you’ve got some other projects, like Radio Garden, that might be interesting to our listeners. Tell us a little bit more about that.

Jonathan:

My mind went to Radio Garden quite quickly when thinking about responsive web design. Radio Garden is basically this website which is a 3D globe of the world. As you visit the website, thousands of dots are put onto the globe and you’re able to tune into over 20,000 radio stations across the world. I built this experience basically aiming for desktop users, and then in the very last week I kind of did the standard mobile optimization to get it working there, too. But funnily enough, after launching this project, more than eighty-eight percent of our users are using mobile phones, so that really opened my eyes to, okay, the web is really changing, and the way that I experience the web, basically being this designer/developer using this laptop with this nice big display—I’m not the main audience anymore. The audience has changed, and I really need to change the way I’m thinking about these kinds of projects. That kind of really fed into our work on Dance Tonite, that we wanted to kind of optimize or design these different experiences to be specifically for different devices, and then have everything in between work nicely, too.

Ethan:

Well Jonathan, I have to say, this has been a really fascinating chat, and I can’t thank you enough for coming on the show. But before we let you go, I would love to know if you happen to have any advice for me, for any of our listeners, anybody who’s maybe thinking about getting into VR—do you have any words of wisdom that you’d like to share with them?

Jonathan:

I think my biggest advice would be to keep it simple and not get dragged into this idea of VR that it has to sort of replicate the real world, that you have to create this Hollywood production. I think we need to look at VR as a new medium, and not necessarily sort of an extension to 3D gaming, for example. VR is really exciting, and I think it also can be boring in a good way. It really works; it’s really amazing to be able to visit a website and have your movements linked directly to what you’re seeing and have a sort of tactility with the things that you’re viewing. So yeah, don’t join these existing narratives of what you should do, but step back and consider this thing as a new medium, and try something else.

Karen:

Well Jonathan, I really want to thank you for taking the time to talk with us today. I’m so interested in this space, and I think it’s something that our listeners probably are interested in too, and I think you’ve just given us a fantastic overview. So, thank you.

Jonathan:

Alright, thank you, guys.

Ethan:

Thanks to everyone for listening to this episode of a responsive web design podcast.

If your company wants to go responsive but you need help getting started, we offer a two-day onsite workshop to help you make it happen. We also offer these workshops to the public, so please go to responsivewebdesign.com and see when we’ll be in a city near you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every podcast episode at responsivewebdesign.com.

Thanks for listening, and we’ll be back next week.


Skip to our site navigation; skip to main content