pre-attentive grid by @EnoeX

_.md

[ Launch: pre-attentive by @enoex ] 92ee4d4476f6b4ef0e06 by enjalot
[ Launch: pre-attentive by @enoex ] 02e04aa07cebe07affea by enjalot

config.json

{"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}}

inlet.js

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)
    }
  });