native_client_sdk/src/gonacl_appengine/static/smoothlife/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <!--
   4 Copyright (c) 2013 The Chromium Authors. All rights reserved.
   5 Use of this source code is governed by a BSD-style license that can be
   6 found 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/css/out/site.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>