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
11    <title>Voronoi</title>
12
13    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,700">
14    <link href="/static/styles/style.css" rel="stylesheet">
15
16    <script type="text/javascript" src="example.js"></script>
17
18  </head>
19
20  <body class="demo">
21
22    <header>
23      <h1>Voronoi</h1>
24
25    </header>
26
27    <section>
28      <div class="intro">
29        <p>
30          This demo renders the <a href="http://en.wikipedia.org/wiki/Voronoi"
31            target="_blank">Voronoi diagram</a> for a moving set of points
32          using a brute force technique.
33        </p>
34        <p class="note">
35          Note: the C++ source code of this demo is available in the Native Client SDK (<tt>examples/demo/voronoi</tt>).
36        </p>
37        <p class="note">
38          FPS: <span id="fps">0</span>
39        </p>
40
41        <div class="panel panel-info">
42
43          <h2>Controls</h2>
44
45          <div class="panel-body">
46            <table id="config" cellspacing="0" cellpadding="0">
47              <tbody>
48                <tr>
49                  <td class="name">Points:</td>
50                  <td class="value">
51                    <input type="range" id="pointRange" min="1" max="1024" step="1" value="48">
52                    <label id="pointCount">48 points</label>
53                  </td>
54                </tr>
55                <tr>
56                  <td class="name">Thread Count:</td>
57                  <td class="value">
58                    <select id="threadCount">
59                      <option value="0">Main Thread only</option>
60                      <option value="1">1 Thread</option>
61                      <option value="2" selected="selected">2 Threads</option>
62                      <option value="4">4 Threads</option>
63                      <option value="6">6 Threads</option>
64                      <option value="8">8 Threads</option>
65                      <option value="12">12 Threads</option>
66                      <option value="24">24 Threads</option>
67                      <option value="32">32 Threads</option>
68                    </select>
69                  </td>
70                </tr>
71                <tr>
72                  <td class="name"><label for="drawPoints">Draw Points:</label></td>
73                  <td class="value">
74                    <input type="checkbox" id="drawPoints" checked="checked">
75                  </td>
76                </tr>
77                <tr>
78                  <td class="name">
79                    <label for="drawInteriors">Draw Interiors:</label>
80                  </td>
81                  <td class="value">
82                    <input type="checkbox" id="drawInteriors" checked="checked">
83                  </td>
84                </tr>
85              </tbody>
86            </table>
87          </div>
88        </div>
89      </div>
90
91      <div class="Demo-body">
92
93      <div id="listener" class="Demo-content"></div>
94    </div>
95
96    <div id="loading-cover">
97        <div id="message">
98          <div id="statusField"></div>
99          <div id="progress" class="progress progress-striped active">
100            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
101            </div>
102          </div>
103        </div>
104      </div>
105  </section>
106
107</body>
108</html>
109