Gamepad Control for Processing + Android to Control Arduino Robot

Question

I would like to create a Multitouch Gamepad control for Processing and use it to control a remote Arduino Robot. I would like to make the GUI on Processing and compile it for Android.

Here is the GUI Gamepad for Processing I have created so far:

    float easing = 0.09;
// start position
int posX = 50;
int posY = 200;
// target position
int targetX = 50;
int targetY = 200;

boolean dragging = false;

void setup() 
{
  size(500,250);
  smooth();
}

void draw() 
{
 background(255);
 if (!dragging) 
 {
   // calculate the difference in position, apply easing and add to vx/vy
   float vx = (targetX - (posX)) * easing;
   float vy = (targetY - (posY)) * easing;


    // Add the velocity to the current position: make it move!
    posX += vx;
    posY += vy;
 }

 if(mousePressed) 
 {
   dragging = true;
   posX = mouseX;
   posY = mouseY;
 }
 else 
 {
   dragging = false; 
 }

 DrawGamepad();  
 DrawButtons();  
} 

void DrawGamepad()
{
   //fill(0,155,155);
  //rect(0, 150, 100, 100, 15);

  ellipseMode(RADIUS);  // Set ellipseMode to RADIUS

  fill(0,155,155);  // Set fill to blue
  ellipse(50, 200, 50, 50);  // Draw white ellipse using RADIUS mode

  ellipseMode(CENTER);  // Set ellipseMode to CENTER
  fill(255);  // Set fill to white//
  ellipse(posX, posY, 35, 35);  // Draw gray ellipse using CENTER mode
}

void DrawButtons()
{
    fill(0,155,155);  // Set fill to blue
    ellipse(425, 225, 35, 35);
    ellipse(475, 225, 35, 35);
    fill(255,0,0);  // Set fill to blue
    ellipse(425, 175, 35, 35);
    ellipse(475, 175, 35, 35);
}

I have realized that probably that code will not support Multitouch events on Android so I came up with another code found on this link

Can Processing handle multi-touch?

So the aim of this project is to create de multitouch gamepad to use to control my Arduino Robot. The gamepad should detect which key was pressed as well as the direction of the Joystick.

Any help appreciated.

Answer 1

The first thing I want to say is that you probably don't need to implement any multitouch compatibility.

I don't have an android to test this on, but the following code should work:

import android.view.MotionEvent;

int TouchEvents;

/*
* xTouch and yTouch are arrays of the x and y coordinates of all fingers touching the screen, in arbitrary order.
* e.g. xTouch[2] and yTouch[2] are the coordinates of the third arbitrarily ordered finger touching the screen.
*/
float[] xTouch;
float[] yTouch;
int currentPointerId = 0;
boolean printFPS;

float easing = 0.09;
// start position
float posX = 50;
float posY = 200;
// target position
float targetX = 50;
float targetY = 200;

boolean dragging = false;

void setup() 
{
  size(500,250);
  smooth();
  //size(displayWidth, displayHeight);
  orientation(LANDSCAPE);
  background(0, 255, 0);
  fill(0, 0, 244);
  rect(100, 100, 100, 100);
  stroke(255);

  // Initialize Multitouch x y arrays
  xTouch = new float [10];
  yTouch = new float [10]; // Don't use more than ten fingers!
}

void draw() 
{
  background(255);
  if (!dragging) 
  {
    // calculate the difference in position, apply easing and add to vx/vy
    float vx = (targetX - (posX)) * easing;
    float vy = (targetY - (posY)) * easing;


    // Add the velocity to the current position: make it move!
    posX += vx;
    posY += vy;

    for (int i = 0; i < xTouch.length; i++)
    {
      ellipse(xTouch[i], yTouch[i], 150, 150);
    }
  }
  DrawGamepad();
  DrawButtons();

  targetX = xTouch[currentPointerId];
  targetY = yTouch[currentPointerId];
} 

void DrawGamepad()
{
  //fill(0,155,155);
  //rect(0, 150, 100, 100, 15);

  ellipseMode(RADIUS);  // Set ellipseMode to RADIUS

  fill(0,155,155);  // Set fill to blue
  ellipse(50, 200, 50, 50);  // Draw white ellipse using RADIUS mode

  ellipseMode(CENTER);  // Set ellipseMode to CENTER
  fill(255);  // Set fill to white//
  ellipse(posX, posY, 35, 35);  // Draw gray ellipse using CENTER mode
}

void DrawButtons()
{
  fill(0,155,155);  // Set fill to blue
  ellipse(425, 225, 35, 35);
  ellipse(475, 225, 35, 35);
  fill(255,0,0);  // Set fill to blue
  ellipse(425, 175, 35, 35);
  ellipse(475, 175, 35, 35);
}

public boolean surfaceTouchEvent(MotionEvent event)
{
  // Number of places on the screen being touched:
  TouchEvents = event.getPointerCount();

  // If no action is happening, listen for new events else 
  for(int i = 0; i < TouchEvents; i++)
  {
    int pointerId = event.getPointerId(i);
    xTouch[pointerId] = event.getX(i);
    yTouch[pointerId] = event.getY(i);
    float siz = event.getSize(i);
  }

  // ACTION_DOWN 
  if(event.getActionMasked() == 0)
  {
    print("Initial action detected. (ACTION_DOWN)");
    print("Action index: " +str(event.getActionIndex()));
  } 
  // ACTION_UP 
  else if(event.getActionMasked() == 1)
  {
    print("ACTION_UP");
    print("Action index: " +str(event.getActionIndex()));
  }
  //  ACTION_POINTER_DOWN 
  else if(event.getActionMasked() == 5)
  {
    print("Secondary pointer detected: ACTION_POINTER_DOWN");
    print("Action index: " +str(event.getActionIndex()));
  }
  // ACTION_POINTER_UP 
  else if(event.getActionMasked() == 6)
  {
    print("ACTION_POINTER_UP");
    print("Action index: " +str(event.getActionIndex()));
  }
  // 
  else if(event.getActionMasked() == 4)
  {

  }

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