pre-attentive by @enoex

_.md

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

config.json

{"description":"pre-attentive 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":{"choice":1}}

inlet.js

var choice =  tributary.control({name: "choice", options: [0,1,2]});

// --------------------------------------
// 
// CONFIG
//
// --------------------------------------
var CONFIG = {
    height: tributary.sh - 140,
    width: tributary.sw - 40,
    numShapes: 50,
    shapeSize: 26
};

var xscale = d3.scale.linear()
.domain([0,1])
.range([CONFIG.shapeSize*2, CONFIG.width - CONFIG.shapeSize/2])
var yscale = d3.scale.linear()
.domain([0,1])
.range([CONFIG.shapeSize*2, CONFIG.height - CONFIG.shapeSize/2])



function distanceIntersection(shape1, shape2) {
  var x2 = (shape1.x-shape2.x)*(shape1.x-shape2.x);
  var y2 = (shape1.y-shape2.y)*(shape1.y-shape2.y);
  // we multiply square of distance * 2 for extra space
  var w = CONFIG.shapeSize*2;
  if(x2 + y2 < (w*w)) { 
    return true;
  } else {
    return false;
  }
}




function makeShape() {
  var x = xscale(Math.random());
  var y = yscale(Math.random());
  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
    var firstShape = makeShape();
    data.push(firstShape);

    var DELAY = 1;

    function attemptToPlace(){
      var renderIt = true;
      shape1 = makeShape()

      _.each(data, function(shape2){ 
        // Test intersection
        if(distanceIntersection(shape2,shape1)){
          renderIt = false;
          return false;
        } 
      });

      // if we can't render, do this attempt again
      if(renderIt === false){ 
        return attemptToPlace();
      }
      else { 
        // we can render, add it and render
        data.push(shape1);
        i++;

        if(data.length >= CONFIG.numShapes){ 
          return false;
        }
        else { 
          return attemptToPlace();
        }
      }
    }
    // generate / place data
    attemptToPlace();

    // 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 % 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] + ")"
      },
      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");
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 === 0) {
      shape.attr(cases[choice].highlight)
      shape.classed("selected", true)
    } else if (i % 2 == 0) {
      shape.attr(cases[choice].even)
    } else {
      shape.append("circle");
      shape.attr(cases[choice].odd)
    }
  });