Color Position Finder

Find the position of a color on the RGB Cube and hue hexagon.

by Noreh AD

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="main">
	<div id="color">
		<input type="search" placeholder="r,g,b" />
		<input type="color" />
	</div>
	<div id="preview">
		<div id="cube">
			<canvas id="canvasCube" width="250" height="250"></canvas>
			<img...

CSS

body {
  margin: 0;
  background: gainsboro;
}
#main {
  display: table;
  margin: 10px;
}
#color {
  margin-bottom: 10px;
}
#color input {
  box-sizing: border-box;
}
#color input[type="search"] {
  font-family: consolas;
  padding: 2px;
}
#preview {
  white-space: nowrap;
}
#preview > div {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
#preview canvas {
  display: block;
  background-color: white;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}
#preview img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .5;
}
#preview #cube		 { width: 250px; }
#preview #projection { width: 235px; }
#preview #cube img	 { width: 250px;}
#preview #tilted img { height: 300; }
#preview #hexagon canvas {
  background-image: url("http://i1115.photobucket.com/albums/k544/akinuri/hexagon.png");
  background-size: contain;
}
p {
  font-family: Consolas;
  font-size: 13px
}

JavaScript

/* ==================== Draw Functions ==================== */
function drawPolygon(context, x, y, radius, sides) {
	if (sides < 3) return;
	var a = (Math.PI * 2) / sides;
	context.beginPath();
	context.moveTo(radius, 0);
	for (var i = 1; i < sides; i++) {
		context.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
	}
	context.closePath();
	context.stroke();
}

function drawLine(context, x, y, angle, length) {
	var target = calcPos(x, y, angle, length);
	context.beginPath();
	context.moveTo(x,y);
	context.lineTo(target.x, target.y);
	context.stroke();
	return target;
}

function drawArrowHead(context, lineEnd, lineAngle, width) {
	var topCorner	 = calcPos(lineEnd.x, lineEnd.y, lineAngle + 180 + 30, width);
	var bottomCorner = calcPos(topCorner.x, topCorner.y, lineAngle + 90, width);
	context.beginPath();
	context.moveTo(lineEnd.x, lineEnd.y);
	context.lineTo(topCorner.x, topCorner.y);
	context.lineTo(bottomCorner.x, bottomCorner.y);
	context.closePath();
	context.fillStyle = context.strokeStyle;
	context.fill();
	context.stroke();
}

function drawArrow(context, x, y, angle, length, arrowHeadWidth) {
	var end = drawLine(context, x, y, angle, length);
	drawArrowHead(context, end, angle, arrowHeadWidth);
	return end;
}

function calcPos(x, y, angle, length) {
	angle *= Math.PI / 180;
	var pos = {};
	pos.x = Math.round(x + length * Math.cos(angle));
	pos.y = Math.round(y + length * Math.sin(angle));
	return pos;
}

function drawIntersect(context, pos, shape) {
	context.setLineDash([3,3]);
	context.strokeStyle = "rgba(0,0,0,.25)";
	drawLine(context, pos.x, pos.y, shape.axes.r.angle, shape.context.canvas.width);
	drawLine(context, pos.x, pos.y, shape.axes.r.angle, -shape.context.canvas.width);
	drawLine(context, pos.x, pos.y, shape.axes.g.angle, shape.context.canvas.width);
	drawLine(context, pos.x, pos.y, shape.axes.g.angle, -shape.context.canvas.width);
	drawLine(context, pos.x, pos.y, shape.axes.b.angle, shape.context.canvas.width);
	drawLine(context, pos.x, pos.y,...