How to make mouseClicked event for an image?

edited November 2013 in How To...

Hello everyone,

Here's the image: NorthAmerica

It is PNG and everything except the America is transparent. The image is supposed to be drawn at the coordinates: 0,0,width,height.

I would like to create the condition that will register click on the image, only and only when the cursor is within area of America.

What did I try so far?

I tried to implement this logic: If the cursor is within rectangle area surrounding America and the pixel of image is not transparent -> detect the click.

The logic about transparency of pixels I tried to implement like this:

boolean[][] TranspMatrix=new boolean[Background.height][Background.width];

  int index1=0;
  for (int tempY=0;tempY<Background.height;++tempY) {
    for (int tempX=0;tempX<Background.width;++tempX) {


        if (alpha(Background.pixels[index1])==0) {
         TranspMatrix[tempY][tempX]=true;
        }
        else  TranspMatrix[tempY][tempX]=false;
      }

Later, I when I wish to check if the corresponding pixel is transparent, I say: if(TranspMatrix[mouseY][mouseX]).

However, the logic doesn't work...

I implemented this code to test the logic:

    PImage Background;
    boolean draw=false;
    void setup()
    {
      size(800, 600);
      background(0);
      Background=loadImage("NorthAmerica.png");
      image(Background,0,0,width,height);

      boolean[][] TranspMatrix=new boolean[Background.height][Background.width];

      int index1=0;
      for (int tempY=0;tempY<Background.height;++tempY) {
        for (int tempX=0;tempX<Background.width;++tempX) {


            if (alpha(Background.pixels[index1])==0) {
             TranspMatrix[tempY][tempX]=true;
            }
            else  TranspMatrix[tempY][tempX]=false;
          }




          index1++;
        }





      loadPixels();
      int[][]PixelsMatrix=new int[height][width];
      int index=0;
      for (int i=0;i<height;++i) {
        for (int j=0;j<width;++j) {
          PixelsMatrix[i][j]=pixels[index];

          index++;
        }
      }

      for (int tempY=0;tempY<height;tempY++)
      {
        for (int tempX=0;tempX<width;tempX++)
        {
          if(TranspMatrix[tempY][tempX])
          PixelsMatrix[tempY][tempX]=color(0,0,0);
          else PixelsMatrix[tempY][tempX]=color(255,0,0);
        }
      }

      index=0;
      for (int i=0;i<height;++i) {
        for (int j=0;j<width;++j) {
          pixels[index]=PixelsMatrix[i][j];

          index++;
        }
      }

      updatePixels();
    }

The goal of this test: wherever you see a non-transparent pixel, use different color to paint it. However, the entire canvas always gets colored in the same color.

If you are familiar with any better and more efficient logic, don't bother fixing mine.

Thank you.

Answers

  • _vk_vk
    edited November 2013

    You may also make a PGraphics with a modified version of the image, where inside america there is only one colour, like (255) being everything else black (or other colour). Then you test the color under mouse on (not displayed) PGraphics. like seen here

    http://forum.processing.org/one/topic/easiest-button.html

    edit: the images on linked page are gone, so i pasted them here...

    image 1

    image 2

Sign In or Register to comment.