CODEWITHSUNDEEP
javascript
T.Huisman
T.Huisman

Reputation: 15

Trying to change RGB colors in javascript

Im trying to make a script that changes the color of my lights using a javascript. So first I want to use the current RGB value to check an array, then if there is a match then select the next in line. But since I dont have all possible combinations I want to find the closest possible match if there is not exact match. This is what I tried so far.

kelvin_table = [
  {r:255,g:56,b:0},
  {r:255,g:71,b:0},
  {r:255,g:83,b:0}
  ];
    
  var red = 255
  var green = 84
  var blue = 0
  index = kelvin_table.findIndex(x => x.r ===red && x.g ===green && x.b ===blue);

  alert(index);
  
  if (index = -1)
  {
    alert("In de If Statement");  
    var Redindex = [], i;    
    for(i = 0; i < kelvin_table.length; i++)
        if (kelvin_table[i].r === red)
            Redindex.push(i);
    alert(Redindex);
    var Greenindex = [], i2;
    for(i2 = 0; i2 < Redindex.length; i2++)
        //alert(Redindex[i2]);
        var gi = Redindex[i2];
        alert(gi);
        if (kelvin_table[gi].g === green)
            Greenindex.push(i);
    alert(Greenindex);
    var Blueindex = [], i3;
    for(i3 = 0; i3 < Greenindex.length; i3++)
        //alert(Greenindex[i3]);
        var bi = Greenindex[i3];
        alert(bi);
        if (kelvin_table[bi].b === blue)
            Blueindex.push(i);
    alert(Blueindex);
  }
  
  var valueAtIndex1 = kelvin_table[2];
  alert(valueAtIndex1.g);

Of course the kelvin_table will be much bigger in the end, but this is my test amount. As you expect with below red, green and blue values I get Index -1. If I have green 83 I get Index 2, so that part works. But now I added an If statement for when index = -1. My approach so far has been trying to narrow the index by first searching for Red values, then Green values within the results from Red and then search the Blue results in the filtered list from Blue. Eventually I hope this will only give me 1 option. I was thinking that if there is no match, like in the example below would be Blue, then try to search value -1, then +1, -2, +2...until there is a matching value. I'm just not really sure how to approach this. And perhaps someone has a far better way of finding the closest match.

Thanks in advance

Upvotes: 0

Views: 215

Answers (1)

Ofek
Ofek

Reputation: 1150

The problem is that you didn't type '{' or '}' to the for of green and blue.

But I don't understand what the point of the code inside the if, its the same as: kelvin_table.findIndex(x => x.r ===red && x.g ===green && x.b ===blue);

If you try to find the closest color you can use this code with closestIndex({r:red,g:green,b:blue}, kelvin_table)

function colorDistance(c0, c1) {
  var dr = c1.r - c0.r;
  var dg = c1.g - c0.g;
  var db = c1.b - c0.b;
  return Math.sqrt(dr * dr + dg * dg + db * db);
}

function closestIndex(color, kelvin_table) {
  var minIndex = -1;
  var minDistance = Infinity;
  for (var i = 0; i < kelvin_table.length; i++) {
    var distance = colorDistance(color, kelvin_table[i]);
    if (distance <= minDistance) {
      minIndex = i;
      minDistance = distance;
    }
  }
  return minIndex;
}

note: I use here a lazy version of colorDistance

Upvotes: 1

Related Questions