Change color

by DOK_UA

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Change color</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>	   
	
</head>
<body>
	<div id = "background" style="height: 300px; width: 300px">


		<div id="rotateable">
			 <div id="rotate"></div>
		 </div>
	   
	   <div id="joy">
	   </div>
	   
	   </div>

<script src="script.js"></script>
</body>
</html>

CSS

body {
	background: #282828;
  }
  
  #background{
	height: 100%;
	width: 100%;
  position:absolute;
	background-color: gray;
	position:absolute
  }
  
  #joy {
	margin:100px 0px 0px 100px;
	width:100px;
	height:100px;
	position: absolute;
	border-radius: 50%;
	background: white;
  }
  
  #rotateable,#rotate {
	width:300px;
	height:300px;
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(90deg, #222, #444, #222);
  }

JavaScript

var degree; 
$('#rotateable').draggable({
  handle: '#rotate',
  opacity: 0.0001,
  helper: 'clone',
  drag: function(event) {
    var // get center of div to rotate
      pw = document.getElementById('rotateable'),
      pwBox = pw.getBoundingClientRect(),
    
      center_x = (pwBox.left + pwBox.right) / 2,
      center_y = (pwBox.top + pwBox.bottom) / 2,
      // get mouse position
      mouse_x = event.pageX,
      mouse_y = event.pageY,
      radians = Math.atan2(mouse_x - center_x, mouse_y - center_y),
     color = "hsl("+degree+", 50%, 50%)";
     degree = Math.round((radians * (180 / Math.PI) * -1) + 100); 
  
 		
  
    $('#rotate').css({
    	'background' : color
    });
    
   // alert(center_x);
    var rotateCSS = 'rotate(' + (degree + 170) + 'deg)';
    $('#rotateable').css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
  }
});

$('#joy').draggable({ 
  revert: 'invalid',
  revertDuration: 100,
  drag: function(event) {

    var vert = $('#joy').offset().top + 30,
		horiz = $('#joy').offset().left + 30,
  	    color = "hsl("+degree+", "+vert/3+"%, "+horiz/3+"%)";
    
 $('#rotate').css({
    	'background' : color
    });
}
});