1<html lang="en"> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title>Browserify</title> 6 <link rel="shortcut icon" href="favicon.ico"> 7 <link rel="stylesheet" href="style.css" type="text/css" media="screen"title="no title" charset="utf-8"> 8 </head> 9 <body class="style-a articles"> 10 <section id="top-home-section" class="top-section color-a"> 11 <h1>Browserify Demos</h1> 12 <h3 id="top-subtitle" class="large-font">All demos on this page are self-contained and used Browserify to bundle the require()'d dependencies into a single JavaScript bundle</h3> 13 <a href="index.html"> 14 <button class="top-button" id="top-button2"> 15 Home 16 </button> 17 </a> 18 <a href="articles.html"> 19 <button class="top-button" id="top-button2"> 20 Articles 21 </button> 22 </a> 23 </section> 24 <section id="middle-section" class="middle-section color-b" > 25 <div class="content"> 26 <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Canvas Splitter</h2> 27 <p>This demo by @hughsk uses two modules, one that creates <a href="https://www.npmjs.org/package/lut">RGB lookup tables</a> and <a href="https://www.npmjs.org/package/canvas-splitter">another that slices</a> the color table canvas element into smaller canvases. 28
28<script src="https://gist.github.com/maxogden/9576799.js?file=index.js"></script>
28 29 <p>Here is the above code running in an iframe</p> 30 <iframe height="315" src="https://requirebin.netlify.app/embed?gist=maxogden/9576799" frameborder="0" allowfullscreen></iframe> 31 <hr> 32 33 <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Exploding Dots</h2> 34 <p>This demo by @anvaka uses the <a href="https://www.npmjs.org/package/ngraph.generators">ngraph.generators</a> and <a href="https://www.npmjs.org/package/ngraph.vivasvg">ngraph.vivasvg</a> modules to create an animated exploding SVG dot cluster. 35
35<script src="https://gist.github.com/maxogden/9556868.js?file=index.js"></script>
35 36 <p>Here is the above code running in an iframe, click it to run the animation.</p> 37 <iframe height="315" src="https://requirebin.netlify.app/embed?gist=maxogden/9556868" frameborder="0" allowfullscreen></iframe> 38 <hr> 39 40 <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">Infinite 2D Cave Generator</h2> 41 <p>This demo by @hughsk uses 7 small modules to create an explorable 2D procedurally generated cave.</p> 42
42<script src="https://gist.github.com/maxogden/9557700.js?file=index.js"></script>
42 43 <p>Click the canvas to give it focus and then use WSAD or Arrow keys to explore.</p> 44 <iframe height="315" src="https://requirebin.netlify.app/embed?gist=maxogden/9557700" frameborder="0" allowfullscreen></iframe> 45 <hr> 46 47 <h2 class="subtitle" style="font-size: 18px; margin-bottom: 30px;">2D velocity control</h2> 48 <p>This demo by @sethvincent uses some modules from his <a href="http://crtrdg.com/">CRTRDG</a> 2D game library.</p> 49
49<script src="https://gist.github.com/maxogden/9557776.js?file=index.js"></script>
49 50 <p>Click the canvas to give it focus and then use WSAD keys to explore.</p> 51 <iframe height="315" src="https://requirebin.netlify.app/embed?gist=maxogden/9557776" frameborder="0" allowfullscreen></iframe> 52 </div> 53 </section> 54 </body> 55</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.