Shaped Buttons With Processing

Introduction: Shaped Buttons With Processing

About: 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 our website.

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

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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

Be the First to Share


    • Arduino Contest 2020

      Arduino Contest 2020
    • First Time Author Contest

      First Time Author Contest
    • Space Challenge

      Space Challenge

    5 Discussions


    4 years ago

    This was very helpful! Thank you very much.


    8 years ago on Introduction

    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.



    Reply 8 years ago on Introduction


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

    Greetings from Germany


    10 years ago on Introduction

     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.