JavaScript で三角形の外接円を求める

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();

    })();


});