Introduction: Shaped Buttons With Processing

Picture of 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

Step 1: Paint the Buttons

Picture of 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

Picture of 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

Picture of 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

Picture of 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


foutuframboise (author)2015-11-22

This was very helpful! Thank you very much.

hondaman900 (author)2011-10-03

Nice I'ble.

What do you use for printing out your Processing sketches? The native Processing IDE sucks at printing out code, and I'd like to have line numbers.


lighttamer (author)hondaman9002011-10-04


I used the Notepad++ with the "JAVA" text-highlighting.

Greetings from Germany

owaunz (author)2010-02-16

Do you have an email address ? Mine is

smessud (author)2010-02-09

 Pretty clever!!
This will work not only with well defined buttons, but with any zone of a screen as long as you have the "look-up image" beneath.

It may not be new but it's worth a five-start to me.

About This Instructable




Bio: We are the Lichtbaendiger from germany. We are manufacturer of optical glasses. If you like to see what we do, you are welcome to visit ... More »
More by lighttamer:Love lock made with an 3D printerLove Gaugetibetan prayer-wheel made by plywood
Add instructable to: