Circle OVverlap

by jude_pinto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
<button id= "button_E">Reset
</button>
<div id="container_1" class="resize-container_E">
  <span class="heading"> Compare </span>
  <div id="Fruit_E" class="resize-drag">
  <span id="Fruit_Ea">Fruit</span><span id="Fruit_Eb">100%</span>
  </div>
  <div id="Berry_E" class="resize-drag">
    <span id="Berry_Ea">Berry</span><span id="Berry_Eb">100%</span>
  </div>
  <div id="Citrus_E" class="resize-drag">
 <span id="Citrus_Ea">Citrus</span><span id="Citrus_Eb">100%</span>
  </div>
</div>
  <button id= "submit_button">Submit
</button>

CSS

.resize-drag {
  /* shape parameters */
  border-radius: 50%;
  width: 200px;
  height: 200px;
  min-height: 1px;
  min-width: 1px;
  max-height: 200px;
  max-width: 200px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  opacity: 0.5;
  align-items: auto;

  /* positioning */
  position: absolute;

  /* text location */
  display: flex;
  justify-content: center;
  align-items: center;

  /* This makes things *much* easier */
  /*box-sizing: border-box;*/

  /* font */
  color: black;
  font-family: sans-serif;
  font-size: 18px;
  user-select: none;
  touch-action: none;
}

.resize-container_E {
  display: inline-block;
  width: 450px;
  height: 400px;
  border-style: solid;
  text-align: center;
  position: relative;
}



#button_E {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
}


#submit_button {
  background-color: #C70039; /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin: 0px 480px 100px;
}

.heading {
  color: black;
  font-family: sans-serif;
  font-size: 22px;
}

#Fruit_E {
  background-color: #23b3f1;
  left: 122px;
  position: absolute;
}

#Fruit_E span#Fruit_Ea {
  display: inline;
}

#Fruit_E:hover span#Fruit_Ea {
  display: none;
}

#Fruit_E span#Fruit_Eb {
  display: none;
}

#Fruit_E:hover span#Fruit_Eb {
  display: inline;
}


#Berry_E {
  background-color: #f1cf23;
  top: 196px;
  left: 4px;
  position: absolute;
}

#Berry_E span#Berry_Ea {
  display: inline;
}

#Berry_E:hover span#Berry_Ea {
  display: none;
}

#Berry_E span#Berry_Eb {
  display: none;
}

#Berry_E:hover span#Berry_Eb {
  display: inline;
}



#Citrus_E {
  background-color: #f14723;
  top: 196px;
  left: 240px;
  position: absolute;
}

#Citrus_E span#Citrus_Ea {
  display:...

JavaScript

//FruitE Global Start Values
var Fruit_E_radius = 100;
var Fruit_E_start = findCentroid(getPos1(Fruit_E), getPos2(Fruit_E));
var Fruit_E_startx=  Fruit_E_start.x2;
var Fruit_E_starty= Fruit_E_start.y2;


//BerryE Global Start Values
var Berry_E_radius = 100;
var Berry_E_start = findCentroid(getPos1(Berry_E), getPos2(Berry_E));
var Berry_E_startx= Berry_E_start.x2;
var Berry_E_starty= Berry_E_start.y2;

//CitrusE Global Start Values
var Citrus_E_radius = 100;
var Citrus_E_start =  findCentroid(getPos1(Citrus_E), getPos2(Citrus_E));
var Citrus_E_startx= Citrus_E_start.x2;
var Citrus_E_starty= Citrus_E_start.y2;




//Global Coordinate Dictionaries


var CoordinatesX_E = {
  Fruit_E: Fruit_E_startx,
  Berry_E: Berry_E_startx,
  Citrus_E: Citrus_E_startx
};


var CoordinatesY_E = {
  Fruit_E: Fruit_E_starty,
  Berry_E: Berry_E_starty,
  Citrus_E: Citrus_E_starty
};

//Call this function from within your .on('dragmove') method.
//It should replace your translations.


//problem with circle returnning incorrect values if intersecting tops - a value does not seem to change in this function
function areaOfIntersection(Ax, Ay, Ar, Bx, By, Br)
{
  var d = Math.hypot(Bx - Ax, By - Ay);
  
  if (d < Ar + Br){
  var a = Ar * Ar;
  var b = Br * Br;
  
  var x0 = (a - b + d * d) / (2*d);
  var z0 = x0*x0;
  var y0 = Math.sqrt(a-z0);
  
  
  	if (d > Math.abs(Br - Ar)){
    return a * Math.asin(y0 / Ar) + b * Math.asin(y0 / Br) - y0 * (x0 + Math.sqrt(z0 + b -a));
    }
  
  	else if (d < Math.abs(Br - Ar)){ 
  	return Math.PI * Math.min(a,b);
  }
   
  	else if (d == Math.abs(Br - Ar)){
  		return 0;
  }
  }
  
  	else{
  	return -1;} 

}

//Begin Interactions

interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: {
        top: 1,
        left: 1,
        bottom: 1,
        right: 1
      }
    },
    //...