randompast/hex-grid-kinetic.html

## hex-grid-kinetic.html
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.js"></script>
      <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 600
      });
      var layer = new Kinetic.Layer();

      var hexagons = [];
      for(var i=0; i<10; i++){
        for(var j=0; j<20; j++){
            hexagons[i] = new Kinetic.RegularPolygon({
              //add a tad less than half of the radius for even rows
              x: i*52+50+(j%2)*25,
              //the 30 is based off of
              y: j*46+50,
              sides: 6,
              radius: 30,
              fill: 'red',
              stroke: 'black',
              strokeWidth: 2,
              opacity: 0.4
            });
            //do something when mouse enters shape
            hexagons[i].on('mouseover touchstart', function() {
              this.setFill('blue');
              this.setOpacity(1);
              layer.draw();
            });
            //do something when mouse exits shape
            hexagons[i].on('mouseout touchend', function() {
              this.setFill('red');
              this.setOpacity(0);
              layer.draw();
            });
            //add the shape to the layer
            layer.add(hexagons[i]);
        }//end j
      }//end i

      // This shrinks the vertical axis a bit
      layer.setScale(1,0.4);

      // add the layer to the stage
      stage.add(layer);
      </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.js"></script>
	<script>
	var stage = new Kinetic.Stage({
	container: 'container',
	width: 600,
	height: 600
	});
	var layer = new Kinetic.Layer();

	var hexagons = [];
	for(var i=0; i<10; i++){
	for(var j=0; j<20; j++){
	hexagons[i] = new Kinetic.RegularPolygon({
	//add a tad less than half of the radius for even rows
	x: i52+50+(j%2)25,
	//the 30 is based off of
	y: j*46+50,
	sides: 6,
	radius: 30,
	fill: 'red',
	stroke: 'black',
	strokeWidth: 2,
	opacity: 0.4
	});
	//do something when mouse enters shape
	hexagons[i].on('mouseover touchstart', function() {
	this.setFill('blue');
	this.setOpacity(1);
	layer.draw();
	});
	//do something when mouse exits shape
	hexagons[i].on('mouseout touchend', function() {
	this.setFill('red');
	this.setOpacity(0);
	layer.draw();
	});
	//add the shape to the layer
	layer.add(hexagons[i]);
	}//end j
	}//end i

	// This shrinks the vertical axis a bit
	layer.setScale(1,0.4);

	// add the layer to the stage
	stage.add(layer);
	</script>
	</body>
	</html>