<?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>AddyOsmani.com &#124; Where User Interface Ideas Grows &#187; audio examples</title>
	<atom:link href="http://addyosmani.com/blog/tag/audio-examples/feed/" rel="self" type="application/rss+xml" />
	<link>http://addyosmani.com/blog</link>
	<description>This is the home of Addy Osmani (Web Developer, Designer &#38; Author). Here you can find some great tips and tutorials on everything to do with web development and even a few useful code samples!</description>
	<lastBuildDate>Fri, 03 Sep 2010 21:35:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>13 Incredibly Fresh New HTML5 Canvas Demos</title>
		<link>http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/</link>
		<comments>http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/#comments</comments>
		<pubDate>Thu, 08 Oct 2009 18:06:09 +0000</pubDate>
		<dc:creator>Addy</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[3d browser]]></category>
		<category><![CDATA[3d canvas]]></category>
		<category><![CDATA[3d in browser]]></category>
		<category><![CDATA[3d javascript canvas]]></category>
		<category><![CDATA[audio examples]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[canvas 3d]]></category>
		<category><![CDATA[canvas animation]]></category>
		<category><![CDATA[canvas box]]></category>
		<category><![CDATA[canvas coverflow]]></category>
		<category><![CDATA[canvas demo]]></category>
		<category><![CDATA[canvas demos]]></category>
		<category><![CDATA[canvas examples]]></category>
		<category><![CDATA[canvas html]]></category>
		<category><![CDATA[canvas plot]]></category>
		<category><![CDATA[canvas vs flash]]></category>
		<category><![CDATA[canvas widget]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[html5 canvas]]></category>
		<category><![CDATA[html5 examples]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/</guid>
		<description><![CDATA[&#160; You all tweeted in to vote and today I&#8217;m sharing a whole new set of HTML5 Canvas demos that really show you just how far you can push the envelope on the &#60;canvas&#62; element. One of my favourite things to look at at the moment is 3D so you&#8217;ll get to play around with [...]]]></description>
			<content:encoded><![CDATA[<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image.png"><img title="image" style="border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; border-left: 0px; margin-right: auto; border-bottom: 0px" height="301" alt="image" width="452" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb.png" /></a>&nbsp;</p>
<p>You all <a href="http://www.twitter.com/addyosmani">tweeted</a> in to vote and today I&rsquo;m sharing a whole new set of <a href="http://addyosmani.com/blog/why-html5-is-a-game-changer-and-what-it-means-for-you/">HTML5</a> Canvas demos that really show you just how far you can push the envelope on the <a href="http://en.wikipedia.org/wiki/Canvas_(HTML_element)">&lt;canvas&gt;</a> element. One of my favourite things to look at at the moment is 3D so you&rsquo;ll get to play around with excellent interactive examples like the <em>3D Google Images Gift Box</em> and or my 3D site <em>Perspectives </em>demo but you&rsquo;ll also see just how useful the canvas can be for modelling real-world objects.</p>
<p>&nbsp;</p>
<p>We&rsquo;ve got a great new post ahead of us.</p>
<p><span id="more-152"></span></p>
<p>&nbsp;</p>
<p>It&rsquo;s amazing just how many applications the Canvas has opened up and I really didn&rsquo;t expect to see powerful <em>Face Detectors</em> or Matlab-level <em>graphing </em>so soon in 2009 (but guess what guys..this post includes working examples for both!). The Canvas element has allowed developers to take on some of the visually inspiring things we&rsquo;ve previously only been able to do with Flash and finally do it in a way that doesn&rsquo;t require a third-party plugin &#8211; it&rsquo;s no surprise that us geeks are really interested in seeing what it&rsquo;s capable of.</p>
<p>&nbsp;</p>
<p>Many of these demos have either not been released before (or haven&rsquo;t been heavily publicised) so I really do hope this fresh set of examples give everyone a little inspiration for their own Canvas experiments. To give you a little perspective, the Canvas is so powerful that it only took me about a week to create an almost perfect clone of the Apple iTunes <a href="http://addyosmani.com/blog/open-source-javascript-coverflow/">CoverFlow</a> effect with the canvas element.&nbsp; With 3D, Vector graphics and more coming to a Browser near you soon, it&rsquo;s never been a better time to learn more about what you can achieve with it.</p>
<p>&nbsp;</p>
<p>So, without further adieu I give you today&rsquo;s list of incredibly fresh Canvas demos:</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://www.addyosmani.com/resources/googlebox">Interactive Google Images &ldquo;Gift&rdquo; Box</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image1.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="197" alt="image" width="478" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb1.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html">Canvas Cartoon Animation that&rsquo;s as good as Flash</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image2.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="199" alt="image" width="473" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb2.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://9elements.com/io/projects/html5/canvas/">Canvas + Audio Burst Animation</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image3.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="203" alt="image" width="483" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb3.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://webdev.stephband.info/parallax_demos.html">Canvas Parallax</a>&nbsp;</p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image4.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="227" alt="image" width="485" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb4.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://addyosmani.com/resources/perspective/">Interactive 3D Canvas Perspective of any site you enter </a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image5.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="203" alt="image" width="488" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb5.png" /></a>&nbsp;</p>
<p><a href="http://www.addyosmani.com/resources/canvasphoto">Interactive Polaroids</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image6.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="201" alt="image" width="518" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb6.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://blog.kpicturebooth.com/static/fdet/index.html">JavaScript Fast Face Detector</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image7.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="219" alt="image" width="523" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb7.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/">3D Model Viewer using the Canvas Element</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image8.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="211" alt="image" width="506" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb8.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://www.lo2k.net/v7/lab/flickr/login">The Flickr Canvas SlideShow</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image9.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="215" alt="image" width="507" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb9.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html">Canvas + SoundManager Audio Player with Waveform effects</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image10.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="209" alt="image" width="507" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb10.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://deanm.github.com/pre3d/monster.html">The Evolving Monster Animation</a>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image11.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="210" alt="image" width="510" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb11.png" /></a>&nbsp;</p>
<p>&nbsp;&nbsp; <a href="http://sebleedelisle.com/demos/html5landscape.html">A 3D Landscape generated using the Canvas Element</a></p>
<p>&nbsp;<a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image12.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="210" alt="image" width="505" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb12.png" /></a></p>
<p>&nbsp;</p>
<p><a href="http://skuld.bmsc.washington.edu/~merritt/gnuplot/canvas_demos/surface1.html">Matlab-style plotting using the Canvas and GNUPlot</a></p>
<p>&nbsp;</p>
<p><a class="thickbox" href="http://addyosmani.com/blog/wp-content/uploads/2009/10/image13.png"><img title="image" style="border-top-width: 0px; display: block; border-left-width: 0px; float: none; border-bottom-width: 0px; margin-left: auto; margin-right: auto; border-right-width: 0px" height="210" alt="image" width="504" border="0" src="http://addyosmani.com/blog/wp-content/uploads/2009/10/image_thumb13.png" /></a>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://addyosmani.com/blog/13-incredibly-fresh-new-canvas-demos/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>
