{"ScriptPreparationCode":"var colorPaletteCTX = document.getElementById(\u0027colorPalette\u0027).getContext(\u00272d\u0027);\r\nvar boundry = document.getElementById(\u0027colorPalette\u0027).getBoundingClientRect();\r\n\r\nif (colorPaletteCTX) {\r\n const {\r\n width,\r\n height\r\n } = colorPaletteCTX.canvas;\r\n colorPaletteCTX.clearRect(0, 0, width, height);\r\n const gradientH = colorPaletteCTX.createLinearGradient(0, 0, width, 0);\r\n gradientH.addColorStop(0, \u0027rgba(255,255,255,1)\u0027);\r\n gradientH.addColorStop(1, \u0027rgba(255,0,0,1)\u0027);\r\n colorPaletteCTX.fillStyle = gradientH;\r\n colorPaletteCTX.fillRect(0, 0, width, height);\r\n\r\n const gradientV = colorPaletteCTX.createLinearGradient(0, 0, 0, height);\r\n gradientV.addColorStop(0, \u0027rgba(0,0,0,0)\u0027);\r\n gradientV.addColorStop(1, \u0027rgba(0,0,0,1)\u0027);\r\n colorPaletteCTX.fillStyle = gradientV;\r\n colorPaletteCTX.fillRect(0, 0, width, height);\r\n}\r\n\r\nfunction clamp(value, min, max) {\r\n return Math.max(0, Math.min(1, value - min / max - min));\r\n};\r\n\r\nfunction rgb2Hex(red, green, blue) {\r\n let _r = red.toString(16);\r\n let _g = green.toString(16);\r\n let _b = blue.toString(16);\r\n\r\n // prepend 0s if necessary\r\n if (_r.length === 1) _r = \u00270\u0027 \u002B _r;\r\n if (_g.length === 1) _g = \u00270\u0027 \u002B _g;\r\n if (_b.length === 1) _b = \u00270\u0027 \u002B _b;\r\n\r\n return \u0060#${_r}${_g}${_b}\u0060;\r\n};\r\n\r\nfunction hsv2Rgb(hue, sat, val) {\r\n const f = (n, k = (n \u002B hue / 60) % 6) =\u003E\r\n val - val * sat * Math.max(Math.min(k, 4 - k, 1), 0);\r\n return [\r\n Math.round(f(5) * 255),\r\n Math.round(f(3) * 255),\r\n Math.round(f(1) * 255),\r\n ];\r\n};\r\n\r\nfunction hsv2Hex(hue, sat, val) {\r\n const [r, g, b] = hsv2Rgb(hue, sat, val);\r\n return rgb2Hex(r, g, b);\r\n};\r\n\r\nfunction randomInteger(min, max) {\r\n return Math.floor(Math.random() * (max - min \u002B 1)) \u002B min;\r\n}","TestCases":[{"Name":"Pick color by getImageData()","Code":"const x = randomInteger(0,227);\r\nconst y = randomInteger(0,227);\r\nconst pixel = colorPaletteCTX.getImageData(x, y, 1, 1)[\u0022data\u0022];\r\nconsole.log(rgb2Hex(pixel[0], pixel[1], pixel[2]));","IsDeferred":false},{"Name":"pick color by hsv","Code":"const {\r\n top,\r\n left,\r\n width,\r\n height,\r\n} = boundry;\r\nconst x = randomInteger(0,227);\r\nconst y = randomInteger(0,227);\r\nconsole.log(hsv2Hex(0, clamp(Math.max(0, x - left) / width, 0, 1), clamp((height - Math.max(0, y - top)) / height, 0, 1)));","IsDeferred":false}]}