Multitouch control for Pong bats

This is a demonstration of how Multitouch code can be used so that Pong can be played with 4 players on a touchscreen Android device.

At the bottom of this page is the sketch code, if you copy and paste it into a blank Processing sketch, you should be able to test it on a device or an emulator in Android mode.

This code is only to control the movement of the Pong bats using multitouch finger detect.

You will have to copy, paste and reedit this with the rest of your Pong sketch to have it work within the game.

Here is how the code works…

A Function called surfaceTouchEvent is checked each frame.

This function tests for finger touches.

For each fingertouch it triggers the multitouch() function, passing information about the touch with it.

See the diagram below for what information it passes to the multitouch() function.

Click on the image below to take a closer look in your browser.

The multitouch function checks which finger touch is being triggered, 0 to 4 and then sends the x & y coordinates of this touch to the control bats function.

The control_bats() function is then run for each fingertouch.

Within this function we have taken the if statements that we used to check if the mouse is within the boundaries of the bat, in worksheet 23 and adjusted the code so that the if statement is checking wether the x & y coordinates of the touch are within the boundaries of the bat instead.

It does this by declaring a couple of variables at the top of the function to represent the x & y coordinates of the fingertouches.

int bat_height;
int  bat_width;
int  bat_x;
int  bat_y;

//bat 2
int  bat2_width;
int  bat2_height;
int  bat2_x;
int  bat2_y;

//bat 3
int  bat3_width;
int  bat3_height;
int  bat3_x;
int  bat3_y;

//bat 4
int  bat4_width;
int  bat4_height;
int  bat4_x;
int  bat4_y;

//=================================================================================

void setup() {

orientation(LANDSCAPE);

smooth();

size(screenWidth, screenHeight); // comment this out for android

//bat 1 right blue
bat_height = screenHeight/5;
bat_width = screenHeight/40;
bat_x = screenWidth – screenWidth/12;
bat_y = screenHeight/2;

//bat 2 left red
bat2_width = screenHeight/40;
bat2_height = screenHeight/5;
bat2_x = screenWidth/12;
bat2_y = screenHeight/2;

//bat 3 top green
bat3_width = screenHeight/5;
bat3_height = screenHeight/40;
bat3_x = screenWidth/2;
bat3_y = screenHeight/12;

//bat 4 bottom pink
bat4_width = screenHeight/5;
bat4_height = screenHeight/40;
bat4_x = screenWidth/2;
bat4_y = screenHeight – screenHeight/12;

smooth();
}

void draw() {

background(255, 255, 255);

play_pong();//This calls the function that tells the bats where to be and what to look like at a given time.

}

void play_pong() {

//==============================================================
//Define Bats

//bat 1 right blue
strokeWeight(2);
stroke(120, 2, 0);
fill(0, 2,255); //colour (R,G,B) 0-255 with 0 being black & 255 being the brightest
rectMode(CENTER);
rect(bat_x, bat_y, bat_width, bat_height);

//bat 2 left red
strokeWeight(2);
stroke(120, 2, 0);
fill(255, 2, 0); //colour (R,G,B) 0-255 with 0 being black & 255 being the brightest
rectMode(CENTER);
rect(bat2_x, bat2_y, bat2_width, bat2_height);

//bat 3 top green
strokeWeight(2);
stroke(120, 2, 0);
fill(30, 255, 0); //colour (R,G,B) 0-255 with 0 being black & 255 being the brightest
rectMode(CENTER);
rect(bat3_x, bat3_y, bat3_width, bat3_height);

//bat 4 bottom pink
strokeWeight(2);
stroke(120, 2, 0);
fill(155, 155,155); //colour (R,G,B) 0-255 with 0 being black & 255 being the brightest
rectMode(CENTER);
rect(bat4_x, bat4_y, bat4_width, bat4_height);

}

//—————————————————————————————–
// 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);

multitouch(x, y, siz,pointerId);

}
// 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);
}

void multitouch(float x, float y, float siz, int id) {

for (int touch=0; touch <= 4; touch++) {
if (id == touch ) {
control_bats(x, y);
//sends the x & y location of this finger to the control_bats()
//function that checks if it is in any of the bats
}
}

}

void control_bats(float x, float y) {
//==============================================================
//Control Bats

int touchx = int(x);
int touchy = int(y);

//Bat 1 Right Blue
if (touchy < bat_y + bat_height/2
&& touchy  > bat_y – bat_height/2
&& touchx  > bat_x – bat_width/2
&& touchx  <  width) {
bat_y = constrain(touchy, bat_height/2, height – bat_height/2);
}

//Bat 2 Left Red
//
if (touchy < bat2_y + bat2_height/2
&& touchy  > bat2_y – bat2_height/2
&& touchx  > 0
&& touchx  <  bat2_x + bat2_width/2) {
bat2_y = constrain(touchy, bat_height/2, height – bat_height/2);
}

//Bat 3 top Green
//
if (touchy < bat3_y + bat3_height/2
&& touchy  > 0
&& touchx  > bat3_x – bat3_width/2
&& touchx  <  bat3_x + bat3_width/2) {
bat3_x = constrain(touchx, bat_width/2, width – bat_width/2);
}

//Bat 4 bottom pink
//
if (touchy < height
&& touchy  > bat4_y – bat4_height/2
&& touchx  > bat4_x – bat4_width/2
&& touchx  <  bat4_x + bat4_width/2) {
bat4_x = constrain(touchx, bat_width/2, width – bat_width/2);
}
}