get(mouseX, mouseY) == color(0,0,255) doesn't work

kgoedecke

I'm trying to get the color of the pixel that my cursor is on with get(mouseX, mouseY) and compare it in an if statement with a color. Somehow this doesnt work in p5js but does in processing. Am I doing something wrong or is this a bug?

Find below my code.

function setup() {
    fillColor = color(0, 0, 100);
}

function overTriangle() {
    if (get(mouseX, mouseY) == fillColor) {
        return true;
    }
    else {
        return false;
    }
}

overTriangle !always! returns false.

GoToLoop

AFAIK, get() w/ coordinates returns an Array rather than a p5.Color object:
http://p5js.org/reference/#/p5/get

Framework p5.js is under heavy development right now.
Lotsa devs are changing its internal behavior as they please.
And it's steering p5.js away from Processing's behavior unfortunately! [-(

Right now, get() is returning some very weird array w/ 16 elements! 8-}
At least for the time being, we're gonna need to check the 1st 3 elements of it.
We can paste the code & run it from here btW: http://p5js.org/reference/#/p5/clear

// forum.processing.org/two/discussion/11068/
// get-mousex-mousey-color-0-0-255-doesn-t-work

// 2015-May-30

const INK = Object.freeze([0, 0, 0200]);

function setup() {
  noLoop();
  smooth();
  noStroke();
  ellipseMode(CENTER);
  fill(INK);
}

function draw() {
  background(0350);
  ellipse(width>>1, height>>1, width>>1, height>>1);
}

function mousePressed() {
  print(INK + ': ' + isMouseOverColor(INK));
}

function isMouseOverColor(c) {
  const p = get(mouseX, mouseY);
  for (var i = 0; i != c.length; ++i)  if (c[i] != p[i])  return false;
  return true;
}

kgoedecke

I had this idea before, I tried it but it still doesnt work for some reason.

Heres my final code:

function setup() {
    createCanvas(720, 400);
    fillColor = color(0, 0, 100, 255);
    fillColorHover = color(0, 0, 200);
    currentRectColor = fillColor;
    currentTriangleColor = fillColor;
    currentEllipseColor = fillColor;
}

function isMouseOverColor(c) {
  const p = get(mouseX, mouseY);
  for (var i = 0; i != c.length; ++i)  if (c[i] != p[i])  return false;
  return true;
}

function overTriangle() {

    if (isMouseOverColor(fillColor)) {
        return true;
    }
    else {
        return false;
    }

}

GoToLoop

I believe you didn't spot where the 1st thing I said was that get() returns an Array? :-<

kgoedecke

That's why we added the loop, or am I getting something wrong here?

GoToLoop

Check out both web references: :-B

1. get() returns Array -> http://p5js.org/reference/#/p5/get
2. color() returns p5.Color -> http://p5js.org/reference/#/p5/color

However I've just read color()'s reference and it says it also returns an Array.
But that is very untrue! But if you insist on using it, grab its rgba's property like this:

const FILL_INK = color(0, 0, 100).rgba;
const HOVER_INK = color(0, 0, 200).rgba;

P.S.: I believe it's better off to change c.length to merely 3 within isMouseOverColor():

for (var i = 0; i != 3; ++i)

So it's more guaranteed to skip checking out the alpha property as well. ;;)

kgoedecke

thanks, that did the trick ;-)