Frequency to RGB

Question

I am looking for a way to convert a dynamic frequency signal to its corresponding color. and I found this script here:

<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">


function trim1 (str) {  
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function decimalToHex(d) {
    d = Math.round(d);
    var hex = d.toString(16);
    while (hex.length < 2) {
        hex = "0" + hex;
    }

    return hex;
}
function freqToNM() {
    freq = (document.getElementById("in").value);
    Slight = 299792458;
      convert();
   }

function convert() {

        var input = document.getElementById("in").value;
        input = trim1(input);
        var w = parseFloat(input);

    if (w >= 380 && w < 440)
    {
        red   = -(w - 440) / (440 - 380);
        green = 0.0;
        blue  = 1.0;
    }
    else if (w >= 440 && w < 490)
    {
        red   = 0.0;
        green = (w - 440) / (490 - 440);
        blue  = 1.0;
    }
    else if (w >= 490 && w < 510)
    {
        red   = 0.0;
        green = 1.0;
        blue  = -(w - 510) / (510 - 490);
    }
    else if (w >= 510 && w < 580)
    {
        red   = (w - 510) / (580 - 510);
        green = 1.0;
        blue  = 0.0;
    }
    else if (w >= 580 && w < 645)
    {
        red   = 1.0;
        green = -(w - 645) / (645 - 580);
        blue  = 0.0;
    }
    else if (w >= 645 && w < 781)
    {
        red   = 1.0;
        green = 0.0;
        blue  = 0.0;
    }
    else
    {
        red   = 0.0;
        green = 0.0;
        blue  = 0.0;
    }


    // Let the intensity fall off near the vision limits

    if (w >= 380 && w < 420)
        factor = 0.3 + 0.7*(w - 380) / (420 - 380);
    else if (w >= 420 && w < 701)
        factor = 1.0;
    else if (w >= 701 && w < 781)
        factor = 0.3 + 0.7*(780 - w) / (780 - 700);
    else
        factor = 0.0;

    var gamma = 0.80;
    var R = (red   > 0 ? 255*Math.pow(red   * factor, gamma) : 0);
    var G = (green > 0 ? 255*Math.pow(green * factor, gamma) : 0);
    var B = (blue  > 0 ? 255*Math.pow(blue  * factor, gamma) : 0); 

    var hex = "#" + decimalToHex(R) + decimalToHex(G) + decimalToHex(B);
    var output = hex;
    document.getElementById("result").firstChild.nodeValue = output;
    document.getElementById("result").style.color = hex;
}
</script>

I added the freqToNM function, trying to convert from frequency in Hertz(Hz)to wavelenght in nanometers(nm)before going through the convert function. Any Ideas? Thanks in Advance!

Edit: Here is an html of how I applied it.

<!DOCTYPE html>
<head>
  <title>Freqency to Color Converter</title>
</head>
    <body>
        <div id="main">

            <p><input type="text" id = "in" name="in" size="20" tabindex="1" onKeyDown="if(event.keyCode==13) freqToNM();"/> &nbsp; <input type="button" value="Convert" name="B1" tabindex="2" onclick = "freqToNM()" /></p>

            <p id="result">&nbsp;</p>
            <p>&nbsp;</p>
        </div>

<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">


function trim1 (str) {  
    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
function decimalToHex(d) {
    d = Math.round(d);
    var hex = d.toString(16);
    while (hex.length < 2) {
        hex = "0" + hex;
    }

    return hex;
}
function freqToNM() {
    var freq = (document.getElementById("in").value);
    var Slight = 299792458;
      convert();
   }

function convert() {

        var input = Slight / freq;
        input = trim1(input);
        var w = parseFloat(input);

    if (w >= 380 && w < 440)
    {
        red   = -(w - 440) / (440 - 380);
        green = 0.0;
        blue  = 1.0;
    }
    else if (w >= 440 && w < 490)
    {
        red   = 0.0;
        green = (w - 440) / (490 - 440);
        blue  = 1.0;
    }
    else if (w >= 490 && w < 510)
    {
        red   = 0.0;
        green = 1.0;
        blue  = -(w - 510) / (510 - 490);
    }
    else if (w >= 510 && w < 580)
    {
        red   = (w - 510) / (580 - 510);
        green = 1.0;
        blue  = 0.0;
    }
    else if (w >= 580 && w < 645)
    {
        red   = 1.0;
        green = -(w - 645) / (645 - 580);
        blue  = 0.0;
    }
    else if (w >= 645 && w < 781)
    {
        red   = 1.0;
        green = 0.0;
        blue  = 0.0;
    }
    else
    {
        red   = 0.0;
        green = 0.0;
        blue  = 0.0;
    }


    // Let the intensity fall off near the vision limits

    if (w >= 380 && w < 420)
        factor = 0.3 + 0.7*(w - 380) / (420 - 380);
    else if (w >= 420 && w < 701)
        factor = 1.0;
    else if (w >= 701 && w < 781)
        factor = 0.3 + 0.7*(780 - w) / (780 - 700);
    else
        factor = 0.0;

    var gamma = 0.80;
    var R = (red   > 0 ? 255*Math.pow(red   * factor, gamma) : 0);
    var G = (green > 0 ? 255*Math.pow(green * factor, gamma) : 0);
    var B = (blue  > 0 ? 255*Math.pow(blue  * factor, gamma) : 0); 

    var hex = "#" + decimalToHex(R) + decimalToHex(G) + decimalToHex(B);
    var output = hex;
    document.getElementById("result").firstChild.nodeValue = output;
    document.getElementById("result").style.color = hex;
}
</script>


</body>

</html>

It's not really clear what your question is. Does this script not work? What is wrong with it? — Rubydesic, Apr 22 '20 at 05:03
Hello Rubydesic, This script converts from nm to RBG what I am trying to do is convert from Thz to RGB so I was trying to add the step of converting THz to nm by adding the function freqToNM. but when I call that function onclick and send the result to the convert function the varible input doesn't seem want to accept it and I get nothing for a result. — Alex Adamha, Apr 22 '20 at 05:43
The original code expects the wavelength as a parameter, and you want to pass frequency instead? Is that what you're asking? — Teemu, Apr 22 '20 at 05:48

Teemu · Accepted Answer · 2020-04-22T14:21:37.377

1

Wavelength is speed / frequency. When you're passig frequency instead of wavelength to convert function, you've to change the passed frequency to wavelength, like this:

function freqToNM(freq) {
  // freq: The frequency as THz [float]
  const Slight = 299792458;
  return Slight / freq / 1000;
}

function convert() {
  var input = document.getElementById("in").value;
  input = trim1(input);
  var f = parseFloat(input);
  var w = freqToNM(f);

  // The rest of the convert code
}

Notice, that freqToNM returns the calculated value, it's not calling convert function.

edited Apr 22 '20 at 14:21

answered Apr 22 '20 at 06:00

Teemu

22,918
7
53
106

That doesn't seem to work for my puposes. I think the freqToNM needs to be called first for it to take THz as an input. if you look at the html I posted in an edit to my question it might clear up what I am trying to do. Thanks for your help regardless. – Alex Adamha Apr 22 '20 at 06:17
It does the job very well when used correctly, [see a fiddle](https://jsfiddle.net/mtohzu9x/1/). – Teemu Apr 22 '20 at 06:20
I stand corrected. Thank you very much for you help Teemu. you're Awesome! – Alex Adamha Apr 22 '20 at 06:39
1

I'd just like to point out for future readers that this answer uses the speed of light in a vacuum. To perform the calculation in a different medium such as air, you need to divide this figure by the material's refractive index. Air's is 1.000293, while water's is 1.3 and the refractive index of glass is 1.5. Also, the input frequency is in THz, not Hz – enhzflep Apr 22 '20 at 12:06
1

@enhzflep Yes, that's useful info. THz as the frequency unit is used because that was provided by the OP's comment which made me finally understand the question. – Teemu Apr 22 '20 at 12:09
@Teemu - indeed. The OP's question stated Hz, I saw the comment which indicated the interest was actually THz, but the function sig didn't assimilate this info, so thought the comment here to your answer may help to prevent these details being overlooked by any future consumers of this answer. – enhzflep Apr 22 '20 at 13:49
Yes Guys, Sorry about that, I did write Hz first. that was my mistake. Thanks for catching it. – Alex Adamha Apr 22 '20 at 20:31

Frequency to RGB

1 Answers1