Skip to content

Instantly share code, notes, and snippets.

@enjalot
Last active August 29, 2015 14:15
Show Gist options
  • Save enjalot/92ee4d4476f6b4ef0e06 to your computer and use it in GitHub Desktop.
Save enjalot/92ee4d4476f6b4ef0e06 to your computer and use it in GitHub Desktop.
pre-attentive grid by @enoex
{"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}}
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