<!DOCTYPE html>
<html>
<!--
Copyright 2013 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
<meta charset="UTF-8">
<meta http-equiv="origin-trial" content="AnnZaSfBggcmPxgNMYPXgW7tVBy3HoIkgSysHge4o7QT7U/n3Sr89HvKuJwNtPxgZ9Z/cs6TzbUy6F+glrMQngIAAABZeyJvcmlnaW4iOiJodHRwczovL2dvbmF0aXZlY2xpZW50LmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJQTmFDbCIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">
<title>SmoothLife</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
<link href="/static/css/out/site.css" rel="stylesheet">
<script type="text/javascript" src="example.js"></script>
</head>
<body class="demo">
<header>
<h1>SmoothLife</h1>
</header>
<section>
<div class="intro">
<p>
An example of the <a href="https://www.google.com/search?q=smoothlife"
target="_blank">SmoothLife</a> algorithm ported to Native Client.
</p>
<p class="note">
Example courtesy <a href="https://github.com/binji" target="_blank">Ben
Smith</a>, based on <a
href="http://sourceforge.net/projects/smoothlife/"
target="_blank">this source</a> by ionreq.
</p>
<p class="note">
Read <a href="http://arxiv.org/abs/1111.1567" target="_blank">Stephan
Rafler's paper</a> for more information about the algorithm, or
browse the <a href="https://github.com/binji/smoothnacl"
target="_blank">source</a>.
</p>
<p class="note">
FPS: <span id="fps">0</span>
</p>
<div class="panel panel-info">
<h2>Controls</h2>
<div class="panel-body">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="name">Preset:</td>
<td class="value">
<select id="preset">
<option value="0">Subdividers</option>
<option value="1">Green Hex</option>
<option value="2">Fire Jellies</option>
<option value="3">Magical Maze</option>
<option value="4">Waterbug Gliders</option>
<option value="5">Stitches 'n' Jitters</option>
<option value="6">Blink Tubes</option>
<option value="7">Oil Slick</option>
<option value="8">Worms</option>
<option value="9">Dried Moss</option>
<option value="10">Hungry Dots</option>
<option value="11">Wet Glass</option>
<option value="12">Dissolving Chains</option>
</select>
</td>
</tr>
<tr>
<td class="name">Palette:</td>
<td class="value">
<select id="palette">
<option value="0">Default</option>
<option value="1">Black on White</option>
<option value="2">White on Black</option>
<option value="3">Purple Neon</option>
<option value="4">Emerald</option>
<option value="5">Green Noise</option>
<option value="6">Royal Flame</option>
<option value="7">Ice Aura</option>
<option value="8">Rusty</option>
<option value="9">Cool Blue</option>
<option value="10">Frostbite</option>
<option value="11">Mint Flower</option>
<option value="12">Pyschedelic</option>
</select>
</td>
</tr>
<tr>
<td class="name">Brush Size:</td>
<td class="value">
<input type="range" id="brushSizeRange" min="10.0" max="50.0"
step="0.5" value="10.0">
<span id="brushSize">10.0</span>
</td>
</tr>
<tr>
<td class="name">Thread Count:</td>
<td class="value">
<select id="threadCount">
<option value="1" selected>1 Thread</option>
<option value="2">2 Threads</option>
<option value="4">4 Threads</option>
<option value="6">6 Threads</option>
<option value="8">8 Threads</option>
</select>
</td>
</tr>
<tr>
<td class="name">Simulation Size:</td>
<td>
<select id="simSize">
<option value="256" selected>256x256</option>
<option value="384">384x384</option>
<option value="512">512x512</option>
</select>
</td>
</tr>
<tr>
<td class="name">Zoom:</td>
<td class="value">
<input type="range" id="scale" min="0.5" max="5.0"
step="0.01" value="1.0">
<span id="scaleValue">100%</span>
</td>
</tr>
</tbody>
</table>
</div>
<h2>Actions</h2>
<div class="panel-body">
<button id="reset" class="one-third">Reset</button>
<button id="splat" class="one-third">Splat</button>
<button id="clear" class="one-third">Clear</button>
</div>
</div>
</div>
<div class="Demo-body">
<div id="listener" class="Demo-content"></div>
</div>
<div id="loading-cover">
<div id="message">
<div id="statusField"></div>
<div id="progress" class="progress progress-striped active">
<div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
</div>
</section>
</body>
</html>