# How to make two joysticks on a phone

**URL:** https://discourse.processing.org/t/how-to-make-two-joysticks-on-a-phone/36374
**Category:** Coding Questions
**Created:** [April 16, 2022, 9:33am UTC](https://discourse.processing.org/t/how-to-make-two-joysticks-on-a-phone/36374 "2022-04-16T09:33:29Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![urlxd](https://avatars.discourse-cdn.com/v4/letter/u/a88e4f/32.png) [@urlxd](https://discourse.processing.org/u/urlxd)
#### Post date: [April 16, 2022, 9:33am UTC](https://discourse.processing.org/t/how-to-make-two-joysticks-on-a-phone/36374/1 "2022-04-16T09:33:29Z")

</div>

when I make two joysticks mouse X and Y need to be divided into 4 parts. If anyone knows how please tell me.

code:  
Player player = new Player(100, 100);  
InterFace face;

int mapWidth = 2000;  
int mapHeight = 2000;  
int section\_field = 50;  
int cx,cy;

void setup (){  
size(displayWidth, displayHeight);  
face = new InterFace();  
}

void draw(){  
background (255);

field();

player.make();

face.make();  
face.press();  
face.mousePressed();

player.run(face.joystick1\_x2, face.joystick1\_y2);

textSize(20);  
fill(0,255,0);  
text(mouseX, 100,100);  
text(mouseY, 100,150);  
}

void field(){  
stroke(150);  
strokeWeight(1);  
for(int x = 0; x \< mapWidth + section\_field; x += section\_field) line(x + cx, 0 + cy, x + cx, mapHeight + cy);  
for(int y = 0; y \< mapHeight + section\_field; y += section\_field) line(0 + cx, y + cy, mapWidth + cx, y + cy);  
}

class Player{

int x,y,R = 70;  
int speed = 10;

Player(int x, int y){  
this.x = x;  
this.y = y;

}

void make(){  
fill(255,0,0);  
strokeWeight(2);  
stroke(75);  
rect(x - cx + width/2,y - cy + height/2,R,R);  
}

void run(int jx, int jy){  
x -= (jx - face.joystick1\_x1)/15;  
y -= (jy - face.joystick1\_y1)/15;

```
cx = x;
cy = y;

if(x > 960)x += (jx - face.joystick1_x1)/15;
if(x < -mapWidth + 960)x += (jx - face.joystick1_x1)/15;
if(y > 500)y += (jy - face.joystick1_y1)/15;
if(y < -mapHeight + 500)y += (jy - face.joystick1_y1)/15;

```

}  
}

class InterFace {

int R1\_1 = 200;  
int R1\_2 = 50;  
int joystick1\_x1 = 300;  
int joystick1\_y1 = 800;  
int joystick1\_x2 = joystick1\_x1;  
int joystick1\_y2 = joystick1\_y1;  
boolean click1 = false;

int joystick2\_x1 = width - 300;  
int joystick2\_y1 = 800;  
int joystick2\_x2 = joystick2\_x1;  
int joystick2\_y2 = joystick2\_y1;  
boolean click2 = false;

InterFace() {  
}

void make() {  
fill(200, 150);  
ellipse(joystick1\_x1, joystick1\_y1, R1\_1, R1\_1);

```
fill(100, 100);
ellipse(joystick1_x2, joystick1_y2, R1_2, R1_2);

fill(200, 150);
ellipse(joystick2_x1, joystick2_y1, R1_1, R1_1);

fill(100, 100);
ellipse(joystick2_x2, joystick2_y2, R1_2, R1_2);

```

}

void press() {  
if (click1) {  
if (mouseX \> joystick1\_x1 - R1\_1/2 && mouseX \< joystick1\_x1 + R1\_1/2) {  
joystick1\_x2 = mouseX;  
}

```
  if (mouseY > joystick1_y1 - R1_1/2 && mouseY < joystick1_y1 + R1_1/2) {
    joystick1_y2 = mouseY;
  }
  
  if(mouseX < joystick1_x1 - R1_1/2) joystick1_x2 = joystick1_x1 - R1_1/2;
  if(mouseX > joystick1_x1 + R1_1/2) joystick1_x2 = joystick1_x1 + R1_1/2;
  if(mouseY < joystick1_y1 - R1_1/2) joystick1_y2 = joystick1_y1 - R1_1/2;
  if(mouseY > joystick1_y1 + R1_1/2) joystick1_y2 = joystick1_y1 + R1_1/2;
}

if (!mousePressed || mouseX > joystick1_x1 + R1_1 * 3 || mouseY < joystick1_y1 - R1_1 * 2.5) {
  joystick1_x2 = joystick1_x1;
  joystick1_y2 = joystick1_y1;
  click1 = false;
}

if (click2) {
  if (mouseX > joystick2_x1 - R1_1/2 && mouseX < joystick2_x1 + R1_1/2) {
    joystick2_x2 = mouseX;
  }

  if (mouseY > joystick2_y1 - R1_1/2 && mouseY < joystick2_y1 + R1_1/2) {
    joystick2_y2 = mouseY;
  }
  
  if(mouseX < joystick2_x1 - R1_1/2) joystick2_x2 = joystick2_x1 - R1_1/2;
  if(mouseX > joystick2_x1 + R1_1/2) joystick2_x2 = joystick2_x1 + R1_1/2;
  if(mouseY < joystick2_y1 - R1_1/2) joystick2_y2 = joystick2_y1 - R1_1/2;
  if(mouseY > joystick2_y1 + R1_1/2) joystick2_y2 = joystick2_y1 + R1_1/2;
}

if (!mousePressed || mouseX > joystick2_x1 + R1_1 * 3 || mouseY < joystick2_y1 - R1_1 * 2.5) {
  joystick2_x2 = joystick2_x1;
  joystick2_y2 = joystick2_y1;
  click2 = false;
}

```

}

void mousePressed() {  
if (mouseX \> joystick1\_x1 - R1\_1/2 && mouseX \< joystick1\_x1 + R1\_1/2 && mouseY \> joystick1\_y1 - R1\_1/2 && mouseY \< joystick1\_y1 + R1\_1/2) {  
click1 = true;  
}

```
if (mouseX > joystick2_x1 - R1_1/2 && mouseX < joystick2_x1 + R1_1/2 && mouseY > joystick2_y1 - R1_1/2 && mouseY < joystick2_y1 + R1_1/2) {
  click2 = true;
}

```

}  
}