2

I have loaded an image of a color wheel on to a canvas and I have a list of hue values in an array. I loop over each pixel on the canvas and remove the pixels that match the same hue values.

The code for that is:

var element = document.getElementById("wheel-canvas");
var c = element.getContext("2d");   
var image = c.getImageData(0, 0, 375, 375);
var imageData = image.data;
paletteList = this.collection.pluck('hsv');
for (var i = 0, n = imageData.length; i < n; i += 4) {
    var hsv = this.model.convertRGBToHSV(imageData[i], imageData[i+1], imageData[i+2]);
    var hue = hsv[0];
    var sat = hsv[1];
    var val = hsv[2];
    $.each(paletteList, function(index, value) {
    if (hue === value[0])   
    {
        imageData[i] = '0';
        imageData[i+1] = '0';
        imageData[i+2] = '0';
    }
    });

}

   c.putImageData(image, 0, 0);

enter image description here

Now I want all pixels that DON'T match the hues to become black. I make a code change:

if (hue !== value[0])

and I get the following result:

enter image description here

Why doesn't it look like the inverse of the first circle?

Thank you!

garg
  • 1,246
  • 2
  • 16
  • 21
  • http://stackoverflow.com/questions/359494/javascript-vs-does-it-matter-which-equal-operator-i-use – Kees C. Bakker Jan 03 '12 at 10:35
  • I agree with Kees C. Bakker - the operator is not the issue. Please publish the entire document so we can run & debug it to find the problem. – guy mograbi Jan 03 '12 at 10:51

5 Answers5

5

Your logic for determining which pixels to set to black is wrong.

Note that in your each loop, the hue of each pixel will not be equal to some hues in the pallette list, thus all of them will be set to black.

what you really want to do on each pixel is to detect whether its hue is in the pallet list or not.

var matched = false;
$.each(paletteList, function(index, value) {
    if (hue === value[0]) {
        matched = true;    
        return false;
    }
}
if (!matched) {
    imageData[i] = '0';
    imageData[i+1] = '0';
    imageData[i+2] = '0';
}
qiao
  • 17,941
  • 6
  • 57
  • 46
2

You need to use != for 'is not equal', since you only want to compare the values.
Check this: Javascript comparison

!== will also compare the identity / objects, which are not the same (as Kees mentioned).

Erik Dekker
  • 2,395
  • 5
  • 33
  • 55
2

There is a difference between equality and identity.

Equality (==, !=)

  • If the types of the two expressions are different, attempt to convert them to string, number, or Boolean.
  • NaN is not equal to anything including itself.
  • Negative zero equals positive zero.
  • null equals both null and undefined.
  • Values are considered equal if they are identical strings, numerically equivalent numbers, the same object, identical Boolean values, or (if different types) they can be coerced into one of these situations.
  • Every other comparison is considered unequal.

Identity (===. !==)

These operators behave identically to the equality operators except no type conversion is done, and the types must be the same to be considered equal.

Source. So the !== can't be the problem.

Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
0

Couldn't find the operator you are referring to. I suggest you use !( a=== b)

have a look at w3school list of javascript operators

guy mograbi
  • 27,391
  • 16
  • 83
  • 122
  • I assume it is since the question did not specify any errors thrown, however it is undocumented and therefore in order to get the expected behavior I would use !(a === b) which is documented. – guy mograbi Jan 03 '12 at 10:35
  • 3
    [Undocumented?](https://developer.mozilla.org/en/JavaScript/Reference/Operators/Comparison_Operators) – Richard Dalton Jan 03 '12 at 10:37
  • I simply suggest that if !== is in question, lets replace it with !(a === b) which will most certainly give the expected behavior. My assumption is that Kees C. Bakker is right, and this is not the problem in hand - but lets remove the operator thing out of the equation and move on. – guy mograbi Jan 03 '12 at 10:48
0

You are comparing a string with an integer using !== this will always return false. Check on http://jsfiddle.net/k4EAQ/

Using != Javascript does not check the type and will give you what you want. But if you like to use !== you can always convert the variable to an integer or a string so you are sure they match the type.

How do I convert a string into an integer in JavaScript?

Community
  • 1
  • 1
MarkSmits
  • 538
  • 2
  • 7