Let it spin

_.md

[ Launch: Let it spin ] 6a0f6b33eb651a3069f2 by gelicia
[ Launch: Let it spin ] c8b2e25a453f62514874 by Catlinman

config.json

{"description":"Let it spin","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":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/lWhrxpj.png","inline-console":true}

inlet.js

/*
	Playing around with techniques for creating loading icons and other so called 'spinner' variations.
    Some of these are not meant to be used as loading icon thingies - I'm merely experimenting here.
*/

var orbs = 8;
var data = d3.range(orbs);

var svg = d3.select("svg");
var color = d3.scale.linear().domain([1,8]).interpolate(d3.interpolateHsl).range(["#ffd105","#ff4305"]);

var background = svg.append("rect").attr({
  x:0,
  y:0,
  width:tributary.sw,
  height:tributary.sh,
  fill:"#141414"
});

var linearCircles = svg.append("g").selectAll("circle").data(data).enter().append("circle")
var twirlCircles = svg.append("g").selectAll("circle").data(data).enter().append("circle")
var squareCircles = svg.append("g").selectAll("circle").data(data).enter().append("circle")
var strangeCircles = svg.append("g").selectAll("circle").data(data).enter().append("circle")
var vortexCircles = svg.append("g").selectAll("circle").data(data).enter().append("circle")

tributary.run = function(unused, t){
  t = t * 4;
  linearCircles
    .attr({
      cx:function(d,i){
        return Math.cos(i * Math.PI / data.length * 2 + t) * 32 + 128;
      },
      cy:function(d,i){
        return Math.sin(i * Math.PI / data.length * 2 + t) * 32 + 128;
      },
      r:6,
      fill:function(d,i){return color(i)}
   });
  
   twirlCircles
    .attr({
      cx:function(d,i){
        return Math.cos(i * Math.PI / data.length * 2 + t) * 32 + 128 * 2;
      },
      cy:function(d,i){
        return Math.sin(i * Math.PI / data.length * 2 + t + Math.cos(t)) * 32 + 128;
      },
      r:6,
      fill:function(d,i){return color(i + 8)}
   });
  
  squareCircles
  .attr({
    cx:function(d,i){
      return Math.tan((Math.cos(i * Math.PI / data.length + t))) * 32 + 128 * 3;
    },
    cy:function(d,i){
      return Math.tan((Math.sin(i * Math.PI / data.length + t))) * 32 + 128;
    },
    r:function(d,i){return i},
    fill:function(d,i){return color(i + 20)}
  });
  
  strangeCircles
  .attr({
    cx:function(d,i){
      return Math.tan((Math.cos((i + 1) * Math.PI / data.length * t))) * 32 + 128 * 4;
    },
    cy:function(d,i){
      return Math.tan((Math.sin((i + 1) * Math.PI / data.length * t))) * 32 + 128;
    },
    r:4,
    fill:function(d,i){return color(i + 48)}
  });
  
  vortexCircles
  .attr({
    cx:function(d,i){
      return (Math.cos((i + 1) * Math.PI / data.length + t * 2)) * Math.cos(t + i) * 64 + 128 * 5;
    },
    cy:function(d,i){
      return (Math.sin((i + 1) * Math.PI / data.length + t * 2)) * Math.cos(t + i) * 64 + 128;
    },
    r:function(d,i){return Math.sin(t + i) * 4 + 4},
    fill:function(d,i){return color(i + 64)}
  });
}