roseforyou/point-in-semicircle.html

## point-in-semicircle.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>point-in-semicircle</title>
  <script src="jquery-1.7.2.min.js"></script>
<style>
body{
  border:0;
  margin:0;
  padding:0;
}
#bottom {
  position: absolute;
  left:0px;
  top:0px;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#circleProcess {
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  stroke-dasharray: 360%;
  stroke-dashoffset: 0%;
  stroke: #6FEC6F;
  fill: none;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#left {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 200px;
  border-radius: 100px 100px 0 0;
  -moz-border-radius: 100px 100px 0 0;
  -webkit-border-radius: 100px 100px 0 0;
  background:red;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform-origin: 100px 100px;
  -moz-transform-origin: 100px 100px;
  -webkit-transform-origin: 100px 100px;
  display:none;

}

#right {
  position: absolute;
  top: 100px;
  left: 0px;
  height: 100px;
  width: 200px;
  border-radius: 0 0 100px 100px;
  -moz-border-radius: 0 0 100px 100px;
  -webkit-border-radius: 0 0 100px 100px;
  background:blue;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform-origin: 100px 0px;
  -moz-transform-origin: 100px 0px;
  -webkit-transform-origin: 100px 0px;
  display:none;
}

#top {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 200px;
  z-index: 100px;
}

</style>
</head>
<body>
<div id="bottom">
<svg id="circleProcess" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" cx="100" cy="100" r="100" stroke-width="5" stroke-dashoffset="0%"></circle>
</svg>
<div id="left"></div>
<div id="right"></div>
</div>
<div id="top"></div>
</body>
</html>
<script>
jQuery(function($){
  var polygons = [
    [[0, 0], [200, 0], [100, 100], [0, 200]],
    [[100, 100], [200, 0], [200, 200], [0, 200]]
  ];

  var $left = $('#left');
  var $right = $('#right');
  var $top = $('#top');
  var oldIndex = -1;

  $top.on('mousemove', function(e){
    if( pointInsideCircle([e.offsetX, e.offsetY],[100, 100], 100) ){

      var index = inside([e.offsetX, e.offsetY], polygons);
      if(index===oldIndex){
        return;
      }
      if (index === 0) {
        $left.show();
        $right.hide();
      }
      if (index === 1) {
        $left.hide();
        $right.show();
      }
      oldIndex = index;

    } else {
      $left.hide();
      $right.hide();
      oldIndex = -1;
    }
  });

  $top.on('mouseleave', function(){
    $left.hide();
    $right.hide();
    oldIndex = -1;
  });

  function inside(point, polygons){
    for(var i=1; i>=0; i--){
      if(pointInsidePolygon(point, polygons[i])){
        return i;
      }
    }
    return -1;
  }

  function pointInsidePolygon(point, vs) {
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
  }

  function pointInsideCircle(point, circle, r) {
      if (r===0) return false
      var dx = circle[0] - point[0]
      var dy = circle[1] - point[1]
      return dx * dx + dy * dy <= r * r
  }

});
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>point-in-semicircle</title>
	<script src="jquery-1.7.2.min.js"></script>
	<style>
	body{
	border:0;
	margin:0;
	padding:0;
	}
	#bottom {
	position: absolute;
	left:0px;
	top:0px;
	width: 200px;
	height: 200px;
	border: 1px solid red;
	}

	#circleProcess {
	position: relative;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	stroke-dasharray: 360%;
	stroke-dashoffset: 0%;
	stroke: #6FEC6F;
	fill: none;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	}

	#left {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100px;
	width: 200px;
	border-radius: 100px 100px 0 0;
	-moz-border-radius: 100px 100px 0 0;
	-webkit-border-radius: 100px 100px 0 0;
	background:red;
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform-origin: 100px 100px;
	-moz-transform-origin: 100px 100px;
	-webkit-transform-origin: 100px 100px;
	display:none;

	}

	#right {
	position: absolute;
	top: 100px;
	left: 0px;
	height: 100px;
	width: 200px;
	border-radius: 0 0 100px 100px;
	-moz-border-radius: 0 0 100px 100px;
	-webkit-border-radius: 0 0 100px 100px;
	background:blue;
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform-origin: 100px 0px;
	-moz-transform-origin: 100px 0px;
	-webkit-transform-origin: 100px 0px;
	display:none;
	}

	#top {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 200px;
	height: 200px;
	z-index: 100px;
	}

	</style>
	</head>
	<body>
	<div id="bottom">
	<svg id="circleProcess" xmlns="http://www.w3.org/2000/svg">
	<circle id="circle" cx="100" cy="100" r="100" stroke-width="5" stroke-dashoffset="0%"></circle>
	</svg>
	<div id="left"></div>
	<div id="right"></div>
	</div>
	<div id="top"></div>
	</body>
	</html>
	<script>
	jQuery(function($){
	var polygons = [
	[[0, 0], [200, 0], [100, 100], [0, 200]],
	[[100, 100], [200, 0], [200, 200], [0, 200]]
	];

	var $left = $('#left');
	var $right = $('#right');
	var $top = $('#top');
	var oldIndex = -1;

	$top.on('mousemove', function(e){
	if( pointInsideCircle([e.offsetX, e.offsetY],[100, 100], 100) ){

	var index = inside([e.offsetX, e.offsetY], polygons);
	if(index===oldIndex){
	return;
	}
	if (index === 0) {
	$left.show();
	$right.hide();
	}
	if (index === 1) {
	$left.hide();
	$right.show();
	}
	oldIndex = index;

	} else {
	$left.hide();
	$right.hide();
	oldIndex = -1;
	}
	});

	$top.on('mouseleave', function(){
	$left.hide();
	$right.hide();
	oldIndex = -1;
	});

	function inside(point, polygons){
	for(var i=1; i>=0; i--){
	if(pointInsidePolygon(point, polygons[i])){
	return i;
	}
	}
	return -1;
	}

	function pointInsidePolygon(point, vs) {
	// ray-casting algorithm based on
	// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

	var x = point[0], y = point[1];

	var inside = false;
	for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
	var xi = vs[i][0], yi = vs[i][1];
	var xj = vs[j][0], yj = vs[j][1];

	var intersect = ((yi > y) != (yj > y))
	&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
	if (intersect) inside = !inside;
	}

	return inside;
	}

	function pointInsideCircle(point, circle, r) {
	if (r===0) return false
	var dx = circle[0] - point[0]
	var dy = circle[1] - point[1]
	return dx * dx + dy * dy <= r * r
	}

	});
	</script>