organize in a circle and rotate towards it

by venkatesh pappu

HTML

<script src="http://pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="http://pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>
Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<div id="container">
    <div id="center"></div>
    <div id="crosshair-x"></div>
    <div id="crosshair-y"></div>
</div>

CSS

body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; }
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }

.field {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.moveAni {
    transition: left 400ms ease-out, top 400ms ease-out;
}

JavaScript

/*
using:
    circular positioning code:
        http://stackoverflow.com/a/10152437/1644202
    point at:
        http://pointat.idenations.com/api

depends on:
    jquery
    https://github.com/thomas-dotworx/jqrotate (pointat)
*/


function createFields() {
    $('.field').remove();
    var container = $('#container');
    for(var i = 0; i < +$('input:text').val(); i++) {
        $('<div/>', {
            'class': 'field',
            'text': i + 1,
        }).appendTo(container);
    }
}

function distributeFields() {
    var radius = 200;
    var fields = $('.field'), container = $('#container'),
        width = container.width(), height = container.height(),
        angle = 0, step = (2*Math.PI) / fields.length;
    fields.each(function() {
        var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
        var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
        if(window.console) {
            console.log($(this).text(), x, y);
        }
        $(this).css({
            left: x + 'px',
            top: y + 'px'
        });
        angle += step;
    });
}

$('input').change(function() {
    createFields();
    distributeFields();
    initPointAt();
});

var timer = null
    timer2 = null;
$('#addone').click(function() {
    // do not append to current, otherwise you see it movingthrough the container
    $('.field').addClass('moveAni');
    
    $('<div/>', {
            'class': 'field',
            'text': $('.field').length +1
    })
    
    .css({
        left: $('#container').width()/2-25 + 'px',
        top: $('#container').height()/2-25 + 'px'})
    .addClass('moveAni')
    
    .appendTo('#container')
    .pointat({
        target: "#center",
        defaultDirection: "down"
    });
    
    distributeFields();

    // without css:
    //$('.field').pointat("updateRotation");
    
    // with css: for css move animation
    clearInterval(timer);
    clearTimeout(timer2);
    timer =...