anim_stars

_.md

[ Launch: stars ] 6480178 by georules
[ Launch: stars ] 6444326 by georules

config.json

{"description":"anim_stars","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":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/RDRehba.gif"}

inlet.js

tributary.loop_type="pingpong";
var svg = d3.select('svg');

var drawLine =  function(x1,y1,x2,y2,c) {
  svg.append("svg:line")
    .attr('x1',x1)
    .attr('x2',x2)
    .attr('y1',y1)
    .attr('y2',y2)
    .style('stroke',c).style('stroke-width',17)
}

var drawPoint = function(x,y)	{
  svg.append("svg:circle")
    .attr('cx',x)
    .attr('cy',y)
  	.attr('r',10)
    .style('fill',"#997430").style('stroke-width',1)
}

var makeStar = function(x1,y1,n) {
  s = 136
  sinner = s/2
  centerX = x1;
  centerY = y1;
  degreeNext = 2*(Math.PI) / n
  x1 = centerX
  x2 = x1 + s
  y2 = y1 + s
  drawPoint(centerX,centerY)
  points = []//[{x:centerX,y:centerY}]
  degree = 0
  // determine the points
  for (i = 0; i < n; i++) {	
    xn = centerX + s * Math.cos(degree)
    yn = centerY + s * Math.sin(degree)
    drawPoint(xn,yn)
    degree = degree + degreeNext;
    points.push({x:xn,y:yn})
  }
  // draw the lines, connecting every other point
  for (i = 0; i < points.length; i++)	{
    var index = i;
    var index2 = i;
    if (i >= points.length -2)	{
      	index = i;
     	index2 = i-n; 
    }

    color = "#B99333";
    drawLine(points[index].x,points[index].y,points[index2+2].x,points[index2+2].y,color)

  }
}

makeStar(337,187,Math.round(tributary.anim(3,10)));
makeStar(195,530,Math.round(tributary.anim(10,20)));
makeStar(510,530,Math.round(tributary.anim(20,140)));