test_delaunay.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Test Delaunay</title>
    <style>
        #container {
            float: right;
            width: 600px;
            height: 400px;
        }
    </style>
    <script src="webapp/libs/jquery.min.js"></script>
    <script src="webapp/cnc/delaunay.js"></script>
</head>
<body>
<canvas id="container" width="600" height="400"></canvas>
<script>
    var triangleCounter = 0;
    var container = $('#container');
    var canvas = container[0];
    var context = canvas.getContext('2d');
    function drawTriangle(triangle, vertices, fill) {
        var points = triangle.verticesIndexes;
        context.beginPath();
        context.moveTo(vertices[points[0]].x, vertices[points[0]].y);
        context.lineTo(vertices[points[1]].x, vertices[points[1]].y);
        context.lineTo(vertices[points[2]].x, vertices[points[2]].y);
        context.lineTo(vertices[points[0]].x, vertices[points[0]].y);
        context.fillStyle = 'green';
        if (fill)
            context.fill();
        context.stroke();
    }

    function drawPoint(x, y, color) {
        context.beginPath();
        context.arc(x, y, 1, 0, 2 * Math.PI, false);
        context.fillStyle = color;
        context.fill();
    }

    var delaunayState = createDelaunay(0, 0, container.width(), container.height());
    container.click(function (event) {
        appendVertex(event.offsetX, event.offsetY, delaunayState);
        context.clearRect(0, 0, canvas.width, canvas.height);
        $.each(delaunayState.triangles, function (index, triangle) {
            if (!triangle.deleted)
                if (!triangle.fromSuper)
                    drawTriangle(triangle, delaunayState.vertices);
        });
        $.each(delaunayState.vertices, function (_, vertex) {
            drawPoint(vertex.x, vertex.y, 'green');
        });
    });
</script>
</body>