# If statement with color not working

**URL:** <https://discourse.processing.org/t/if-statement-with-color-not-working/33904>\
**Category:** Coding Questions\
**Created:** [December 3, 2021, 8:13pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904 "2021-12-03T20:13:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [December 3, 2021, 8:13pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/1 "2021-12-03T20:13:25Z")

</div>

why is clicks not getting higher whe I click on the cookie?

```auto
var clicks = 0;

let cookie;

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	cookie = color(132, 86, 60, 255);
}

function draw() {
	fill(cookie);
	ellipse(width / 2, height / 2, height / 3, height / 3);
	textAlign(LEFT);
	textSize(30);
	fill(0);
	text("clicks " + clicks, 20, 30);
}

function mouseClicked() {
	if (get(mouseX + 1, mouseY + 1) == cookie) {
		clicks = clicks + 1;
		println("works");
	}
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 3, 2021, 8:45pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/2 "2021-12-03T20:45:58Z")

</div>

Strange, I recently answered a [very similar question on StackOverflow](https://stackoverflow.com/questions/70202216/is-there-a-way-to-check-if-the-mouse-is-clicked-on-a-certain-element-in-p5-js/70205242#70205242). Is this by chance a homework question? If so you need to disclose that.

Using the `get()` function and comparing the color of the pixel that the mouse is over is **definitely not** a _good_ way to do hit testing. Anybody who suggests this is making an unfortunate mistake. There are numerous things that could cause this to fail such as anti-aliasing, how opacities and blending are implemented, the complexities of color spaces and how graphics cards handle them, etc. Additionally this method restricts you to only having one instance of a clickable thing of a certain color. It also wouldn’t work any more if you decided to do something like introduce texturing to whatever you’re doing hit testing for.

In this specific case you are running into two issues:

1. Using the `==` with two colors is not going to work. The `==` operator in JavaScript generally only works for value types such as numbers and strings. With Objects that operator will only return true when the Objects are the exact same instance (i.e. `cookie == cookie`) when you create two separate but equivalent objects, this will be false (i.e. `cookie == color(132, 86, 60, 255)`)
2. For some reason the color `132, 86, 80` is not representable in the `canvas` and gets converted to `133, 87, 80`. As I said there could be all sorts of complicated low level reasons for this.

I suggest you check my StackOverflow answer and use that technique. However if you were dead set on using color (bad idea), then this would technically work:

```javascript
var clicks = 0;

let cookie;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cookie = color(132, 86, 60);
}

function draw() {
  background(100);
  fill(cookie);
  ellipse(width / 2, height / 2, height / 3, height / 3);
  textAlign(LEFT);
  textSize(30);
  fill(0);
  text("clicks " + clicks, 20, 30);
}

function mouseClicked() {
  if (areEqual(get(mouseX, mouseY), cookie)) {
    clicks = clicks + 1;
  }
}

function areEqual(c1, c2) {
  let result =
    dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2)) < 2;

  /*
  console.log(
    `(${red(c1)}, ${green(c1)}, ${blue(c1)}) == (${red(c2)}, ${green(
      c2
    )}, ${blue(c2)}) -> ${result}`
  ); */

  return result;
}

```

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [December 3, 2021, 9:01pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/3 "2021-12-03T21:01:03Z")

</div>

it actually is very similar, but no it’s not a homework question

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 3, 2021, 9:12pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/4 "2021-12-03T21:12:45Z")

</div>

I don’t think using get() is a bad idea. at least for _java_ processing

- we can work with a hidden PGraphics, there won’t be anti-aliasing, opacities and blending and lights()
- color works internally as **int** which works well with ==

It’s an old and well established concept here on the forum and when you know what you’re doing works well.

```auto

int clicks = 0;
color cookie;

void setup() {
  size(660, 660);
  background(100);

  cookie = color(132, 86, 60, 255);
  textAlign(LEFT);
  textSize(30);
}

void draw() {
  background(100);

  fill(cookie);
  ellipse(width / 2, height / 2, height / 3, height / 3);

  fill(0);
  text("clicks " + clicks, 20, 30);
}

void mousePressed() {
  if (get(mouseX, mouseY) == cookie) {
    clicks++;
  }
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 3, 2021, 10:00pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/5 "2021-12-03T22:00:40Z")

</div>

/me looks at tag, `p5.js`, looks at @Chrisir 🤨

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 3, 2021, 10:03pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/6 "2021-12-03T22:03:25Z")

</div>

Also, it is still a sub optimal approach in my opinion for all the other issues I mentioned in my original response.

I would personally never use such an approach regardless of whether somebody considered it an “old and well established concept.” It my personal opinion it is a **very bad** “old and well established concept” if it is indeed the latter.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 4, 2021, 12:12pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/7 "2021-12-04T12:12:50Z")

</div>

Hello,

> [@KumuPaul](#):
>
> `dist(red(c1), green(c1), blue(c1), red(c2), green(c2), blue(c2)) < 2;`

A reference to this usage:

> **[Color difference](https://en.wikipedia.org/wiki/Color_difference)**
>
> In color science, color difference or color distance is the separation between two colors. This metric allows quantified examination of a notion that formerly could only be described with adjectives. Quantification of these properties is of great importance to those whose work is color-critical. Common definitions make use of the Euclidean distance in a device-independent color space.
> As most definitions of color difference are distances within a color space, the standard means of determining di...

`:)`

---

<div class="post-metadata">

**Author:** ![Hieronymus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hieronymus/32/2018_2.png) [@Hieronymus](https://discourse.processing.org/u/Hieronymus)\
**Post date:** [December 7, 2021, 8:28pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/8 "2021-12-07T20:28:55Z")

</div>

Thanks @KumuPaul

I was also struggling with the same issue today.  
For example, this did not work, even though the compared values are the same:

```auto
function draw() {
  let m = get(mouseX, mouseY);
  let cp = get(50, 50);// reference color

// if mouse color equals the reference color, do something

  if (m == cp) {
    fill(0, 255, 0);
  } else fill(0, 0, 255);

  print(m + " - " + cp);// debug

  square(100, 100, 50);
}

```

I will use one of the other suggestions instead. Thanks!

ps. It does work with Processing though, not with P5js.

---

<div class="post-metadata">

**Author:** ![Hieronymus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hieronymus/32/2018_2.png) [@Hieronymus](https://discourse.processing.org/u/Hieronymus)\
**Post date:** [December 7, 2021, 9:00pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904/9 "2021-12-07T21:00:44Z")

</div>

Also, this works:

```auto
  if (m.toString() == cp.toString()) {
    fill(0, 255, 0);
    print("colors are equal");//debug
  } else fill(0, 0, 255);

```

Found here: [p5.js Web Editor](https://editor.p5js.org/enickles/sketches/Qt4Hz9_OU)