CINXE.COM

<!DOCTYPE html>     <html lang="en-US">   <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <head> <script type="text/javascript" src="http://use.typekit.com/kda3eaz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0;"> <title>CreativeJS | The very best of creative JavaScript and HTML5</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="wp-content/themes/cjs%20v2/style.css" /> <link rel="pingback" href="xmlrpc.php" />  <script> //DON'T MOVE THIS LINE! var creativeJSImageFolder = "http://creativejs.com/wp-content/themes/cjs%20v2/images/" </script> <script src="wp-content/themes/cjs%20v2/js/Three.js"></script> <script src="wp-content/themes/cjs%20v2/js/Detector.js"></script> <script src="wp-content/themes/cjs%20v2/js/CreativeJS.js"></script> <script src="wp-content/themes/cjs%20v2/js/CountDownCube.js"></script> <link rel="alternate" type="application/rss+xml" title="CreativeJS » Feed" href="feed/index.html" /> <link rel="alternate" type="application/rss+xml" title="CreativeJS » Comments Feed" href="comments/feed/index.html" /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/creativejs.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.4.1"}}; !function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d");return e&&e.fillText?(e.textBaseline="top",e.font="600 32px Arial","flag"===a?(e.fillText(String.fromCharCode(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3):"diversity"===a?(e.fillText(String.fromCharCode(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(String.fromCharCode(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString()):("simple"===a?e.fillText(String.fromCharCode(55357,56835),0,0):e.fillText(String.fromCharCode(55356,57135),0,0),0!==e.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8"),diversity:d("diversity")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8&&c.supports.diversity||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='yarppWidgetCss-group-css' href='wp-content/plugins/bwp-minify/min/index36b9.html?f=wp-content/plugins/yet-another-related-posts-plugin/style/widget.css,wp-content/themes/cjs%20v2/wp-syntax.css,wp-content/plugins/jetpack/css/jetpack.css' type='text/css' media='all' /> <link rel='https://api.w.org/' href='wp-json/index.html' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="xmlrpc0db0.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="wp-includes/wlwmanifest.xml" /> <link rel='shortlink' href='http://wp.me/2e1SX' /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-809606-10']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <style type='text/css'>img#wpstats{display:none}</style>  <meta property="og:type" content="website" /> <meta property="og:title" content="CreativeJS" /> <meta property="og:description" content="The very best of creative JavaScript and HTML5" /> <meta property="og:url" content="http://creativejs.com/" /> <meta property="og:site_name" content="CreativeJS" /> <meta property="og:image" content="https://s0.wp.com/i/blank.jpg" /> <meta property="og:locale" content="en_US" /> <style id="custom-css-css">.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}</style> </head> <body class="home blog two-column right-sidebar"> <header id="branding" role="banner"> <section id="image"> <img src="wp-content/uploads/2012/07/creativeJSFPO3.jpg" id="bannerimg" width="1000" height="220" alt="" /> </section> <nav class="mainnav"> <div> <a href="index.html" class="articles">Articles</a> <a href="tutorials/index.html" class="tutorials">Tutorials</a> <a href="http://sebleedelisle.com/training/" rel="external">CreativeJS Training</a> <a href="about/index.html" class="about">About CreativeJS</a> <div class="search-wrapper"> <form method="get" class="searchform" action="http://creativejs.com/"> <label for="s1452944669" class="assistive-text">Search</label> <input type="text" class="field search-input" name="s" id="s1452944669" placeholder=""> <input type="submit" class="submit searchsubmit" name="submit" value="Search" /> </form> </div> </div> </nav> </header> <div id="page" class="hfeed"> <div id="main"> <div id="primary"> <div id="content" role="main"> <nav id="nav-above"> <h3 class="assistive-text">Post navigation</h3> <div class="nav-previous"><a href="page/2/index.html" ><span class="meta-nav">←</span> Older posts</a></div> <div class="nav-next"></div> </nav> <article id="post-6216" class="post-6216 post type-post status-publish format-standard hentry category-general category-workshops"> <header class="entry-header"> <h1 class="list-title"><a href="2014/10/creativejs-workshops-back-and-updated-for-2014/index.html" title="Permalink to CreativeJS workshops back and updated." rel="bookmark">CreativeJS workshops back and updated</a></h1> <div class="entry-meta"> <span class="sep">Posted on </span><a href="2014/10/creativejs-workshops-back-and-updated-for-2014/index.html" title="6:14 pm" rel="bookmark"><time class="entry-date" datetime="2014-10-07T18:14:20+00:00" pubdate>October 7, 2014</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="author/seb/index.html" title="View all posts by Seb Lee-Delisle" rel="author">Seb Lee-Delisle</a></span></span> </div>  </header> <div class="entry-summary"> <a href="2014/10/creativejs-workshops-back-and-updated-for-2014/index.html" title="Permalink to CreativeJS workshops back and updated" rel="bookmark"></a> <p>Two CreativeJS workshops are back and updated. The first, CreativeJS for Designers is aimed at creative people who have never done any JavaScript programming. I learned to code by drawing pictures and animating stuff, and it’s seriously fun – the … <a href="2014/10/creativejs-workshops-back-and-updated-for-2014/index.html">Continue reading <span class="meta-nav">→</span></a></p> </div> <footer class="entry-meta"> <span class="cat-links"> <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="category/general/index.html" rel="category tag">General</a>, <a href="category/workshops/index.html" rel="category tag">Workshops</a> </span> </footer> </article> <article id="post-6203" class="post-6203 post type-post status-publish format-standard has-post-thumbnail hentry category-webgl tag-c64 tag-shader tag-webgl"> <header class="entry-header"> <h1 class="list-title"><a href="2014/06/c64-shader-post-processing-effects/index.html" title="Permalink to C64 Shader Post Processing Effects" rel="bookmark">C64 Shader Post Processing Effects</a></h1> <div class="entry-meta"> <span class="sep">Posted on </span><a href="2014/06/c64-shader-post-processing-effects/index.html" title="2:58 pm" rel="bookmark"><time class="entry-date" datetime="2014-06-03T14:58:49+00:00" pubdate>June 3, 2014</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="author/rich/index.html" title="View all posts by Richard Davey" rel="author">Richard Davey</a></span></span> </div>  </header> <div class="entry-summary"> <a href="2014/06/c64-shader-post-processing-effects/index.html" title="Permalink to C64 Shader Post Processing Effects" rel="bookmark"><img width="660" height="240" src="wp-content/uploads/2014/06/c64shader.png" class="attachment-full size-full wp-post-image" alt="c64shader" /></a> <p>@oosmoxiecode has released this lovely C64 styled post-processing WebGL shader. Seen running on-top of a trailer for the forthcoming聽Cyberpunk 2077 game. You can open the control panel and tweak the effects to alter the dithering. View source to see how … <a href="2014/06/c64-shader-post-processing-effects/index.html">Continue reading <span class="meta-nav">→</span></a></p> </div> <footer class="entry-meta"> <span class="cat-links"> <span class="entry-utility-prep entry-utility-prep-cat-links">Posted in</span> <a href="category/webgl/index.html" rel="category tag">WebGL</a> </span> <span class="sep"> | </span> <span class="tag-links"> <span class="entry-utility-prep entry-utility-prep-tag-links">Tagged</span> <a href="tag/c64/index.html" rel="tag">C64</a>, <a href="tag/shader/index.html" rel="tag">shader</a>, <a href="tag/webgl/index.html" rel="tag">WebGL</a> </span> </footer> </article> <article id="post-6193" class="post-6193 post type-post status-publish format-link has-post-thumbnail hentry category-general post_format-post-format-link"> <header class="entry-header"> <hgroup> <h1 class="list-title"> <a href="2014/03/one-human-heartbeat/index.html" title="Permalink to One Human Heartbeat" rel="bookmark"> Link: One Human Heartbeat</a></h1>  </hgroup> </header> <div class="entry-summary">  <a href="2014/03/one-human-heartbeat/index.html" title="Permalink to One Human Heartbeat" rel="bookmark"> <img width="600" height="200" src="wp-content/uploads/2014/03/one-human-heartbeat.png" class="attachment-full size-full wp-post-image" alt="one-human-heartbeat" /></a> <p>Data scientist Jen Lowe literally put her heartbeat up on the Internet. One Human Heartbeat is a site that pulses as her heart beats – or at least on a 24 hour delay. Statistics in the bottom left of the … <a href="2014/03/one-human-heartbeat/index.html">Continue reading <span class="meta-nav">→</span></a></p>  </div> <footer class="entry-meta"> <span class="sep">Posted on </span><a href="2014/03/one-human-heartbeat/index.html" title="10:00 am" rel="bookmark"><time class="entry-date" datetime="2014-03-27T10:00:21+00:00" pubdate>March 27, 2014</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="author/jamie/index.html" title="View all posts by Jamie Kosoy" rel="author">Jamie Kosoy</a></span></span> </footer> </article> <article id="post-6187" class="post-6187 post type-post status-publish format-link has-post-thumbnail hentry category-general post_format-post-format-link"> <header class="entry-header"> <hgroup> <h1 class="list-title"> <a href="2014/03/urban-jungle-street-view/index.html" title="Permalink to Urban Jungle Street View" rel="bookmark"> Link: Urban Jungle Street View</a></h1>  </hgroup> </header> <div class="entry-summary">  <a href="2014/03/urban-jungle-street-view/index.html" title="Permalink to Urban Jungle Street View" rel="bookmark"> <img width="600" height="200" src="wp-content/uploads/2014/03/ujsv.png" class="attachment-full size-full wp-post-image" alt="ujsv" /></a> <p>Einar 脰berg, Technical Director at North Kingdom聽put together a lovely experiment that generatively adds trees, ferns and other jungle-like matter to Google Street View. What’s particularly nice about it is that the effect has appropriate depth – vegetation scales back … <a href="2014/03/urban-jungle-street-view/index.html">Continue reading <span class="meta-nav">→</span></a></p>  </div> <footer class="entry-meta"> <span class="sep">Posted on </span><a href="2014/03/urban-jungle-street-view/index.html" title="10:00 am" rel="bookmark"><time class="entry-date" datetime="2014-03-24T10:00:56+00:00" pubdate>March 24, 2014</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="author/jamie/index.html" title="View all posts by Jamie Kosoy" rel="author">Jamie Kosoy</a></span></span> </footer> </article> <article id="post-6182" class="post-6182 post type-post status-publish format-link has-post-thumbnail hentry category-audio category-webgl post_format-post-format-link"> <header class="entry-header"> <hgroup> <h1 class="list-title"> <a href="2014/03/sound-viz/index.html" title="Permalink to Sound Viz" rel="bookmark"> Link: Sound Viz</a></h1>  </hgroup> </header> <div class="entry-summary">  <a href="2014/03/sound-viz/index.html" title="Permalink to Sound Viz" rel="bookmark"> <img width="600" height="200" src="wp-content/uploads/2014/03/bartek.png" class="attachment-full size-full wp-post-image" alt="bartek" /></a> <p>Creative coder extraordinaire Bartek Drodz put together this breathtaking sound visualization using a host of modern web technologies.聽Not merely content to do a single visualization, Bartek threw in five of them… and then added in Leap Motion control to boot! … <a href="2014/03/sound-viz/index.html">Continue reading <span class="meta-nav">→</span></a></p>  </div> <footer class="entry-meta"> <span class="sep">Posted on </span><a href="2014/03/sound-viz/index.html" title="10:00 am" rel="bookmark"><time class="entry-date" datetime="2014-03-20T10:00:03+00:00" pubdate>March 20, 2014</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="author/jamie/index.html" title="View all posts by Jamie Kosoy" rel="author">Jamie Kosoy</a></span></span> </footer> </article> <nav id="nav-below"> <h3 class="assistive-text">Post navigation</h3> <div class="nav-previous"><a href="page/2/index.html" ><span class="meta-nav">←</span> Older posts</a></div> <div class="nav-next"></div> </nav> </div> </div> <div id="secondary" class="widget-area" role="complementary"> <aside class="sideButton"> <span><a href="http://twitter.com/creativejs">Follow @creativejs</a></span> </aside> <aside class="sideButton"> <span><a href="indexd784.html?feed=rss2">Subscribe (RSS)</a></span> </aside> <aside class="widget"> <h3 class="widget-title">Recent Posts</h3> <ul> <li><a href='2014/10/creativejs-workshops-back-and-updated-for-2014/index.html'>CreativeJS workshops back and updated</a></li> <li><a href='2014/06/c64-shader-post-processing-effects/index.html'>C64 Shader Post Processing Effects</a></li> <li><a href='2014/03/one-human-heartbeat/index.html'>One Human Heartbeat</a></li> <li><a href='2014/03/urban-jungle-street-view/index.html'>Urban Jungle Street View</a></li> <li><a href='2014/03/sound-viz/index.html'>Sound Viz</a></li> </ul> </aside> <aside class="widget"> <h3 class="widget-title">We write about topics like:</h3> <ul> <li class="cat-item cat-item-18"><a href="category/12-days-of-creativejs/index.html" >12 days of CreativeJS</a> </li> <li class="cat-item cat-item-11"><a href="category/audio/index.html" >Audio</a> </li> <li class="cat-item cat-item-9"><a href="category/canvas/index.html" >Canvas (2D)</a> </li> <li class="cat-item cat-item-78"><a href="category/compilers/index.html" >Compilers</a> </li> <li class="cat-item cat-item-75"><a href="category/css-2d/index.html" >CSS (2D)</a> </li> <li class="cat-item cat-item-12"><a href="category/css/index.html" >CSS (3D)</a> </li> <li class="cat-item cat-item-34"><a href="category/demoscene-2/index.html" >Demoscene</a> </li> <li class="cat-item cat-item-14"><a href="category/dom/index.html" >DOM</a> </li> <li class="cat-item cat-item-15"><a href="category/game/index.html" >Game</a> </li> <li class="cat-item cat-item-16"><a href="category/glsl/index.html" >GLSL</a> </li> <li class="cat-item cat-item-97"><a href="category/hardware/index.html" >Hardware</a> </li> <li class="cat-item cat-item-8"><a href="category/library/index.html" >JS Library</a> </li> <li class="cat-item cat-item-19"><a href="category/micro-tutorial/index.html" >Micro Tutorial</a> </li> <li class="cat-item cat-item-20"><a href="category/music/index.html" >Music</a> </li> <li class="cat-item cat-item-39"><a href="category/reviews/index.html" >Reviews</a> </li> <li class="cat-item cat-item-85"><a href="category/svg/index.html" >SVG</a> </li> <li class="cat-item cat-item-13"><a href="category/tutorials/index.html" >Tutorials</a> </li> <li class="cat-item cat-item-1"><a href="category/uncategorized/index.html" >Uncategorized</a> </li> <li class="cat-item cat-item-59"><a href="category/uploading/index.html" >Uploading</a> </li> <li class="cat-item cat-item-10"><a href="category/video/index.html" >Video</a> </li> <li class="cat-item cat-item-7"><a href="category/webgl/index.html" >WebGL</a> </li> <li class="cat-item cat-item-25"><a href="category/webrtc/index.html" >WebRTC</a> </li> <li class="cat-item cat-item-21"><a href="category/workshops/index.html" >Workshops</a> </li> </ul> </aside> </div> </div> </div> <footer id="colophon" role="contentinfo"> <section id="topbar"> <h1><a href="index.html" title="CreativeJS" rel="home">CreativeJS:</a> The very best of creative JavaScript and HTML5</h1> <div class="search-wrapper"> <form method="get" class="searchform" action="http://creativejs.com/"> <label for="s1452944669" class="assistive-text">Search</label> <input type="text" class="field search-input" name="s" id="s1452944669" placeholder=""> <input type="submit" class="submit searchsubmit" name="submit" value="Search" /> </form> </div> </section> <section class="innerfooter"> <section class="site-about"> <div> <h3>CreativeJS</h3> <p>CreativeJS.com is the go-to place to find exciting JavaScript demos, projects, games, and well, anything else that we think is awesome. We've got a whole team here to bring you the best of what's out there. <a href="about/index.html">Find out all about us.</a> </p> </div> <div> <h3>Suggest a site</h3> <p>Do have a project or site you think we should feature? Whether it's yours or just something you've seen that you love, go on and <a href="https://docs.google.com/spreadsheet/viewform?hl=en_US&formkey=dExrSFE4blRPOFFUTVh5VFozajZ2b3c6MQ#gid=0">tell us about it!</a></p> </div> </section> <section> <h3>We have some archives:</h3> <ul> <li><a href='2014/10/index.html'>October 2014</a></li> <li><a href='2014/06/index.html'>June 2014</a></li> <li><a href='2014/03/index.html'>March 2014</a></li> <li><a href='2014/02/index.html'>February 2014</a></li> <li><a href='2014/01/index.html'>January 2014</a></li> <li><a href='2013/12/index.html'>December 2013</a></li> <li><a href='2013/11/index.html'>November 2013</a></li> <li><a href='2013/10/index.html'>October 2013</a></li> <li><a href='2013/09/index.html'>September 2013</a></li> <li><a href='2013/08/index.html'>August 2013</a></li> <li><a href='2013/07/index.html'>July 2013</a></li> <li><a href='2013/06/index.html'>June 2013</a></li> <li><a href='2013/05/index.html'>May 2013</a></li> <li><a href='2013/04/index.html'>April 2013</a></li> <li><a href='2013/03/index.html'>March 2013</a></li> <li><a href='2013/02/index.html'>February 2013</a></li> <li><a href='2012/12/index.html'>December 2012</a></li> <li><a href='2012/11/index.html'>November 2012</a></li> <li><a href='2012/10/index.html'>October 2012</a></li> <li><a href='2012/09/index.html'>September 2012</a></li> <li><a href='2012/08/index.html'>August 2012</a></li> <li><a href='2012/07/index.html'>July 2012</a></li> <li><a href='2012/06/index.html'>June 2012</a></li> <li><a href='2012/05/index.html'>May 2012</a></li> <li><a href='2012/04/index.html'>April 2012</a></li> <li><a href='2012/03/index.html'>March 2012</a></li> <li><a href='2012/02/index.html'>February 2012</a></li> <li><a href='2012/01/index.html'>January 2012</a></li> <li><a href='2011/12/index.html'>December 2011</a></li> <li><a href='2011/11/index.html'>November 2011</a></li> <li><a href='2011/10/index.html'>October 2011</a></li> <li><a href='2011/09/index.html'>September 2011</a></li> <li><a href='2011/08/index.html'>August 2011</a></li> <li><a href='2011/07/index.html'>July 2011</a></li> </ul> </section> <section class="credits"> <p>CreativeJS is: <a href="http://twitter.com/seb_ly" rel="author external">@seb_ly</a>, <a href="http://twitter.com/vlh" rel="author external">@vlh</a>, <a href="http://twitter.com/neave" rel="author external">@neave</a>, <a href="http://twitter.com/nrocy" rel="author external">@nrocy</a>, <a href="http://twitter.com/photonstorm" rel="author external">@photonstorm</a>, <a href="http://twitter.com/twholman" rel="author external">@twholman</a>, <a href="http://twitter.com/thingsinjars" rel="author external">@thingsinjars</a> & <a href="http://twitter.com/restlessdesign" rel="author external">@restlessdesign</a> </p> <ul> <li><a href="indexd784.html?feed=rss2">Subscribe (RSS)</a></li> <li><a href="http://twitter.com/creativejs" rel="external">Follow @creativejs</a></li> </ul> </section> </section>  </footer> <div style="display:none"> </div> <script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201602'></script> <script type='text/javascript' src='wp-content/plugins/bwp-minify/min/index2cad.html?f=wp-includes/js/wp-embed.min.js'></script> <script type='text/javascript' src='http://stats.wp.com/e-201602.js' async defer></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:3.8.2',blog:'32896515',post:'0',tz:'0',srv:'creativejs.com'} ]); _stq.push([ 'clickTrackerInit', '32896515', '0' ]); </script>  <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> (function() { var videoproviders = ['youtube','vimeo']; jQuery('iframe').filter(function() { var parser = document.createElement('a'); parser.href = this.src; if (new RegExp(videoproviders.join("|")).test(parser.hostname)) { var $this = jQuery(this); if(!$this.parent().hasClass('video-container')) { $this.wrap('<div class="video-container"/>') } } }); }()); </script> <script type="text/javascript"> // setTimeout(function(){var a=document.createElement("script"); // var b=document.getElementsByTagName("script")[0]; // a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0021/4848.js?"+Math.floor(new Date().getTime()/3600000); // a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1); </script> </body>  </html>