polygon

_.md

[ Launch: polygon ] f02c756006bcc2f842aa by hemulin

config.json

{"description":"polygon","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/OYKLqRX.png"}

inlet.js

var width = 962;			// svg width
var height = 502;			// svg height
var sides = 15;			// polygon vertices number
var radius = width/4 - 80;		// polygon radius
var dur = 400;
svg = d3.select('svg')
.append('svg')
.attr('width', width)
.attr('height', height)
.attr('viewBox', [-width/2, -height/2, width, height].join(' '));
container = svg.append('g');

var _text = svg.append("text")
				.attr("x", -400)
				.attr("y", 0)
				.attr("width", 50)
				.attr("height", 20)
				.text("click me to start")
				.style("cursor", "pointer")
				.on("click", moveCows);

crd = polygon(0, 0, radius, sides);

for (var i = 0; i < crd.length; i++) {
  container.append('circle')
  .attr('r', 10)
  .attr('cx', crd[i][0])
  .attr('cy', crd[i][1])
  .attr('fill', '#FCE29D')
  .attr('stroke', '#F7B127')
  .attr('stroke-width', 4);
}


/* GIVEN x and y (the center coordinates), the radius and the number of polygon sides RETURNS AN ARRAY OF VERTICE COORDINATES */
function polygon(x, y, radius, sides) {
  var crd = [];
  
  /* 1 SIDE CASE */
  if (sides == 1)
    return [[x, y]];
  
  /* > 1 SIDE CASEs */
  for (var i = 0; i < sides; i++) {
    crd.push([(x + (Math.sin(2 * Math.PI * i / sides) * radius)), (y - (Math.cos(2 * Math.PI * i / sides) * radius))]);
  }
  return crd;
}

function moveCows() {
  var pos = [], tmpPos1 = 0, tmpPos2 = 0;
  circles = d3.selectAll("circle");  
  circles.each(function() {
    xPos = d3.select(this).attr("cx");
    yPos = d3.select(this).attr("cy");
    pos.push([xPos, yPos]);
  }); //first each
    
  pos = rotateArr(pos);
    
  circles.each(function(d,i){    
    //console.log(circles[i])
    d3.select(this).transition().duration(dur)
    .attr("cx", pos[i][0])
    .attr("cy", pos[i][1])
    .each("end", function() {
      if (Math.abs(tmpPos1 - tmpPos2) > 0.01) {
        if (i === 0) 
          tmpPos1 = d3.select(this).attr("cx");
        else 
          tmpPos2 = d3.select(this).attr("cx");                  
        return moveCows; //COMMENT THIS LINE TO STOP TRANSITION LOOP
      }
      return;
    }); // inner 2nd each
  }) // 2nd each
  
}

function rotateArr(array) {
  array = array.slice();  
  var temp = array.shift();
  array.push( temp )  
  return array;
}