1<!DOCTYPE html> 2<html> 3<!-- 4Copyright (c) 2013 The Chromium Authors. All rights reserved. 5Use of this source code is governed by a BSD-style license that can be 6found in the LICENSE file. 7--> 8<head> 9 <meta charset="UTF-8"> 10 <title>SmoothLife</title> 11 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700"> 12 <link href="/static/styles/style.css" rel="stylesheet"> 13 <script type="text/javascript" src="example.js"></script> 14</head> 15<body class="demo"> 16 <header> 17 <h1>SmoothLife</h1> 18 </header> 19 20 <section> 21 <div class="intro"> 22 <p> 23 An example of the <a href="https://www.google.com/search?q=smoothlife" 24 target="_blank">SmoothLife</a> algorithm ported to Native Client. 25 </p> 26 <p class="note"> 27 Example courtesy <a href="https://github.com/binji" target="_blank">Ben 28 Smith</a>, based on <a 29 href="http://sourceforge.net/projects/smoothlife/" 30 target="_blank">this source</a> by ionreq. 31 </p> 32 <p class="note"> 33 Read <a href="http://arxiv.org/abs/1111.1567" target="_blank">Stephan 34 Rafler's paper</a> for more information about the algorithm, or 35 browse the <a href="https://github.com/binji/smoothnacl" 36 target="_blank">source</a>. 37 </p> 38 <p class="note"> 39 FPS: <span id="fps">0</span> 40 </p> 41 42 <div class="panel panel-info"> 43 <h2>Controls</h2> 44 45 <div class="panel-body"> 46 <table cellspacing="0" cellpadding="0"> 47 <tbody> 48 <tr> 49 <td class="name">Preset:</td> 50 <td class="value"> 51 <select id="preset"> 52 <option value="0">Subdividers</option> 53 <option value="1">Green Hex</option> 54 <option value="2">Fire Jellies</option> 55 <option value="3">Magical Maze</option> 56 <option value="4">Waterbug Gliders</option> 57 <option value="5">Stitches 'n' Jitters</option> 58 <option value="6">Blink Tubes</option> 59 <option value="7">Oil Slick</option> 60 <option value="8">Worms</option> 61 <option value="9">Dried Moss</option> 62 <option value="10">Hungry Dots</option> 63 <option value="11">Wet Glass</option> 64 <option value="12">Dissolving Chains</option> 65 </select> 66 </td> 67 </tr> 68 <tr> 69 <td class="name">Palette:</td> 70 <td class="value"> 71 <select id="palette"> 72 <option value="0">Default</option> 73 <option value="1">Black on White</option> 74 <option value="2">White on Black</option> 75 <option value="3">Purple Neon</option> 76 <option value="4">Emerald</option> 77 <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