mouseover for non-rect-shapes

Programming Questions

ja_nina

mouseover for non-rect-shapes

in Programming Questions • 1 years ago

Hey dudes!
i need to know how to define mouse-sensitive areas for a shape that is non-geometric (can not be described by 2 coordinates).
Can i solve that by using an invisable image with different colors(i need 5 different areas) that is read by processing?
And if, how will that work?

Thank you for your help!
Ja_nina

Replies(5)

jbum

Re: mouseover for non-rect-shapes

1 years ago

You are on the right track.

I've created a tutorial sketch for you that illustrates how to do it, using images of the 5 spice girls.

The image that is displayed is the color image. A second image is loaded in a PImage and the pixels are loaded. In my example, the second image looks like this:

I carefully constructed this map in photoshop so that each color is 32 more than the previous. Then,

the image is saved as a PNG (GIF would also work) so that artifacts don't get introduced.

Colors values are reads and interpreted as follows:

String[] spiceVarieties = {"No","Scary","Baby","Sporty","Ginger","Posh"};
void mouseClicked()
  {
    int px = constrain(mouseX,0,width);
    int py = constrain(mouseY,0,height);
    int v = mapImage.pixels[py*mapImage.width + px];
    v = (v & 0x0FF) >> 5;
    println(spiceVarieties[v] + " Spice")
  }

I'm using (v & 0x0FF) to chop off just the red color component. Then I use the right-shift operator (>> 5) to convert values going 0,32,64,96... to 0,1,2,3. I could have also divided by 32, but I'm old school, like the spice girls.

The main reason I chose colors that are 32 apart (instead of 1 apart) is so that I can distinguish them when preparing the map in Photoshop. Otherwise it just looks black, and it's hard to spot problems.

Idea: Use 0,1,2,3 in the red channel, and then use more visible differences in the green/blue channels so you can spot the difference visually. Then you don't have to mess with the >>5, because the code only cares about the red channel.

One last tip: when selecting areas in Photoshop, turn anti-aliasing off, so you don't get intermediate pixel values on the edges. You want a hard transition from color to color.

ja_nina

Re: Re: mouseover for non-rect-shapes

1 years ago

wow, jbum, thanks for taking the time!
very nice of you...

its a very cool tutorial, i understand everything except of this part:

    int v = mapImage.pixels[py*mapImage.width + px];
    v = (v & 0x0FF) >> 5;

can you maybe explain it a bit more in detail?
why do you take the value [py*mapImage.width + px]? 
and how exactly do you chop off the red color (v & 0x0FF)? 
thats about the hex code, right?whats happening there?

Sorry, i´m quite new to programming!
Thanks a lot!
nina

jbum

Re: mouseover for non-rect-shapes

1 years ago

 int v = mapImage.pixels[py*mapImage.width + px];
 v = (v & 0x0FF) >> 5;

Sorry, I tend to lapse into old-school hacker tricks. This does the same thing and is perhaps a bit more clear:

int addressOfPixel = py*mapImage.width + px;

int rgbValue = mapImage.pixels[addressOfPixel];

int redValue = red(rgbValue);

int v = v/32;

(v / 32) and (v >> 5) accomplishes the same thing if v is a positive integer.  >> 5 shifts the binary number right by 5 bits,

which in binary notation, is the same as dividing by 32.  Kind of like chopping two zeros off a decimal

number is the same as dividing by 100.

red(v) is the same as (v & 0x0FF)  - it produces the lower byte of the integer that represents the color.

ja_nina

Re: Re: mouseover for non-rect-shapes

1 years ago

ah, ok...thanks a lot!

lighttamer

Re: mouseover for non-rect-shapes

1 years ago

Hello

maybe this is also helpfully:
http://www.openprocessing.org/visuals/?visualID=7554

I wrote it some times ago.

Greetings

Top Reply