[ Launch: pre-attentive by @enoex ] 92ee4d4476f6b4ef0e06 by enjalot
[ Launch: pre-attentive by @enoex ] 02e04aa07cebe07affea by enjalot
-
-
Save enjalot/92ee4d4476f6b4ef0e06 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":3}} |
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: "none", | |
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 === highlighted) { | |
return "rect" | |
} | |
else if (Math.random() < 0.3) { | |
return "circle" | |
} else { | |
return "rect" | |
} | |
} | |
}, | |
{ | |
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 + CONFIG.shapeSize/2, 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 highlighted = Math.round(Math.random() * CONFIG.numShapes); | |
var svg = d3.select("svg"); | |
svg.selectAll("rect").data(data) | |
.enter().append("g") | |
.each(function(d, i) { | |
var dis = d3.select(this); | |
shapeType = cases[choice].shape(d,i, highlighted); | |
var shape = dis.append(shapeType) | |
shape.attr(d); | |
if(i === highlighted) { | |
shape.attr(cases[choice].highlight) | |
shape.classed("selected", true) | |
} else if (Math.random() < 0.3) { | |
shape.attr(cases[choice].odd) | |
} else { | |
shape.attr(cases[choice].even) | |
} | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment