Distributing elements on a circle

by Hans PUFAL

HTML

<section class="stage"></section>

CSS

*{margin:0;padding:0;font-size:15px;font-family:helvetica,arial,sans-serif}
  footer,section,header{display:block;}
  h1{margin:1em 2em}
  .stage{
    width:400px;
    height:400px;
    margin:2em;
    float:left;
    position:relative;
    background:#ccc;
    overflow:hidden;
    font-weight:bold;
    text-align:center;
  }

JavaScript

Plot = function (stage, attr) {

  this.size = function (x, y) {
    this.elm.style.width = (this.width = x) + 'px';
    this.elm.style.height = (this.height = y || x) + 'px';
  };
    
  this.position = function (x, y) {
    this.elm.style.left = ((this.x = x) - (+!arguments[2] && (this.width / 2))) + 'px';
    this.elm.style.top = ((this.y = y) - (+!arguments[2] && (this.height / 2))) + 'px';
  };

  this.background = function (col) {
    this.elm.style.background = col;
  };
    
  this.kill = function () {
    this.elm.parentNode.removeChild (this.elm);
  };
    
  this.rotate = function (str) {
    this.elm.style.webkitTransform = this.elm.style.MozTransform = 
    this.elm.style.OTransform = this.elm.style.transform = 'rotate(' + str + ')'; 
  };
    
  this.content = function (content) {
    this.elm.innerHTML = content;
  };
    
  this.round = function (round) {
    this.elm.style.borderRadius = round === true ? '50%/50%' : round;
  };
    
  var _this = this;  
  this.elm = document.createElement ('div');
  this.elm.style.position = 'absolute';
  stage.appendChild (this.elm);
  Object.keys (attr).forEach (function (a) {
    _this[a] && _this[a].apply (_this, Array.isArray (attr[a]) ? attr[a] : [attr[a]])});
};


function distribute (stage, els, options) {
  +els === +els && (els = [].concat.call ([], Array (els)));
  !options && (options = {});
  var from = options.from || 0;
  var by = options.by || (2 * Math.PI / els.length);

  if (from.match && (from = from.match (/^\s*(\d+)\s*(deg)\s*$/i) || [,from]))
      from = from[0] ? 2 * Math.PI / 360 * +from[1] : from[1];
  if (by.match && (by = by.match (/^\s*(\d+)\s*(deg)\s*$/i) || [,by]))
      by = by[0] ? 2 * Math.PI / 360 * +by[1] : by[1];

  from -= Math.PI / 4;
  console.log (from * 180 / Math.PI, by * 180 / Math.PI, els.length);
  while (els.length) {
      new Plot (stage, {round:true, 
                        size: 40, 
                        background: 'green', 
                       ...