'use strict' var orient = require('robust-orientation') var vec2 = require('vec2') var segment2 = require('segment2') var mouseChange = require('mouse-change') var segCrosses = require('robust-segment-intersect') var fit = require('canvas-fit') var createTriangulation = require('../cdt2d') //Create canvas and context var canvas = document.createElement('canvas') var context = canvas.getContext('2d') document.body.appendChild(canvas) window.addEventListener('resize', fit(canvas), false) var optionDiv = document.createElement('div') optionDiv.style.position = 'absolute' optionDiv.style.left = '5px' optionDiv.style.top = '5px' optionDiv.style['z-index'] = '10' document.body.appendChild(optionDiv) var points = [] var edges = [] var options = { delaunay: true, interior: true, exterior: true, infinity: false } for(var i=0; i<4; ++i) { for(var j=0; j<4; ++j) { points.push([0.25 + i/6,0.25 + j/6]) } } for(var i=0; i<3; ++i) { edges.push([i, i+1]) edges.push([i+12, i+13]) edges.push([4*i, 4*i+4]) edges.push([4*i+3, 4*i+7]) } edges.push([5,6], [9,10], [5,9], [6,10]) var cells = createTriangulation(points, edges, options) Object.keys(options).forEach(function(name) { var container = document.createElement('p') var checkBox = document.createElement('input') checkBox.type = 'checkbox' checkBox.name = name checkBox.checked = options[name] checkBox.id = 'check_' + name var label = document.createElement('label') label.htmlFor = checkBox.id label.appendChild(document.createTextNode(name)) checkBox.addEventListener('change', function() { options[name] = !!checkBox.checked cells = createTriangulation(points, edges, options) }) container.appendChild(checkBox) container.appendChild(label) optionDiv.appendChild(container) }) var resetButton = document.createElement('input') resetButton.type = 'button' resetButton.value = 'reset' resetButton.addEventListener('click', function() { points.length = edges.length = 0 cells = createTriangulation(points, edges, options) }) var resetP = document.createElement('p') resetP.appendChild(resetButton) optionDiv.appendChild(resetP) var description = document.createElement('p') description.innerHTML = 'click to add/remove points
drag to add constraints
Project page' optionDiv.appendChild(description) function edgeDistance(a, b, c) { var p = vec2(c[0], c[1]) return segment2(vec2(a[0], a[1]), vec2(b[0], b[1])).closestPointTo(p).distance(p) } function isValidEdge(a, b) { for(var i=0; i= 0) { edges.splice(highlightEdge, 1) cells = createTriangulation(points, edges, options) highlightEdge = -1 } else if(highlightPoint < 0) { points.push([lx, ly]) cells = createTriangulation(points, edges, options) } else { startPoint = highlightPoint activeEdge = [ points[highlightPoint], [lx, ly] ] } } else if(!!lastButtons && !buttons) { if(startPoint >= 0) { if(highlightPoint === startPoint) { points.splice(highlightPoint, 1) var nedges = [] discard_edge: for(var i=0; i highlightPoint) { e[j] -= 1 } else if(e[j] === highlightPoint) { continue discard_edge } } nedges.push(e) } edges = nedges highlightPoint = -1 cells = createTriangulation(points, edges, options) } else if(highlightPoint >= 0) { if(isValidEdge(points[startPoint], points[highlightPoint])) { edges.push([startPoint, highlightPoint]) cells = createTriangulation(points, edges, options) } } startPoint = -1 activeEdge = null } } else if(!!buttons) { if(activeEdge) { activeEdge[1] = [lx, ly] } } lastButtons = buttons }) function line(a, b) { var x0 = a[0]-0.5 var y0 = a[1]-0.5 var x1 = b[0]-0.5 var y1 = b[1]-0.5 var w = canvas.width var h = canvas.height var s = Math.min(w, h) context.beginPath() context.moveTo(s*x0 + w/2, s*y0 + h/2) context.lineTo(s*x1 + w/2, s*y1 + h/2) context.stroke() } function circle(x, y, r) { var w = canvas.width var h = canvas.height var s = Math.min(w, h) context.beginPath() context.moveTo(s*x, s*y) context.arc(s*(x-0.5) + w/2, s*(y-0.5) + h/2, r, 0.0, 2.0*Math.PI) context.fill() } var CW_ARROW = '⟳' var CCW_ARROW = '⟲' function drawSpiral(a, b, c) { var w = canvas.width var h = canvas.height var s = Math.min(w, h) var x = s * ((a[0] + b[0] + c[0]) / 3.0 - 0.5) + w/2 var y = s * ((a[1] + b[1] + c[1]) / 3.0 - 0.5) + h/2 var size = Math.ceil(s*0.025) context.font = size + 'px Verdana' if(orient(a, b, c) > 0) { context.fillText(CW_ARROW, x-0.5*size, y+0.25*size) } else { context.fillText(CCW_ARROW, x-0.5*size, y+0.25*size) } } function length(v) { return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2)) } function scale(v, s) { return [v[0]*s, v[1]*s] } function sum(u, v) { return [u[0]+v[0], u[1]+v[1]] } function bisector(a, b, c) { var ab = [a[0] - b[0], a[1] - b[1]] var cb = [c[0] - b[0], c[1] - b[1]] var d = sum(scale(ab, length(cb)), scale(cb, length(ab))) var l = length(d) if(l > 1e-6) { return scale(d, 1.0 / l) } return scale([ ab[1], -ab[0] ], 1.0 / length(ab)) } function draw() { requestAnimationFrame(draw) var w = canvas.width var h = canvas.height context.fillStyle = '#fff' context.fillRect(0, 0, w, h) var neighbors = new Array(points.length) for(var i=0; i= 0) { var e = edges[highlightEdge] context.strokeStyle = '#f00' line(points[e[0]], points[e[1]]) } for(var i=0; i