Hey, I recently made a color picker for Roblox and I would appreciate any feedback I could get. Thanks!
Current Features Include:
- Saving/Loading of colors. Press OK to save, and press any desired color on the left sidebar to load. You may clear this history of colors by pressing the “Clear” button.
- Extreme color accuracy. If you cannot achieve a specific color that you may desire, you can manually enter the hex code or HSV/RGB values.
- Closing/opening of the color picker window. This allows you to get it out of the way when it’s not required.
- Dragging of the color picker window. If closing it isn’t suitable for you, you can simply drag it to another location.
Resources Used
GLSL Editor : To compile & see realtime GLSL script changes
EgoMoose: For providing the original GLSL script that renders a color circle, but with a few modifications:
// Can test this here:
// https://thebookofshaders.com/edit.php
#ifdef GL_ES
precision mediump float;
#endif
#define RADIUS 0.5
#define RING_RADIUS 0.5
#define PI 3.1415926535898
uniform vec2 u_resolution;
uniform float u_time;
// convert a vector2 to polar coordinates
vec2 polar(vec2 v) {
float r = sqrt(dot(v, v));
float phi = atan(v.y, v.x);
return vec2(r, phi);
}
// convert a radian that's between [-π, π] to degrees in the range [0, 360]
float RADtoDEG(float x) {
return ((x + PI) / (2.0 * PI)) * 360.0;
}
// vec3 HSVtoRGB(vec3 HSV) {
// float R = abs(HSV.x * 6.0 - 3.0) - 1.0;
// float G = 2.0 - abs(HSV.x * 6.0 - 2.0);
// float B = 2.0 - abs(HSV.x * 6.0 - 4.0);
// vec3 RGB = clamp(vec3(R, G, B), 0.0, 1.0);
// return ((RGB - 1.0) * HSV.y + 1.0) * HSV.z;
// }
// This variant ignores the (S) in HSV, to make the ring consistent
vec3 HSVtoRGB(vec3 HSV) {
float R = abs(HSV.x * 6.0 - 3.0) - 1.0;
float G = 2.0 - abs(HSV.x * 6.0 - 2.0);
float B = 2.0 - abs(HSV.x * 6.0 - 4.0);
vec3 RGB = clamp(vec3(R, G, B), 0.0, 1.0);
return ((RGB - 1.0) + 1.0) * HSV.z;
}
void main() {
float t = u_time * 0.1;
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec2 dist = st - vec2(0.5);
float alpha = 0.0;
vec2 p = polar(dist);
vec4 color;
if (dot(dist, dist) < RADIUS*RADIUS) {
alpha = 1.0;
color = vec4( HSVtoRGB(vec3(1.0-(RADtoDEG(p.y)/360.0), p.x / RADIUS, 1.0)) , alpha);
} else {
color = vec4(1, 1, 1, 1);
}
if (dot(dist, dist) < (((1.0-RING_RADIUS)*RADIUS)*RADIUS)) {
if (alpha == 1.0) {
color = vec4(1, 1, 1, 1);
}
}
gl_FragColor = color;
}
Notable Mentions
The UI was based on Photoshop’s color picker, with my own twists intertwined. If you do have any suggestions on what I could do differently, I would appreciate hearing it!
