[ Launch: pre-attentive grid by @enoex ] 7967f830240f6d5b4726 by enoex
[ Launch: pre-attentive by @enoex ] 92ee4d4476f6b4ef0e06 by enjalot
[ Launch: pre-attentive by @enoex ] 02e04aa07cebe07affea by enjalot
-
-
Save erikhazzard/7967f830240f6d5b4726 to your computer and use it in GitHub Desktop.
pre-attentive grid by @enoex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"pre-attentive grid by @enoex","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/x8WppR5.png","controls":{"function":0,"choice":2}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var choice = tributary.control({name: "choice", options: [0,1,2,3]}); | |
// -------------------------------------- | |
// | |
// CONFIG | |
// | |
// -------------------------------------- | |
var CONFIG = { | |
height: tributary.sh - 140, | |
width: tributary.sw - 40, | |
numShapes: 100, | |
shapeSize: 26 | |
}; | |
var xscale = d3.scale.linear() | |
.domain([0,10]) | |
.range([CONFIG.shapeSize*2, CONFIG.width - CONFIG.shapeSize/2]) | |
var yscale = d3.scale.linear() | |
.domain([0,10]) | |
.range([CONFIG.shapeSize*2, CONFIG.height - CONFIG.shapeSize/2]) | |
function makeShape(i) { | |
var x = xscale(i % 10); | |
var y = yscale(Math.floor(i/10)); | |
return { | |
x: x - CONFIG.shapeSize/2, | |
y: y - CONFIG.shapeSize/2, | |
width: CONFIG.shapeSize, | |
height: CONFIG.shapeSize, | |
cx: x, | |
cy: y, | |
r: CONFIG.shapeSize/2 | |
} | |
} | |
function generateData ( options ){ | |
// generate random squares | |
var data = []; | |
var shape1,shape2; | |
var i = 0; | |
// add initial rect | |
for(i = 0; i < CONFIG.numShapes; i++) { | |
data.push(makeShape(i)); | |
} | |
// return it | |
return data; | |
} | |
var data = generateData(); | |
// a filled in black square with empty other squares | |
var cases = [ | |
{ | |
highlight: { | |
fill: "black" | |
}, | |
even: { | |
fill: "", | |
stroke: "black" | |
}, | |
odd: { | |
fill: "none", | |
stroke: "black" | |
}, | |
shape: function(d,i) { | |
return "rect" | |
} | |
}, | |
{ | |
highlight: { | |
fill: "black" | |
}, | |
even: { | |
fill: "none", | |
stroke: "black" | |
}, | |
odd: { | |
fill: "black", | |
stroke: "black" | |
}, | |
shape: function(d,i) { | |
if (i % 2 == 0) { | |
return "rect" | |
} else { | |
return "circle" | |
} | |
} | |
}, | |
{ | |
highlight: { | |
fill: "black", | |
stroke: "black", | |
transform: function(d,i) { | |
return "rotate(45," + [d.x + CONFIG.shapeSize/2, d.y + CONFIG.shapeSize/2] + ")" | |
} | |
}, | |
even: { | |
fill: "black", | |
stroke: "black" | |
}, | |
odd: { | |
fill: "black", | |
stroke: "black" | |
}, | |
shape: function(d,i) { | |
return "rect" | |
} | |
}, | |
{ | |
highlight: { | |
fill: "black", | |
stroke: "black", | |
transform: function(d,i) { | |
return "rotate(45," + [d.x , d.y + CONFIG.shapeSize/2] + ")" | |
}, | |
width: 2 | |
}, | |
even: { | |
fill: "black", | |
stroke: "black", | |
width: 2 | |
}, | |
odd: { | |
fill: "black", | |
stroke: "black", | |
width: 2 | |
}, | |
shape: function(d,i) { | |
return "rect" | |
} | |
} | |
] | |
var svg = d3.select("svg"); | |
function renderIt(){ | |
svg.selectAll('*').remove(); | |
var targetNum = Math.random() * 100 | 0; | |
svg.selectAll("rect").data(data) | |
.enter().append("g") | |
.each(function(d, i) { | |
var dis = d3.select(this); | |
shapeType = cases[choice].shape(d,i); | |
var shape = dis.append(shapeType) | |
shape.attr(d); | |
if(i === targetNum) { | |
shape.attr(cases[choice].highlight) | |
shape.classed("selected", true) | |
} else if (Math.random() < 0.5) { | |
shape.attr(cases[choice].even) | |
} else { | |
shape.append("circle"); | |
shape.attr(cases[choice].odd) | |
} | |
}); | |
} | |
renderIt() | |
svg.on('click', function(d){ console.log('hi'); renderIt(); }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment