Shaped Buttons With Processing

I try to make an kiosk system with a touchscreen. The program language I chose is Processing Java.
The Buttons on the screen should not be just rectangular, they should be shaped.

If you ever tried to make shaped buttons with any programming language, you know it is hard.
I found an unusual and very easy way to make buttons in any shape you like.

You can see the result in the attached zip file (just unzip and open the "index.html" in your browser)
or here on www.openprocessing.com

Step 1: Paint the Buttons

You can create the buttons with a graphic program (e.g. Inkscape)
The dimensions should be the same as the window size of your program or applet.

Then you copy the buttons and fill the buttons with different colors.

Step 2: Export the Images

Now export both images as png files in exact the same dimension of your program (here 800x600)

Step 3: The Processing Sketch

And now the trick.

The first image is visible on the screen, but the second is just loaded not shown.
You can find out which button is clicked with the second image. If you have an
click event, look on the invisible image which color is there.

So, every button has an different color in the invisible image. Look in the array
for the corresponding color, and you know which button it was.

To create the color array you can uncomment the line 43 (println("0x"+hex(testcolor));)
and click each button separately.

Step 4: Try It

With this methode I have made different funny sketches. e.g. an talking picture book with an touchscreen, the children love it :-)

In the pic you can see an working onscreen keyboard (german layout) for an kiosk computer.

And now play with your ideas. Hope you can create many interesting things with this trick. Please let me know.

Hope you enjoy
greetings from germany

www.lichtbaendiger.de