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