Skip to content

Instantly share code, notes, and snippets.

@jzgit
Created October 18, 2013 04:51
Show Gist options
  • Save jzgit/7036650 to your computer and use it in GitHub Desktop.
Save jzgit/7036650 to your computer and use it in GitHub Desktop.
color flipping
{"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"}
//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))
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment