2014-01-24 1st

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
    background: #eee;
    font: 30px sans-serif;
    overflow: hidden;
}

div.point {
    width: 10px;
    height: 10px;
    background: black;
    cursor: pointer;
    position: absolute;
    top: 100px;
    left: 100px;
}

div.line {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    width: 50px;
    height: 5px;
    background: blue;
    position: absolute;
}

jsdoit.html

<div class="point"></div>
<div class="point"></div>
<div class="point"></div>

<div class="line"></div>

jsdoit.js

function rotate_line(c) {
    $('.line').css({
        "mozTransform":    "rotate(" + c + "deg)",
        "webkitTransform": "rotate(" + c + "deg)",
        "oTransform":      "rotate(" + c + "deg)",
        "msTransform":     "rotate(" + c + "deg)"
    });
}

function ave(xs) {
    var sum = 0;
    for (var i = 0; i < xs.length; i++) {
        sum += xs[i];
    }
    return sum / xs.length;
}

function sxy(xs, ys) {
    var x_ = ave(xs);
    var y_ = ave(ys);
    var result = 0;
    for (var i = 0; i < xs.length; i++) {
        result += (xs[i] - x_) * (ys[i] - y_);
    }
    return result;
}


$(function() {
    $( ".point" ).draggable({
        drag: function( event, ui ) {
            var xs = [];
            var ys = [];
            $('.point').each(function(i, obj) {
                var p = $(obj).position();
                xs[i] = p.left + $(obj).width() / 2;
                ys[i] = p.top + $(obj).height() / 2;
            });
            var s1 = sxy(xs, xs);
            var s2 = sxy(xs, ys);

            console.log(x + ", " + y);
            var n = $('.point').length;
            var line_w = $('.line').width();
            //var line_w = $('.line').width();
            //var line_w = $('.line').width();
            $('.line').css({
                left: x / n - $('.line').width() / 2,
                top: y / n - $('.line').height() / 2
            });
            
            
        }
    });

    var c = 0;
    setInterval(function(){
        c++;
        rotate_line(c);
    },100);

});