color flipping

_.md

[ Launch: color flipping ] 7036650 by jzgit
[ Launch: uuid color mapping ] 6095915 by enjalot
[ Launch: uuid color mapping ] 5711924 by enjalot
[ Launch: uuid color mapping ] 5470760 by enjalot

config.json

{"description":"color flipping","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},"icon.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"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/LXn4BjZ.gif"}

inlet.js

//inspired by identicons (and borrowing code...)
//http://tributary.io/inlet/5469856

var uuid = "5bbebde0-d692-4a17-9109-baafbeb60475"
uuid = "fffffff-d692-4a17-9109-baafbeb60475"
var parts = uuid.split('-')
var ints = parts.map(function(d) { return parseInt(d,16) })

var n = 360;
var w = 40;
var h = 40;

//var nx = 14;
var nx = Math.floor(tributary.sw / (w + 5))

//these control the hashing algorithm. PLAY!
var ashift = 8;
var bshift = 15;

var set1 = [
"#7C8F95",
"#9580AF",
"#AE7977",
"#AF9D77",
"#93AE80",
"#939393",
"#AFAFB0",
"#C9B4C3",
"#CAB7AA",
"#C9C8AA",
"#B4C9BC",
"#9F8096",
"#E0CFCA",
"#E599C2",
"#F8A17D",
"#BFBB7B",
"#A27D66",
"#C8736B",
"#6BB1C7",
"#66A283",
"#676EA2",
"#A6B2DB"
,
"#7BA640",
"#8B2783",
"#384CA0",
"#60BF82",
"#E76425",
"#9A4C9D",
"#F4B620",
"#87C540",
"#E11772",
"#116C8F",
"#B6D433",
"#442F91",
"#652671",
"#D6E266"
];


var len1 = set1.length;
//var len2 = set2.length;
var scale = d3.scale.linear()
.domain([0, n])
.range([0, 316342243]);

function color(d) {
  var code = scale(d);
  var a = code >> ashift
  //var b = code >> bshift
  var ind1 = Math.floor(code % (len1-1));
  //var ind2 = b & (len2-1);
  var col1 = set1[ind1];
  //var col2 = set2[ind2];
  return col1
}
var svg = d3.select("svg");



var codes = d3.range(n).map(function(i) {
  return {
    i: i
  }
});
var gs = svg.selectAll("g.identicon")
.data(codes)
.enter()
.append("g").classed("identicon", true)
.attr("transform", function(d,i) {
  var x = 10 + (w+5) * (i % nx);
  var y = 10 + (h+5) * Math.floor(i / nx)
  return "translate(" + [x, y] + ")";
})

gs.append("rect")
.attr({
  x:0,
  y:0,
  width:w,
  height:h,
  fill: function(d,i) {
    return color(d.i)
  }
})
.on("mouseover", function(d,i) {
  d.i += 1;
  console.log(d);
  d3.select(this).attr("fill", color(d.i))
})
gs.append("path")
.attr({
  d: "M" + [0,0.66*h] + "L" + [0,0] + "L" + [w,0] + "L" + [w,0.3*h],
  fill: function(d,i) {
    return d3.rgb(color(d.i)).darker(0.9)
  }
})
.on("mouseover", function(d,i) {
  d.i += 1;
  d3.select(this).attr("fill", color(d.i))
})