Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script type="text/javascript">
    function hexagon(w, h, p) {
      var points = 6;
      var width = w;
      var height = h;
      var angle = ((2 * Math.PI) / points);
      var hexagon = [];
      
      for (i = 0; i < points; i++) {
        hexagon.push({
          x: width * Math.sin(angle * i) + p.x, 
          y: height * Math.cos(angle * i) + p.y
        })
      }
      
      return hexagon
    }
    
    var stage = new Kinetic.Stage({
      container: "container",
      width: 600,
      height: 600
    });
    
    var layer = new Kinetic.Layer();
    var group = new Kinetic.Group({x: 600/2, y: 600/2, draggable: false});
    
    var radius = 1000;
    var s = new Kinetic.Circle({
      radius: radius,
      stroke: 'black',
      strokeWidth: 1,
      draggable: true
    });
    group.add(s);
    
    var hex_points = hexagon(radius, radius, {x: 600/2, y: 600/2});
    for (p in hex_points) {
      var s = new Kinetic.Circle({
        radius: radius,
        stroke: 'black',
        strokeWidth: 1,
        draggable: true
      });
      s.setPosition({x: hex_points[p].x - 600/2, y: hex_points[p].y - 600/2})
      group.add(s);
    }
    
    layer.add(group);
    stage.add(layer);
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gautamadudepro
0viewers