language-agnostic - करन - बिजली मीटर रीडिंग रोक




बिजली मीटर के लिए लाल और हरे रंग के बीच रंग उत्पन्न करें? (13)

मैं एक जावा गेम लिख रहा हूं और मैं एक पावर मीटर को कार्यान्वित करना चाहता हूं कि आप कुछ शूट करने जा रहे हैं।

मुझे एक ऐसा फ़ंक्शन लिखना होगा जो 0 - 100 के बीच int लेता है, और उस संख्या के आधार पर कितना अधिक है, यह ग्रीन (0 पावर स्केल पर 0) और लाल (पावर स्केल पर 100) के बीच एक रंग लौटाएगा।

वॉल्यूम नियंत्रण कैसे काम करते हैं:

हरे और लाल के बीच रंग उत्पन्न करने के लिए मुझे रंग के लाल, हरे और नीले रंग के घटकों पर क्या करने की ज़रूरत है?

तो, मैं कह सकता हूं, getColor(80) और यह एक संतरे रंग (आर, जी, बी में इसके मूल्य) या getColor(10) वापस करेगा जो एक और हरा / पीला आरजीबी मूल्य वापस करेगा।

मुझे पता है कि मुझे नए रंग के लिए आर, जी, बी मानों के घटकों को बढ़ाने की जरूरत है, लेकिन मुझे पता नहीं है कि रंग ग्रीन-रेड से बदलाव के रूप में क्या ऊपर या नीचे जाता है।

प्रगति:

मैं एचएसवी / एचएसबी कलर स्पेस का उपयोग कर समाप्त हुआ क्योंकि मुझे धीरे-धीरे बेहतर (बीच में कोई गहरा भूरा नहीं) पसंद आया।

मैं जिस फ़ंक्शन का उपयोग करता था वह था:

public Color getColor(double power)
{
    double H = power * 0.4; // Hue (note 0.4 = Green, see huge chart below)
    double S = 0.9; // Saturation
    double B = 0.9; // Brightness

    return Color.getHSBColor((float)H, (float)S, (float)B);
}

जहां "पावर" 0.0 और 1.0 के बीच एक संख्या है। 0.0 एक चमकदार लाल वापस आ जाएगा, 1.0 एक उज्ज्वल हरा वापस आ जाएगा।

जावा ह्यू चार्ट:


आपको रंग घटकों को रैखिक रूप से इंटरपोलेट (एलईआरपी) की आवश्यकता है। यहां बताया गया है कि यह सामान्य रूप से कैसे किया जाता है, प्रारंभ मूल्य v0 , एक अंत मूल्य v1 और आवश्यक अनुपात (0.0 और 1.0 के बीच एक सामान्यीकृत फ्लोट) दिया जाता है:

v = v0 + ratio * (v1 - v0)

यह वी 0 देता है जब अनुपात 0.0 होता है, v1 जब अनुपात 1.0 होता है, और अन्य मामलों में सबकुछ होता है।

आप या तो आरजीबी घटकों पर या एचएसवी या एचएलएस जैसी कुछ अन्य रंग योजनाओं का उपयोग कर सकते हैं। उत्तरार्द्ध दो अधिक दृष्टि से प्रसन्न होंगे, क्योंकि वे रंग और चमक वाले घटकों पर काम करते हैं जो हमारे रंग की धारणा को बेहतर तरीके से मानचित्र बनाते हैं।


पायथन 2.7 में:

import colorsys

def get_rgb_from_hue_spectrum(percent, start_hue, end_hue):
    # spectrum is red (0.0), orange, yellow, green, blue, indigo, violet (0.9)
    hue = percent * (end_hue - start_hue) + start_hue
    lightness = 0.5
    saturation = 1
    r, g, b = colorsys.hls_to_rgb(hue, lightness, saturation)
    return r * 255, g * 255, b * 255

# from green to red:
get_rgb_from_hue_spectrum(percent, 0.3, 0.0)

# or red to green:
get_rgb_from_hue_spectrum(percent, 0.0, 0.3)

प्रतिशत निश्चित value / max_value । या यदि आपका स्केल 0 से शुरू नहीं होता है (value - min_value) / (max_value - min_value)


मैं कहूंगा कि आप एचएसवी स्पेस (जिसमें केंद्र में थोड़ा-चमकदार पीला है) और आरजीबी स्पेस में एक लाइन सेगमेंट (जिसमें केंद्र में बदसूरत ब्राउन है) में एक लाइन सेगमेंट के बीच कुछ चाहिए। मैं इसका उपयोग करूंगा, जहां power = 0 हरा देगा, power = 50 थोड़ा हल्का पीला देगा, और power = 100 लाल देगा।

blue = 0;
green = 255 * sqrt( cos ( power * PI / 200 ));
red = 255 * sqrt( sin ( power * PI / 200 )); 

मैंने एक छोटा सा फ़ंक्शन बनाया है जो आपको प्रतिशत मान के लिए आरजीबी पूर्णांक मान देता है:

private int getGreenToRedGradientByValue(int currentValue, int maxValue)
{
    int r = ( (255 * currentValue) / maxValue );
    int g = ( 255 * (maxValue-currentValue) ) / maxValue;
    int b = 0;
    return ((r&0x0ff)<<16)|((g&0x0ff)<<8)|(b&0x0ff);
}

तो यदि आपका वर्तमान वैल्यू 50 है और आपका अधिकतम वैल्यू 100 है, तो यह फ़ंक्शन आपको आवश्यक रंग लौटाएगा, इसलिए यदि आप इस फ़ंक्शन को प्रतिशत मान के साथ लूप करते हैं, तो आपका रंग मान हरे से लाल हो जाएगा। खराब स्पष्टीकरण के लिए खेद है


यदि आप स्वीकार किए गए उत्तर की तरह एक हरा-पीला-लाल प्रतिनिधित्व चाहते हैं तो सुझाव दें।

http://jsfiddle.net/0awncw5u/2/

function percentToRGB(percent) {
    if (percent === 100) {
        percent = 99
    }
    var r, g, b;

    if (percent < 50) {
        // green to yellow
        r = Math.floor(255 * (percent / 50));
        g = 255;

    } else {
        // yellow to red
        r = 255;
        g = Math.floor(255 * ((50 - percent % 50) / 50));
    }
    b = 0;

    return "rgb(" + r + "," + g + "," + b + ")";
}


function render(i) {
    var item = "<li style='background-color:" + percentToRGB(i) + "'>" + i + "</li>";
    $("ul").append(item);
}

function repeat(fn, times) {
    for (var i = 0; i < times; i++) fn(i);
}


repeat(render, 100);
li {
    font-size:8px;
    height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul></ul>


यदि आपको सीएसएस (मिनी संस्करण 2.1) में इस तरह के ढाल (वास्तव में उलट) की आवश्यकता है तो आप भी एचएसएल का उपयोग कर सकते हैं।

मान लीजिए कि आप एक AngularJs टेम्पलेट में हैं और मान 0 से 1 तक की संख्या है और आप एक तत्व (पृष्ठभूमि या टेक्स्ट रंग) शैली बनाना चाहते हैं ...

hsl({{ value * 120}}, 50%, 35%)

पहला मूल्य: डिग्री (0 लाल, 120 हरा) दूसरा मूल्य: संतृप्ति (50% तटस्थ है) तीसरा मान: हल्कापन (50% तटस्थ)

यहां एक अच्छा लेख here

विकिपीडिया पर सिद्धांत


यह लाल से पीले और फिर हरे रंग में भिन्न होगा
मूल्य 0 - 100 से भिन्न होता है

-(UIColor*) redToGreenColorWithPosition:(int) value {

    double R, G;
    if (value > 50) {
        R = (255 * (100 - value)/ 50) ;
        G = 255;
    }else {
        R = 255;
        G = (255 * (value*2)) / 100;
    }

    return [UIColor colorWithRed:R/255.0f green:G/255.0f blue:0.0f alpha:1.0f];
}

लघु प्रतिलिपि 'उत्तर दें ...

जावा स्टडी पर:

int getTrafficlightColor(double value){
    return java.awt.Color.HSBtoRGB((float)value/3f, 1f, 1f);
}

एंड्रॉइड पर:

int getTrafficlightColor(double value){
    return android.graphics.Color.HSVToColor(new float[]{(float)value*120f,1f,1f});
}

नोट: मान 0 से 1 के बीच एक संख्या है जो लाल-से-हरे रंग की स्थिति को इंगित करता है।


सिमुकाल के समाधान का Objective-C संस्करण यहां दिया गया है:

- (UIColor*) colorForCurrentLevel:(float)level
{
    double hue = level * 0.4; // Hue (note 0.4 = Green)
    double saturation = 0.9; // Saturation
    double brightness = 0.9; // Brightness

    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1.0];
}

0.0 और 1.0 बीच स्तर कहाँ होगा।
उम्मीद है कि यह किसी की मदद करता है!


स्वयं निहित उदाहरण

<html>
<head>
<script>
//--------------------------------------------------------------------------
function gradient(left, mid, right)
{
    var obj = {}

    var lt50 = {"r":(mid.r-left.r)/50.0,
                "g":(mid.g-left.g)/50.0,
                "b":(mid.b-left.b)/50.0}
    var gt50 = {"r":(right.r-mid.r)/50.0,
                "g":(right.g-mid.g)/50.0,
                "b":(right.b-mid.b)/50.0}

    obj.getColor = function(percent) {
        if (percent == 50.0) {
            return mid;
        }
        if (percent < 50.0) {
            return "rgb("+Math.floor(left.r+lt50.r*percent+0.5)+","+
                          Math.floor(left.g+lt50.g*percent+0.5)+","+
                          Math.floor(left.b+lt50.b*percent+0.5)+")";
        }
        var p2 = percent-50.0;
        return "rgb("+Math.floor(mid.r+gt50.r*p2+0.5)+","+
                      Math.floor(mid.g+gt50.g*p2+0.5)+","+
                      Math.floor(mid.b+gt50.b*p2+0.5)+")";
    }

    return obj;
}

//--------------------------------------------------------------------------
var g_gradient = gradient( {"r":255, "g":20, "b":20},  // Left is red
                           {"r":255, "g":255, "b":20}, // Middle is yellow
                           {"r":20, "g":255, "b":20} ); // right is green

//--------------------------------------------------------------------------
function updateColor()
{
    var percent = document.getElementById('idtext').value.length;
    var oscore = document.getElementById('idscore');

    if (percent > 100.0) {
        percent = 100.0;
    }
    if (percent < 0.0) {
        percent = 0.0;
    }
    var col = g_gradient.getColor(percent)
    oscore.style['background-color'] = col;
    oscore.innerHTML = percent + '%';
}

</script>
</head>
<body onLoad="updateColor()">
<input size='100' placeholder='type text here' id='idtext' type="text" oninput="updateColor()" />
<br />
<br />
<div id='idscore' style='text-align:center; width:200px; border-style:solid;
     border-color:black; border-width:1px; height:20px;'> </div>
</body>
</html>

स्वीकृत उत्तर ने वास्तव में सवाल का जवाब भी नहीं दिया ...

सी ++

यहां मेरे इंजन से एक सरल सी ++ कोड सेगमेंट है जो तीन मनमानी रंगों के बीच रैखिक रूप से और कुशलता से इंटरपोल करता है:

const MATH::FLOAT4 color1(0.0f, 1.0f, 0.0f, 1.0f);  // Green
const MATH::FLOAT4 color2(1.0f, 1.0f, 0.0f, 1.0f);  // Yellow
const MATH::FLOAT4 color3(1.0f, 0.0f, 0.0f, 1.0f);  // Red

MATH::FLOAT4 get_interpolated_color(float interpolation_factor)
{
    const float factor_color1 = std::max(interpolation_factor - 0.5f, 0.0f);
    const float factor_color2 = 0.5f - fabs(0.5f - interpolation_factor);
    const float factor_color3 = std::max(0.5f - interpolation_factor, 0.0f);

    MATH::FLOAT4 color;

    color.x = (color1.x * factor_color1 +
               color2.x * factor_color2 +
               color3.x * factor_color3) * 2.0f;

    color.y = (color1.y * factor_color1 +
               color2.y * factor_color2 +
               color3.y * factor_color3) * 2.0f;

    color.z = (color1.z * factor_color1 +
               color2.z * factor_color2 +
               color3.z * factor_color3) * 2.0f;

    color.w = 1.0f;

    return(color);
}

interpolation_factor 0.0 ... 1.0 की सीमा में माना जाता है 0.0 ... 1.0
रंग 0.0 ... 1.0 की सीमा में माना जाता है 0.0 ... 1.0 (उदाहरण के लिए ओपनजीएल के लिए)।

सी#

सी # में लिखा गया वही फ़ंक्शन यहां दिया गया है:

private readonly Color mColor1 = Color.FromArgb(255, 0, 255, 0);
private readonly Color mColor2 = Color.FromArgb(255, 255, 255, 0);
private readonly Color mColor3 = Color.FromArgb(255, 255, 0, 0);

private Color GetInterpolatedColor(double interpolationFactor)
{
    double interpolationFactor1 = Math.Max(interpolationFactor - 0.5, 0.0);
    double interpolationFactor2 = 0.5 - Math.Abs(0.5 - interpolationFactor);
    double interpolationFactor3 = Math.Max(0.5 - interpolationFactor, 0.0);

    return (Color.FromArgb(255,
                (byte)((mColor1.R * interpolationFactor1 +
                        mColor2.R * interpolationFactor2 +
                        mColor3.R * interpolationFactor3) * 2.0),

                (byte)((mColor1.G * interpolationFactor1 +
                        mColor2.G * interpolationFactor2 +
                        mColor3.G * interpolationFactor3) * 2.0),

                (byte)((mColor1.B * interpolationFactor1 +
                        mColor2.B * interpolationFactor2 +
                        mColor3.B * interpolationFactor3) * 2.0)));
}

interpolationFactor 0.0 ... 1.0 की सीमा में माना जाता है 0.0 ... 1.0
रंग 0 ... 255 की सीमा में माना जाता है 0 ... 255


हरे और लाल के बीच रैखिक रूप से इंटरपोलिंग लगभग काम करना चाहिए, सिवाय इसके कि बीच में गंदे भूरे रंग का रंग होगा।

सबसे लचीला और सबसे अच्छा दिखने वाला समाधान एक छवि फ़ाइल कहीं है जिसमें आपके इच्छित रंग रैंप है। और उसके बाद पिक्सेल मान को देखो। इसमें लचीलापन है कि आप ढाल को ठीक से ट्विक कर सकते हैं।

यदि आप अभी भी कोड से ऐसा करना चाहते हैं, तो बाएं तरफ हरे और पीले रंग के रंगों के बीच और दाएं तरफ पीले और लाल रंग के बीच अंतर करना संभवतः संभव है। आरजीबी स्पेस में, हरा है (आर = 0, जी = 255, बी = 0), पीला है (आर = 255, जी = 255, बी = 0), लाल है (आर = 255, जी = 0, बी = 0 ) - यह माना जाता है कि प्रत्येक रंग घटक 0 से 255 तक जाता है।


import java.awt.Color;

public class ColorUtils {

    public static Color interpolate(Color start, Color end, float p) {
        float[] startHSB = Color.RGBtoHSB(start.getRed(), start.getGreen(), start.getBlue(), null);
        float[] endHSB = Color.RGBtoHSB(end.getRed(), end.getGreen(), end.getBlue(), null);

        float brightness = (startHSB[2] + endHSB[2]) / 2;
        float saturation = (startHSB[1] + endHSB[1]) / 2;

        float hueMax = 0;
        float hueMin = 0;
        if (startHSB[0] > endHSB[0]) {
            hueMax = startHSB[0];
            hueMin = endHSB[0];
        } else {
            hueMin = startHSB[0];
            hueMax = endHSB[0];
        }

        float hue = ((hueMax - hueMin) * p) + hueMin;

        return Color.getHSBColor(hue, saturation, brightness);
    }
}




interpolation