@@ -9,7 +9,7 @@ ctx.height = 300;
99
1010function drawColorPicker ( ) {
1111 /**
12- * Color picker inspired by:
12+ * Color picker inspired by:
1313 * https://medium.com/@bantic/hand-coding-a-color-wheel-with-canvas-78256c9d7d43
1414 */
1515 let radius = 150 ;
@@ -18,30 +18,30 @@ function drawColorPicker() {
1818
1919 for ( let x = - radius ; x < radius ; x ++ ) {
2020 for ( let y = - radius ; y < radius ; y ++ ) {
21-
21+
2222 let [ r , phi ] = xy2polar ( x , y ) ;
23-
23+
2424 if ( r > radius ) {
2525 // skip all (x,y) coordinates that are outside of the circle
2626 continue ;
2727 }
28-
28+
2929 let deg = rad2deg ( phi ) ;
30-
30+
3131 // Figure out the starting index of this pixel in the image data array.
3232 let rowLength = 2 * radius ;
3333 let adjustedX = x + radius ; // convert x from [-50, 50] to [0, 100] (the coordinates of the image data array)
3434 let adjustedY = y + radius ; // convert y from [-50, 50] to [0, 100] (the coordinates of the image data array)
3535 let pixelWidth = 4 ; // each pixel requires 4 slots in the data array
3636 let index = ( adjustedX + ( adjustedY * rowLength ) ) * pixelWidth ;
37-
37+
3838 let hue = deg ;
3939 let saturation = r / radius ;
4040 let value = 1.0 ;
41-
41+
4242 let [ red , green , blue ] = hsv2rgb ( hue , saturation , value ) ;
4343 let alpha = 255 ;
44-
44+
4545 data [ index ] = red ;
4646 data [ index + 1 ] = green ;
4747 data [ index + 2 ] = blue ;
@@ -127,4 +127,3 @@ function getCursorPosition(canvas, event) {
127127
128128drawColorPicker ( ) ;
129129canvas . addEventListener ( 'mousedown' , onColorPick ) ;
130-
0 commit comments