| <!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>Voronoi</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>Voronoi</h1> |
| |
| </header> |
| |
| <section> |
| <div class="intro"> |
| <p> |
| This demo renders the <a href="http://en.wikipedia.org/wiki/Voronoi" |
| target="_blank">Voronoi diagram</a> for a moving set of points |
| using a brute force technique. |
| </p> |
| <p class="note"> |
| Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/voronoi</tt>). |
| </p> |
| <p class="note"> |
| FPS: <span id="fps">0</span> |
| </p> |
| |
| <div class="panel panel-info"> |
| |
| <h2>Controls</h2> |
| |
| <div class="panel-body"> |
| <table id="config" cellspacing="0" cellpadding="0"> |
| <tbody> |
| <tr> |
| <td class="name">Points:</td> |
| <td class="value"> |
| <input type="range" id="pointRange" min="1" max="1024" step="1" value="48"> |
| <label id="pointCount">48 points</label> |
| </td> |
| </tr> |
| <tr> |
| <td class="name">Thread Count:</td> |
| <td class="value"> |
| <select id="threadCount"> |
| <option value="0">Main Thread only</option> |
| <option value="1">1 Thread</option> |
| <option value="2" selected="selected">2 Threads</option> |
| <option value="4">4 Threads</option> |
| <option value="6">6 Threads</option> |
| <option value="8">8 Threads</option> |
| <option value="12">12 Threads</option> |
| <option value="24">24 Threads</option> |
| <option value="32">32 Threads</option> |
| </select> |
| </td> |
| </tr> |
| <tr> |
| <td class="name"><label for="drawPoints">Draw Points:</label></td> |
| <td class="value"> |
| <input type="checkbox" id="drawPoints" checked="checked"> |
| </td> |
| </tr> |
| <tr> |
| <td class="name"> |
| <label for="drawInteriors">Draw Interiors:</label> |
| </td> |
| <td class="value"> |
| <input type="checkbox" id="drawInteriors" checked="checked"> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </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> |
