color_wheel/index.html at master · rkettering/color_wheel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
	<head>
		<style>
			#myCanvas {
				border-radius: 100%;
			}
		</style>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
		<script>

			/**
			 * Converts an HSL color value to RGB. Conversion formula
			 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
			 * Assumes h, s, and l are contained in the set [0, 1] and
			 * returns r, g, and b in the set [0, 255].
			 *
			 * @param   {number}  h       The hue
			 * @param   {number}  s       The saturation
			 * @param   {number}  l       The lightness
			 * @return  {Array}           The RGB representation
			 */
			function hslToRgb(h, s, l){
				var r, g, b;

				if(s == 0){
					r = g = b = l; // achromatic
				}else{
					var hue2rgb = function hue2rgb(p, q, t){
						if(t < 0) t += 1;
						if(t > 1) t -= 1;
						if(t < 1/6) return p + (q - p) * 6 * t;
						if(t < 1/2) return q;
						if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
						return p;
					}

					var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
					var p = 2 * l - q;
					r = hue2rgb(p, q, h + 1/3);
					g = hue2rgb(p, q, h);
					b = hue2rgb(p, q, h - 1/3);
				}

				return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
			}

			var canvasWidth = 200;


			function cartToPolar(x, y){
				var _x = x - canvasWidth/2;
				var _y = y - canvasWidth/2;

				return { angleRad: Math.atan2( _x, _y ), radius: Math.hypot( _x, _y) };
			}

			function polarToHSL( params ){

				return {
					hue:			params.angleRad / (2 * Math.PI),
					saturation:		Math.abs(params.radius / (canvasWidth/2)),
					lightness:		0.5
				};
			}

			function launch_app (){
				var canvas = document.querySelector('#myCanvas');
				var ctx = canvas.getContext('2d');

				_.map(_.range(canvasWidth), function(xValue, xIndex){
					_.map(_.range(canvasWidth), function(yValue, yIndex){
						var HSLColor = polarToHSL(cartToPolar(xIndex, yIndex));
						var RGBColor = hslToRgb(HSLColor.hue, HSLColor.saturation, HSLColor.lightness);


						ctx.fillStyle = "rgba(" + RGBColor[0] + "," + RGBColor[1] + "," + RGBColor[2] + ",1.0)";
						ctx.fillRect(xIndex, yIndex, 1, 1);
					});
				});
			}
		</script>
	</head>
	<body onload="launch_app();">
		<canvas id="myCanvas" width="200" height="200"></canvas>
	</body>
</html>