Pinwheel tiling - Conway triangles
JavaScript implementation of the Pinwheel tiling using Conway's triangles (that have a the legs/catheti 1 and 2)
By [email protected]
HTML
<table style="width: 100%;">
<tr>
<td>
<canvas id="myCanvas" style="border: 1px solid #c3c3c3;" width="800" height="100%">HTML5 CANVAS NOT SUPPORTED</canvas>
</td>
<td valign="top" style="width: 150px">
<table style="width: 100%">
<tr>
<td>Small cat.</td>
<td>
<input type="text" value="50" id="side1Length" />
</td>
</tr>
<tr>
<td>centerPoint</td>
<td>
<select id="point">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</td>
</tr>
<tr>
<td>Top or Bottom</td>
<td>
<select id="topOrBottom">
<option value="true">top</option>
<option value="false">bottom</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button onclick="regen()">(Re)initialize</button>
<hr />
</td>
</tr>
<tr>
<td>Animation timeout</td>
<td align="center">
<input type="range" id="timeout" min="100" max="1500" step="50" value="1000"
onchange="document.getElementById('tv').innerHTML=this.value" />
<br/> <span id="tv">1000</span>
</td>
</tr>
<tr>
<td colspan="2">
<button onclick="split()" id="split">Split</button>
...
CSS
html, body{
width:100%;
height:100%;
}
html, body, table, td, canvas {
margin: 0;
padding: 0;
}
table {
border-spacing: 0px;
}
input, select {
width:80px
}
input[type=range] {
width:100px
}