CODEWITHSUNDEEP
javascripthtmlcollision-detectionkineticjs
devcoder
devcoder

Reputation: 1685

How can I detect when a draggable circle shape overlaps another circle shape with KineticJS?

I have a draggable circle shape that the user drags to another circle shape [static, non-draggable]. When the draggable circle overlaps the static circle, I need to display a "Success" text. How can I do so ?

Upvotes: 1

Views: 772

Answers (1)

markE
markE

Reputation: 105025

When the user drags the circle, you can handle the “dragmove” events.

In "dragmove": test whether the circles are colliding. If so, then declare success!

Circle1.on("dragmove",function(){
    if(theyAreColliding(Circle1,Circle2)){
        // Success!
    }
});

The test for collision looks like this:

function theyAreColliding(c1,c2){
    var dx=c1.getX()-c2.getX();
    var dy=c1.getY()-c2.getY();
    var radiiSum=c1.getRadius()+c2.getRadius();
    console.log(dx+"/"+dy+": "+radiiSum);
    return((dx*dx+dy*dy)<radiiSum*radiiSum);
}

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/3dQpL/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>

<style>
canvas{
  border:solid 1px #ccc;
}
</style>        
<script>
$(function(){

      var layer = new Kinetic.Layer();
      var stage = new Kinetic.Stage({
          container: "container",
          width: 400,
          height: 400
      });
      stage.add(layer);

      // mouse events don't fire on the empty part of the stage
      // so fill the stage with a rect to get events on entire stage
      // now stage.on("mouse... will work
      var background = new Kinetic.Rect({
          x: 0,
          y: 0,
          width: 400, //stage.getWidth(),
          height: 400, //stage.getHeight(),
          fill: "#eee"
      });
      layer.add(background);

      var Radius1=50;
      var Circle1=new Kinetic.Circle({
            x: 225,
            y: 125,
            radius: Radius1,
            fill: 'green',
            stroke: 'orange',
            strokeWidth: 2,
            draggable:true        
        });
        layer.add(Circle1);


      var Radius2=50;
      var Circle2=new Kinetic.Circle({
            x: 75,
            y: 175,
            radius: Radius2,
            fill: 'blue',
            stroke: 'black',
            strokeWidth: 2        
        });
        layer.add(Circle2);

      var message = new Kinetic.Text({
        x: 10,
        y: 15,
        text: "",
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green'
      });
      layer.add(message);

      var instructions = new Kinetic.Text({
        x: 10,
        y: 285,
        text: "Drag green on top of blue",
        fontSize: 18,
        fontFamily: 'Calibri',
        fill: 'green'
      });
      layer.add(instructions);
      layer.draw();

Circle1.on("dragmove",function(){
    if(theyAreColliding(Circle1,Circle2)){
        message.setText("Collision Detected!");
        Circle1.setFill("red");
        layer.draw();
    }else{
    }
});


function theyAreColliding(c1,c2){
    var dx=c1.getX()-c2.getX();
    var dy=c1.getY()-c2.getY();
    var radiiSum=c1.getRadius()+c2.getRadius();
    console.log(dx+"/"+dy+": "+radiiSum);
    return((dx*dx+dy*dy)<radiiSum*radiiSum);
}



}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

Upvotes: 3

Related Questions