Multitouch drawing tool for Android phones

To create a simple drawing tool for android phones that gives you the option to program something different to happen onscreen.

It is adapted from Eric Pavey’s excellent multitouch tutorial, published on his blog,

To create and tweak this drawing tool copy this code into the code editor in Processing and read through the notes that I have commented out.

The bits to change are…

  1. The int circleBaseSize variable, make this bigger or smaller to make the circles you draw onscreen bigger or smaller.
  2. Within the void finger_draw function, you can place code within ready made ‘if’ statements to decide what happens when e.g. the 1st finger touches the screen, or what happens when the 4th finger touches the screen.

I have placed some code to change the fill colour and draw an ellipse within the ‘if’ statement, but you can write something different.

I also used the finger_diameter variable to define the width & height of the ellipses, so that the ellipses are larger when the finger touch presses harder.

The harder the finger is pressed onscreen, the larger the surface area of the touch, the larger the  finger_diameter variable is.

Click the image below to view it full size in your browser.

To run this on an Android phone, see this video tutorial.

The clever stuff is done in the public boolean surfaceTouchEvent(MotionEvent me) function at the bottom of the code, but we don’t need to change anything with this.

//This code for a multitouch finger paint app is adapted from a tutorial Eric Pavey at

//Copy this variable into the space above the
//This can be used as a base size for the shapes you draw onscreen in response to finger touches

int circleBaseSize = 100; // change this to make the touche circles (paint tool) bigger\smaller.

void setup() {
background(255, 255, 255);


void draw() {


void finger_draw(float x, float y, float siz, int id) {
// What is drawn on sceen when touched.
float finger_diameter = circleBaseSize * siz;
//  ellipse(x, y, diameter, diameter);

if (id == 0 ) {
//place what you want the 1st fingertouch to do here
fill(0, 200, 0);
ellipse(x, y,finger_diameter, finger_diameter/ 2);

if (id == 1 ) {
//place what you want the 2nd fingertouch to do here, I have
fill(150, 0,0);
ellipse(x, y,finger_diameter, finger_diameter / 2);

if (id == 2 ) {
//place what you want the 3rd fingertouch to do here
fill(0, 0, ,255);
ellipse(x, y, finger_diameter, finger_diameter / 2);

if (id == 3 ) {
//place what you want the 4th fingertouch to do here
fill(175, 175, 0);
ellipse(x, y, finger_diameter * 3, finger_diameter /2);

if (id == 4 ) {
//place what you want the 5th fingertouch to do here
fill(255, 255, 255);
ellipse(x, y, finger_diameter * 3, finger_diameter * 3);


// Override Processing’s surfaceTouchEvent, which will intercept all
// screen touch events.  This code only runs when the screen is touched.

public boolean surfaceTouchEvent(MotionEvent me) {
// Number of places on the screen being touched:
int numPointers = me.getPointerCount();
for (int i=0; i < numPointers; i++) {
int pointerId = me.getPointerId(i);
float x = me.getX(i);
float y = me.getY(i);
float siz = me.getSize(i);


// If you want the variables for motionX/motionY, mouseX/mouseY etc.
// to work properly, you’ll need to call super.surfaceTouchEvent().
return super.surfaceTouchEvent(me);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: