<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    >

<channel>
    <title>Webmonkey &#187; Arcade Fire</title>
    <atom:link href="http://www.webmonkey.com/tag/arcade-fire/feed/" rel="self" type="application/rss+xml" />
    <link>http://www.webmonkey.com</link>
    <description>The Web Developer&#039;s Resource</description>
    <lastBuildDate>Fri, 05 Apr 2013 20:20:46 +0000</lastBuildDate>
    <language>en-US</language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <generator>http://wordpress.org/?v=3.4.2</generator>
    
    <item>
        <title>Behind the Scenes: Coding &#8216;The Wilderness Downtown&#8217;</title>
        <link>http://www.webmonkey.com/2010/09/behind-the-scenes-coding-the-wilderness-downtown/</link>
        <comments>http://www.webmonkey.com/2010/09/behind-the-scenes-coding-the-wilderness-downtown/#comments</comments>
        <pubDate>Fri, 17 Sep 2010 15:31:14 +0000</pubDate>

                <dc:creator>Scott Gilbertson</dc:creator>

        <guid isPermaLink="false">http://www.webmonkey.com/?p=48746</guid>
        		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Arcade Fire]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Mr.doob]]></category>
        <description><![CDATA[Google&#8217;s recent collaboration with Arcade Fire, dubbed The Wilderness Downtown, yielded an in-depth interactive experience for the band&#8217;s single &#8220;We Used To Wait&#8221; that just might point to the future of the music videos. The experiment relied heavily on HTML5 and quite a bit of clever JavaScript to pull off one of the better interactive [...]]]></description>

            <content:encoded><![CDATA[<p><!-- wpautop enabled -->
<p><img src="http://www.wired.com/images_blogs/epicenter/2010/08/5use.jpg" alt="The Wilderness Downtown" />Google&#8217;s recent <a href="http://www.webmonkey.com/2010/08/youtube-and-arcade-fire-get-all-html5y/">collaboration with Arcade Fire</a>, dubbed <em>The Wilderness Downtown</em>, yielded an in-depth interactive experience for the band&#8217;s single &#8220;We Used To Wait&#8221; that just might point to the future of the music videos. The experiment relied heavily on HTML5 and quite a bit of clever JavaScript to pull off one of the better interactive multimedia sites we&#8217;ve seen.</p>
<p>While the credits for the video list over a hundred names, many of the project&#8217;s interactive elements with were coded by Ricardo Cabello, better know as <a href="http://mrdoob.com/blog">Mr.doob</a>. Cabello, perhaps best known for his Flash-based experiments, has also been churning out HTML5/JavaScript projects for some time (see <a href="http://www.webmonkey.com/2010/07/chrome-shows-off-some-fancy-html5-tricks/">our coverage of earlier Chrome experiments</a>), but the size and scope of the Arcade Fire project set it apart.</p>
<p><em><a href="http://www.chromeexperiments.com/arcadefire/">The Wilderness Downtown</a></em>, features HTML5 native video and audio, Canvas-animated birds that fly away from your mouse clicks, interactive SVG fonts, and photo panoramas from Google Maps Street View. You enter in the address of where you grew up and it pulls the images for that neighborhood to personalize the video to match your own memories.</p>
<p>If you&#8217;re curious how <em>The Wilderness Downtown</em> works, Cabello has posted a <a href="http://mrdoob.com/blog/post/705">behind the scenes look at his part</a> of the Arcade Fire collaboration. </p>
<p>Cabello is no fan of JavaScript frameworks, so you probably won&#8217;t find these libraries popping up as JQuery plugins, but most of the code is available as standalone libraries hosted through GitHub. While neither offer any documentation, both <a href="http://github.com/mrdoob/three.js/">three.js</a>, a lightweight 3D engine and <a href="http://github.com/mrdoob/harmony">Harmony</a>, a drawing library, were both use extensively.</p>
<p><em>The Wilderness Downtown</em> was clearly a very large project and included numerous programmers, but if you&#8217;re looking to pull off something similar, or just want to play around with some of the tools used to create it, Cabello&#8217;s post provides enough of an overview to get you started.</p>
<p><strong>See Also:</strong><br/></p>
<ul>
<li><a href="http://www.webmonkey.com/2010/08/youtube-and-arcade-fire-get-all-html5y/">Google and Arcade Fire Get All HTML5y</a></li>
<li><a href="http://www.wired.com/epicenter/2010/08/google-and-arcade-fire-team-for-html5-experience/all/1">Epicenter: Google and Arcade Fire Team for HTML5 ‘Experience’</a></li>
<li><a href="http://www.webmonkey.com/2010/08/flashy-html5-experiments-point-to-webs-future/">Flashy HTML5 Experiments Point to Web’s Future</a></li>
<li><a href="http://www.webmonkey.com/2010/07/chrome-shows-off-some-fancy-html5-tricks/">Chrome Shows Off Some Fancy HTML5 Tricks</a></li>
</ul>
<div id='linker_widget' class='contextly-widget'></div>]]></content:encoded>
            <wfw:commentRss>http://www.webmonkey.com/2010/09/behind-the-scenes-coding-the-wilderness-downtown/feed/</wfw:commentRss>
        <slash:comments>1</slash:comments>

        
    </item>
    </channel>
</rss>