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 intersection(x0, y0, r0, x1, y1, r1) {
            var a, dx, dy, d, h, rx, ry;
            var x2, y2;
    
            /* dx and dy are the vertical and horizontal distances between
             * the circle centers.
             */
            dx = x1 - x0;
            dy = y1 - y0;
    
            /* Determine the straight-line distance between the centers. */
            d = Math.sqrt((dy*dy) + (dx*dx));
    
            /* Check for solvability. */
            if (d > (r0 + r1)) {
                /* no solution. circles do not intersect. */
                return false;
            }
            if (d < Math.abs(r0 - r1)) {
                /* no solution. one circle is contained in the other */
                return false;
            }
    
            /* 'point 2' is the point where the line through the circle
             * intersection points crosses the line between the circle
             * centers.  
             */
    
            /* Determine the distance from point 0 to point 2. */
            a = ((r0*r0) - (r1*r1) + (d*d)) / (2.0 * d) ;
    
            /* Determine the coordinates of point 2. */
            x2 = x0 + (dx * a/d);
            y2 = y0 + (dy * a/d);
    
            /* Determine the distance from point 2 to either of the
             * intersection points.
             */
            h = Math.sqrt((r0*r0) - (a*a));
    
            /* Now determine the offsets of the intersection points from
             * point 2.
             */
            rx = -dy * (h/d);
            ry = dx * (h/d);
    
            /* Determine the absolute intersection points. */
            var xi = x2 + rx;
            var xi_prime = x2 - rx;
            var yi = y2 + ry;
            var yi_prime = y2 - ry;
    
            return [[xi, yi], [xi_prime, yi_prime]];
        }
    var radius = 1000;
    var pos = {x:0, y:0};
    var points = intersection(pos.x, pos.y, radius, pos.x+radius, pos.y, radius);
    var tmp = intersection(pos.x, pos.y, radius, pos.x-radius, pos.y, radius);
    points.push(tmp[0]);
    points.push(tmp[1]);
    points.push([pos.x+radius, pos.y]);
    points.push([pos.x-radius, pos.y]);  
    
    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 s = new Kinetic.Circle({
      radius: radius,
      stroke: 'black',
      strokeWidth: 1,
      draggable: true,
    });
    group.add(s);
    for (p in points) {
      var s = new Kinetic.Circle({
        radius: radius,
        stroke: 'black',
        strokeWidth: 1,
        draggable: true,
        x: points[p][0],
        y: points[p][1]
      });
      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