@@ -9,7 +9,7 @@ ctx.height = 300;
9
9
10
10
function drawColorPicker ( ) {
11
11
/**
12
- * Color picker inspired by:
12
+ * Color picker inspired by:
13
13
* https://medium.com/@bantic/hand-coding-a-color-wheel-with-canvas-78256c9d7d43
14
14
*/
15
15
let radius = 150 ;
@@ -18,30 +18,30 @@ function drawColorPicker() {
18
18
19
19
for ( let x = - radius ; x < radius ; x ++ ) {
20
20
for ( let y = - radius ; y < radius ; y ++ ) {
21
-
21
+
22
22
let [ r , phi ] = xy2polar ( x , y ) ;
23
-
23
+
24
24
if ( r > radius ) {
25
25
// skip all (x,y) coordinates that are outside of the circle
26
26
continue ;
27
27
}
28
-
28
+
29
29
let deg = rad2deg ( phi ) ;
30
-
30
+
31
31
// Figure out the starting index of this pixel in the image data array.
32
32
let rowLength = 2 * radius ;
33
33
let adjustedX = x + radius ; // convert x from [-50, 50] to [0, 100] (the coordinates of the image data array)
34
34
let adjustedY = y + radius ; // convert y from [-50, 50] to [0, 100] (the coordinates of the image data array)
35
35
let pixelWidth = 4 ; // each pixel requires 4 slots in the data array
36
36
let index = ( adjustedX + ( adjustedY * rowLength ) ) * pixelWidth ;
37
-
37
+
38
38
let hue = deg ;
39
39
let saturation = r / radius ;
40
40
let value = 1.0 ;
41
-
41
+
42
42
let [ red , green , blue ] = hsv2rgb ( hue , saturation , value ) ;
43
43
let alpha = 255 ;
44
-
44
+
45
45
data [ index ] = red ;
46
46
data [ index + 1 ] = green ;
47
47
data [ index + 2 ] = blue ;
@@ -127,4 +127,3 @@ function getCursorPosition(canvas, event) {
127
127
128
128
drawColorPicker ( ) ;
129
129
canvas . addEventListener ( 'mousedown' , onColorPick ) ;
130
-
0 commit comments