javascript Color Conversion (Code Snippet)

JavaScript Color Conversion

Sometime colors can be a pain when a program or tool uses different types of color format through out the program, samegoes with CopperCube it uses different color formats for different situations, which makes everything so confusing and the color might not appear as expected. That is the exact same reason why I have created these code snippets available to you. In CopperCube extension color parameter uses decimal colors, while the editor's vertex color, and overlay colors uses RGB color, and then it becomes more tedious some of them use a clamped value between 0-1 or some uses the default RGB value of 0-255. I wrote this functions when working with shaders and on some personal projects, and this can sort out all the problems related to colors in Coppercube.
As we all know the draw rectangles API command uses the hex color and allows to draw only with transparency, you can't draw opaque rectangles with the default scripting API, but with the help of these functions you can overcome that problem easily. On a sidenote if you are interested in working with shaders then HLSL shaders use clamped value between 0-1.

Below you will find 2 piece of code snippets, 3 javascript functions in total, the first one is to convert the decimal color code into a RGB color so that you can easily use the CopperCube extension's "color" property type parameter while writing custom actions or behaviors.
The second code Snippet will convert RGBA value into a hex color to make the draw rectangles work with transparency and you can easily adjust the color value.
If you want you can further merge all the functions together for better use of the function.

Color conversion from decimal color to RGB, works with CopperCube color property type parameter.

// Fixing the Color Property type Parameter of action to get RGB value and clamp them between 0 and 1.
function RGB(decimalcolorcode)
{
var color = (decimalcolorcode); // use the property type or put a decimal color value.
var Rr = (color & 0xff0000 ) >> 16; // get red color by bitwise operation
var Gg = (color & 0x00ff00) >> 8; // get green color by bitwise operation
var Bb = (color & 0x0000ff); // get blue color by bitwise operation
var RrGgBb = new vector3d(Rr,Gg,Bb);
var r = (Rr/255); // dividing red by 255 to clamp b/w 0-1
var g = (Gg/255); // dividing green by 255 to clamp b/w 0-1
var b = (Bb/255); // dividing blue by 255 to clamp b/w 0-1
var rgb = new vector3d (r,g,b); // final rgb value to use in the editor
return rgb;
}

the above function will return RGB value clamped between 0-1, if you want to use a RGB value with 0-255 then simply return "RrGgBb" instead of "rgb" in the last line of the function.

Color conversion from RGBA to Hex color, useful when drawing colored rectangles with javascript API.

//Color functions and color conversions.
//convert rgba(red,green,blue,and alpha) to hex color and return to draw rectangle with transparency
//return hexcolor value to be used to draw rectangle
function color(r,g,b,alpha)
{
var r = toHexcol(r); // get hex value for red
var g = toHexcol(g); // get hex value for green
var b = toHexcol(b); //get hex value for blue
var color = (alpha<<24) | ( "0x00"+r+g+b & 0x00ffffff); //return color with alpha transparency correction using bitwise operation
return color;
};
//Conversion of rgb to hex color
function toHexcol(rgb)
{
var hexColor = rgb.toString(16); //convert rgb color to string value
while (hexColor.length < 2) {hexColor = "0" + hexColor; } //get hex color from rgb string
return hexColor;
}

the above 2 functions will be used to convert RGBA color into a Hex color, this can be used to draw rectangles in CopperCube. You can use the function "color(R,G,B,A)" value and the function will update it with a hex color and will allow you to draw complete opaque or transparent rectangles in CopperCube, as you might already know by default CopperCube doesn't allow you to draw completely opaque rectangles but with the above code snippet you will be able to draw opaque rectangles as well.

That's all !

If the above code snippets help you, and you are using it in your project then it will appreciated if you give the credits, however it is not required. If you want you can support me by buying me a coffee ☕.

BUY ME A COFFEE

About

Neophyte is a website developed to provide tutorials, assets and source files of CopperCube projects.