| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| 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"> |
| <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> |
