If statement with color not working

p5.js Coding Questions
1

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

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");
	}
}
2

Strange, I recently answered a very similar question on StackOverflow. 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:

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;
}
4 Likes
3

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

4

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.


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++;
  }
}
5

/me looks at tag, p5.js, looks at @Chrisir :face_with_raised_eyebrow:

1 Like
6

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.

2 Likes
7

Hello,

A reference to this usage:

:)

1 Like
8

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:

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.

9

Also, this works:

  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