index.html revision f2477e01787aa58f445919b809d89e252beef54f
17c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet<!DOCTYPE html> 27c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet<html> 37c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet<!-- 47c9978567a202d6aa98beac5da5e1b3b34792862Jerome PoichetCopyright (c) 2013 The Chromium Authors. All rights reserved. 57c9978567a202d6aa98beac5da5e1b3b34792862Jerome PoichetUse of this source code is governed by a BSD-style license that can be 67c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichetfound in the LICENSE file. 77c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet--> 87c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet<head> 97c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <meta charset="UTF-8"> 107c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <title>SmoothLife</title> 117c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700"> 127c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <link href="/static/styles/style.css" rel="stylesheet"> 137c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <script type="text/javascript" src="example.js"></script> 147c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet</head> 157c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet<body class="demo"> 167c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <header> 177c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <h1>SmoothLife</h1> 187c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </header> 197c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet 207c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <section> 217c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <div class="intro"> 227c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <p> 237c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet An example of the <a href="https://www.google.com/search?q=smoothlife" 247c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet target="_blank">SmoothLife</a> algorithm ported to Native Client. 257c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </p> 267c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <p class="note"> 277c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet Example courtesy <a href="https://github.com/binji" target="_blank">Ben 287c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet Smith</a>, based on <a 297c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet href="http://sourceforge.net/projects/smoothlife/" 307c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet target="_blank">this source</a> by ionreq. 317c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </p> 327c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <p class="note"> 337c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet Read <a href="http://arxiv.org/abs/1111.1567" target="_blank">Stephan 347c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet Rafler's paper</a> for more information about the algorithm, or 357c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet browse the <a href="https://github.com/binji/smoothnacl" 367c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet target="_blank">source</a>. 377c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </p> 387c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <p class="note"> 397c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet FPS: <span id="fps">0</span> 407c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </p> 417c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet 427c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <div class="panel panel-info"> 437c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <h2>Controls</h2> 447c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet 457c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <div class="panel-body"> 467c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <table cellspacing="0" cellpadding="0"> 477c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <tbody> 487c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <tr> 497c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <td class="name">Preset:</td> 507c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <td class="value"> 517c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <select id="preset"> 527c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="0">Subdividers</option> 537c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="1">Green Hex</option> 547c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="2">Fire Jellies</option> 557c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="3">Magical Maze</option> 567c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="4">Waterbug Gliders</option> 577c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="5">Stitches 'n' Jitters</option> 587c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="6">Blink Tubes</option> 597c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="7">Oil Slick</option> 607c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="8">Worms</option> 617c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="9">Dried Moss</option> 627c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="10">Hungry Dots</option> 637c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="11">Wet Glass</option> 647c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="12">Dissolving Chains</option> 657c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </select> 667c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </td> 677c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet </tr> 687c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <tr> 697c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <td class="name">Palette:</td> 707c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <td class="value"> 717c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <select id="palette"> 727c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="0">Default</option> 737c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="1">Black on White</option> 747c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="2">White on Black</option> 757c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="3">Purple Neon</option> 767c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="4">Emerald</option> 777c9978567a202d6aa98beac5da5e1b3b34792862Jerome Poichet <option value="5">Green Noise</option> 78 <option value="6">Royal Flame</option> 79 <option value="7">Ice Aura</option> 80 <option value="8">Rusty</option> 81 <option value="9">Cool Blue</option> 82 <option value="10">Frostbite</option> 83 <option value="11">Mint Flower</option> 84 <option value="12">Pyschedelic</option> 85 </select> 86 </td> 87 </tr> 88 <tr> 89 <td class="name">Brush Size:</td> 90 <td class="value"> 91 <input type="range" id="brushSizeRange" min="10.0" max="50.0" 92 step="0.5" value="10.0"> 93 <span id="brushSize">10.0</span> 94 </td> 95 </tr> 96 <tr> 97 <td class="name">Thread Count:</td> 98 <td class="value"> 99 <select id="threadCount"> 100 <option value="1" selected>1 Thread</option> 101 <option value="2">2 Threads</option> 102 <option value="4">4 Threads</option> 103 <option value="6">6 Threads</option> 104 <option value="8">8 Threads</option> 105 </select> 106 </td> 107 </tr> 108 <tr> 109 <td class="name">Simulation Size:</td> 110 <td> 111 <select id="simSize"> 112 <option value="256" selected>256x256</option> 113 <option value="384">384x384</option> 114 <option value="512">512x512</option> 115 </select> 116 </td> 117 </tr> 118 <tr> 119 <td class="name">Zoom:</td> 120 <td class="value"> 121 <input type="range" id="scale" min="0.5" max="5.0" 122 step="0.01" value="1.0"> 123 <span id="scaleValue">100%</span> 124 </td> 125 </tr> 126 </tbody> 127 </table> 128 </div> 129 130 <h2>Actions</h2> 131 <div class="panel-body"> 132 <button id="reset" class="one-third">Reset</button> 133 <button id="splat" class="one-third">Splat</button> 134 <button id="clear" class="one-third">Clear</button> 135 </div> 136 </div> 137 138 </div> 139 140 <div class="Demo-body"> 141 <div id="listener" class="Demo-content"></div> 142 </div> 143 144 <div id="loading-cover"> 145 <div id="message"> 146 <div id="statusField"></div> 147 <div id="progress" class="progress progress-striped active"> 148 <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 149 </div> 150 </div> 151 </div> 152 </div> 153 154 </section> 155</body> 156</html> 157