Delaunay（ドロネー）分割の勉強。まずは基本的な描画（線、円）とドロネー分割で必要な外接円の求め方から。
以下、JavaScript だけ。
$(document).ready(function () {
var SAMPLE = {};
SAMPLE.Main = (function () {
// 頂点
function Vertex(x, y) {
this.x = x;
this.y = y;
}
// 三角形
function Triangle(v0, v1, v2) {
this.v0 = v0;
this.v1 = v1;
this.v2 = v2;
// 三角形を描画
this.draw = function () {
var drawLine = function (vs, vd) {
// パスのリセット
ctx.beginPath();
// 線の太さ
ctx.lineWidth = 1;
// 線の色
ctx.strokeStyle = "#454545";
// 開始位置
ctx.moveTo(vs.x, vs.y);
// 次の位置
ctx.lineTo(vd.x, vd.y);
// 描画
ctx.stroke();
};
drawLine(this.v0, this.v1);
drawLine(this.v1, this.v2);
drawLine(this.v2, this.v0);
};
// 外接円を描画
this.drawCircle = function () {
// 外接円の求め方
var x1 = this.v0.x,
y1 = this.v0.y,
x2 = this.v1.x,
y2 = this.v1.y,
x3 = this.v2.x,
y3 = this.v2.y,
c = 2.0 * ((x2 - x1) * (y3 - y1) - (y2 - y1) * (x3 - x1)),
x = ((y3 - y1) * (x2 * x2 - x1 * x1 + y2 * y2 - y1 * y1) + (y1 - y2) * (x3 * x3 - x1 * x1 + y3 * y3 - y1 * y1)) / c,
y = ((x1 - x3) * (x2 * x2 - x1 * x1 + y2 * y2 - y1 * y1) + (x2 - x1) * (x3 * x3 - x1 * x1 + y3 * y3 - y1 * y1)) / c,
center = new Vertex(x, y), // 外接円の中心
dx = center.x - v0.x,
dy = center.y - v0.y,
radius = Math.sqrt((dx * dx) + (dy * dy)), // 外接円の半径
circle = new Circle(center, radius);
// 外接円を描画
circle.draw();
// 外接円の中心を描画
circle.drawCenter();
};
}
// 円
function Circle(center, radius) {
// 中心座標と半径
this.center = center;
this.radius = radius;
// 円を書く
this.draw = function () {
ctx.beginPath();
ctx.arc(this.center.x, this.center.y, this.radius, 0, 360, true);
ctx.stroke();
};
// 円の中心を書く
this.drawCenter = function () {
ctx.beginPath();
ctx.arc(this.center.x, this.center.y, 2, 0, 360, true);
ctx.fill();
};
}
var canJqObj = $("#can"),
canDom = document.getElementById('can'),
ctx = document.getElementById('can').getContext("2d"),
// 三角形の定義
triangle = new Triangle(
new Vertex(100, 120),
new Vertex(220, 270),
new Vertex(300, 160));
// 開始
function init() {
// canvas のサイズを指定
canDom.width = 400;
canDom.height = 350;
// 三角形を描画
triangle.draw();
// 円を描画
triangle.drawCircle();
}
// 開始
init();
})();
});