CSS color formats expression

[XHXIAIEIN]

Reviewed guidelines

• I have read and understand the suggestion guidelines

Checked for duplicate suggestions

• I checked for existing similar suggestions

Summary

The current color expressions are not particularly user-friendly, which causes confusion for many novice users.

Original post:
#83

Construct's color values are a bit of a hack: they originated as a way to get an RGB value in to a single number, and at some point we invented a second format, so there's two kinds of color numbers.

I think it would probably be better to entirely replace colors with a better system, perhaps based on strings in CSS color formats, like "#FF0000 and "rgb(255, 0, 0)", "hsl(150 30% 60%)" etc. That would be a bigger task though and might be tricky to handle backwards compatibility.

Possible workarounds or alternatives

Currently, the ColorValue expressions is not a generic color code.

RGB	ColorValue
255, 255, 255	-281492157629439
255, 0, 0	-281474976711679
0, 255, 0	-17179870207
0, 0, 255	-1049599
0, 0, 0	-1023

Possible workarounds or alternatives

Although we can use some special methods to convert ColorValue into RGB, But this is a Hacker.

C3.PackRGB = function PackRGB(red, green, blue)
C3.PackRGBAEx = function PackRGBAEx(red, green, blue, alpha)
C3.PackRGBEx = function PackRGBEx(red, green, blue)
C3.GetRValue = function GetRValue(rgb)
C3.GetGValue = function GetGValue(rgb)
C3.GetBValue = function GetBValue(rgb)
C3.GetAValue = function GetAValue(rgb)

ColorValue Convert.c3p

Based on discussions by R0J0hound, Federico Calchera in the community. This is an Solution example of how to make ColorValue expression can be conver to RGB or Hex.

ColorValueConvert.c3p.zip

const ALPHAEX_SHIFT = 1024;
const ALPHAEX_MAX = 1023;
const RGBEX_SHIFT = 16384;
const RGBEX_MAX = 8191;

const RGB_MASK = [255, 65280, 16711680];
const RGB_SHIFT = [0, 8, 16];
const RGB_FACTOR = [RGBEX_SHIFT * RGBEX_SHIFT * ALPHAEX_SHIFT, RGBEX_SHIFT * ALPHAEX_SHIFT, ALPHAEX_SHIFT]; 

function getColorValue(rgb, index) {
    if (rgb >= 0) {
        return (rgb & RGB_MASK[index]) >> RGB_SHIFT[index];
    } else {
        let v = Math.floor(-rgb % RGB_FACTOR[index] / RGB_FACTOR[index] / ALPHAEX_SHIFT);
        if (v > RGBEX_MAX) v -= RGBEX_SHIFT;
        return v / 1024;
    }
}

function GetRValue(rgb) {
    return getColorValue(rgb, 0) / 255;
};

function GetGValue(rgb) {
    return getColorValue(rgb, 1) / 255;
};

function GetBValue(rgb) {
    return getColorValue(rgb, 2) / 255;
};

function isNegativeZero(n) {
    return Object.is(n, -0);
}

function GetAValue(rgb) {
    if (isNegativeZero(rgb))
        return 0;
    else if (rgb >= 0)
        return 1;
    else {
        const v = Math.floor(-rgb % ALPHAEX_SHIFT);
        return v / ALPHAEX_MAX;
    }
};

function convertTo255(value) {
  return Math.round(value * 255);
}

// Set Global Var
const colorValue = runtime.globalVars.colorValue;
runtime.globalVars.r = convertTo255(C3.GetRValue(colorValue));
runtime.globalVars.g = convertTo255(C3.GetGValue(colorValue));
runtime.globalVars.b = convertTo255(C3.GetBValue(colorValue));
runtime.globalVars.a = convertTo255(C3.GetAValue(colorValue));

Proposed solution

Plan 1:
Support 'HexColorValue' expression. He will return a string of hex colors code. Uppercase, and withou # sign.

FFFFFF

Plan 2:
Support 'ColorValue' expression with parameter.

ColorValue("R")
ColorValue("G")
ColorValue("B")
ColorValue("A")

or

ColorValue(0)
ColorValue(1)
ColorValue(2)
ColorValue(3)

plan 3:
Add a expression to convert colorValue back to rgbEX

Why is this idea important?

This would make handling color, dynamic palettes, player colors etc much easier. As currently having to transfer colors or needing to store each channel is very painful.

Additional remarks

No response