Delaunay colouring testing

by John Doe

HTML

<p id="instruction">Press "Start Test"</p>
<ul>

<li><a id="prune">remove all points with >=2/3 foreign colour neighbours</a></li>
<li><a id="randGreen">add 20 random green points</a></li>
<li><a id="randRed">add 20 random red points</a></li>
<li><a id="clear">clear ponts</a></li>
<li><a id="pruneRandom">delete about half of the points</a></li>
<li><a id="download">Download as image</a></li>
<li><a id="">--</a></li>
</ul>
<p id="log">just some logging information</p>
<canvas width="500" height="500" id="canvas">Sorry, no canvas available</canvas>
<br/>
<p id="datadump"></p>

CSS

body {
	background-color:#755;
	padding:0;
	margin:0;
	overflow:scroll;
  font-family:sans-serif;
  color:#fff;
}
canvas {
  border:1px solid #000;
  float:left;
  clear:both;
}
ul {
  padding:0;
  padding-left:20px;
  margin:0;
}
li {
  float:left;
  padding:0;
  padding-right:20px;
  margin:0;
}
a {
  cursor:pointer;
  color:#ccc;
}
a:hover {
  color:#fff;
}

JavaScript

/*
 * TODO: 
 * colour triangles according to the colours of the vertices
 * smoothing/pruning function
 * automatic triangulation of a set shape, triangulate all triangles greater than some number
 */

var cnvs = document.getElementById('canvas'),
  ctx = cnvs.getContext('2d')

var points = []
var tri = []
var toggleInfo = false //vertex number and triangle orientation

function main() { //TODO
  printInstruction("Click for adding poits: click+alt for red points, click+shift for removing")
  //points = generatePoints(100, false)
    //points = [[.2,.2,false],[.2,.8,false],[.8,.8,false],[.8,.2,false],[.5,.5,true]]
    //points = points.map(x=>[x[0]*cnvs.width, x[1]*cnvs.height, x[2]])
  eraseCanvas()
  plotPoints(points)
  tri = triangulate(points)
  plotTriangulation(points, tri)
  plotPoints(points)
  findOrientations(tri, points)

}

function triangulate(P) { //TODO
  //https://en.wikipedia.org/wiki/Bowyer%E2%80%93Watson_algorithm#Pseudocode
  var T = [] // triangulation
  var badTriangles = []
  var newTri = []
  var temp
    /* create meta triangle, all point should be within this one */

  var xmin = P.reduce(function(acc, curr) {
    return curr[0] < acc ? curr[0] : acc;
  }, Infinity)
  var ymin = P.reduce(function(acc, curr) {
    return curr[1] < acc ? curr[1] : acc;
  }, Infinity)
  var xmax = P.reduce(function(acc, curr) {
    return curr[0] > acc ? curr[0] : acc;
  }, -Infinity)
  var ymax = P.reduce(function(acc, curr) {
    return curr[1] > acc ? curr[1] : acc;
  }, -Infinity)

  P.push([xmin - (xmax - xmin) * 0.1, ymin - (ymax - ymin) * 0.1])
  P.push([xmin, ymax + (ymax - ymin) * 1.1])
  P.push([xmax + (xmax - xmin) * 1.1, ymin])

  T.push([P.length - 3, P.length - 2, P.length - 1])
    /* add all the points */
    //alert(P.length)
  for (var k = 0; k < P.length - 3; k++) {
    p = P[k] // current point
      /*following is not strictly necessary, just for viewing the process */
      //eraseCanvas(), plotTriangulation(P,T), plotPoints(P),...