# Game control plus, buttons interacting with objects

**URL:** <https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811>\
**Category:** Libraries\
**Created:** [January 2, 2020, 1:04pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811 "2020-01-02T13:04:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hhussain99](https://avatars.discourse-cdn.com/v4/letter/h/ebca7d/32.png) [@Hhussain99](https://discourse.processing.org/u/Hhussain99)\
**Post date:** [January 2, 2020, 1:04pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/1 "2020-01-02T13:04:04Z")

</div>

Hi, im new to using processing as well as using game control plus, so bare with me. My objective is to use the game controller to create art on processing. However, being new to processing im struggling in connecting the input from the controller with the void draw. For example, i want when i press X on a  
red rectangle the trail i create turns red, however im really struggling to work out the code to achieve this

@quark, hope your well, would you mind giving some insight as to how to achieve this please?

thankyou

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 2, 2020, 1:42pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/2 "2020-01-02T13:42:19Z")

</div>

Need more info here.

1. What controller are you using?
2. Have you tried the examples that come with the library?
3. Can you post some of your code, keep it short and make sure you put comments in where you are having problems?

---

<div class="post-metadata">

**Author:** ![Hhussain99](https://avatars.discourse-cdn.com/v4/letter/h/ebca7d/32.png) [@Hhussain99](https://discourse.processing.org/u/Hhussain99)\
**Post date:** [January 2, 2020, 2:06pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/3 "2020-01-02T14:06:53Z")

</div>

I am using a ps4 controller  
Yes i have seen and used them, im trying to implement certain libraries such as the joystick example as that has similar characteristics to what i want to achieve. However, it doesnt show for example, when u press a button (X) over a specified area, the trail changes colour.

Sure here is some of it, like you have said keep it short so im just gonna post void draw code:

```auto
void draw(){
  String a = ("Welcome to GamePaint");
      textSize (30);
          fill (255,300,255);
        text (a,110,850);
        
        
        if (pageNumber==1){
          fill(255,0,0);
    rect(0, 0, 200, 100);

      fill(0,255,0);
      rect(0, 400, 200, 100);  
    
      fill(0,0,255);
      rect(0, 800, 200, 100);
    
        }
        
        if (OKtoDraw == true){
      if (device.getButton("XBTN").pressed()){
        rect (200,400,80,100);
         r=255;
    g=0;
    b=0;
    OKtoDraw=true;
    brushDiameter = 20;
        fill(r,g,b);
      ellipse(px, py, brushDiameter, brushDiameter);
      } 
      }

 getUserInput();
if (device.getButton("XBTN").pressed()) 
rect (300,400,400,200);
  r=255;
    g=0;
    b=0; // So this is the part im struggling on.
                                                 //The aim is so when i press X over the rect 
                                                 //with those coordinates, the px and py will   
                                                 //leave a trail of red ellipses. As an example.
    OKtoDraw=true;                                       
    brushDiameter = 20;
        fill(r,g,b);
  ellipse (px, py, brushDiameter,brushDiameter);
 
    }

```

I hope you understand what im trying to solve here, and i appreciate it for you helping also.

Thankyou

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 2, 2020, 4:16pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/4 "2020-01-02T16:16:26Z")

</div>

OK a couple of things you should do when copying code to the forum.

1. In the Processing IDE (where you write your code) press Ctrl+T. This will correctly indent the lines of code showing its structure.
2. When you paste the correctly indented code into the forum select it with the mouse and click on the \</\> button to format it for this forum.

This will make it easier for people like me to understand the problem.

When I said keep the code short I meant keep the ‘sketch code’ short and paste the whole sketch so I could run the code to see what is happening.

Some forum posters have some huge monolithic code base and are experiencing a problem in a specific area. In that situation it is not realistic to post the entire sketch so we expect the user to create a small sketch (\<\< 100 lines) that demonstrates the problem, if possible. So can you try that please?

---

<div class="post-metadata">

**Author:** ![Hhussain99](https://avatars.discourse-cdn.com/v4/letter/h/ebca7d/32.png) [@Hhussain99](https://discourse.processing.org/u/Hhussain99)\
**Post date:** [January 2, 2020, 4:28pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/5 "2020-01-02T16:28:31Z")

</div>

```auto

import org.gamecontrolplus.gui.*;
import org.gamecontrolplus.*;
import net.java.games.input.*;
import g4p_controls.*;
// This one is essential
ControlIO control;
// You will need some of the following depending on the sketch.

float px; 
float py;
float Rubber;
float Reset;
float XBTN;
int pageNumber=1;
int brushDiameter = 10;
int r=0;
int g=0;
int b=0;
float redrect;
boolean OKtoDraw =false;
GImageButton btnGhost, btnCoins, btnTJ, btnInfo;
GLabel lblOut;

// A ControlDevice might be a joystick, gamepad, mouse etc.
ControlDevice device;

// A device will have some combination of buttons, hats and sliders
ControlButton button;
ControlHat hat;
ControlSlider slider;

GCustomSlider sdr1, sdr2, sdr3, sdr4, sdr5, sdr6, sdr7;

boolean trailOn;

ArrayList<PVector> shadows = new ArrayList<PVector>();
ArrayList<PVector> trail = new ArrayList<PVector>();

void setup() {
  size (1920, 1080);
  control = ControlIO.getInstance(this);
  device = control.getMatchedDevice("GamePadPaint");

  PFont a = createFont ("Georgia", 90);
  String b = ("Welcome to GamePaint");
  textFont (a);
  textSize (90);
  fill (255, 100, 255);
  text (b, 275, 250);

  sdr1 = new GCustomSlider(this, 20, 20, 260, 50, null);
  // show opaque ticks value limits
  sdr1.setShowDecor(false, true, true, true);
  sdr1.setNbrTicks(5);
  sdr1.setLimits(40, -100, 100);

  if (device== null) {
    println("No suitable device configured");
    System.exit(-1); // End the program NOW!
  }

  button = device.getButton("0");
  hat = device.getHat("pov");
}
public void getUserInput () {

  px = map(device.getSlider("X").getValue(), -1, 1, 0, width);
  py = map(device.getSlider("Y").getValue(), -1, 1, 0, height);
  trailOn = device.getButton("XBTN").pressed();
}

void draw() {
  String a = ("Welcome to GamePaint");
  textSize (30);
  fill (255, 300, 255);
  text (a, 110, 850);

  if (pageNumber==1) {
    fill(255, 0, 0);
    rect(0, 0, 200, 100);

    fill(0, 255, 0);
    rect(0, 400, 200, 100);  

    fill(0, 0, 255);
    rect(0, 800, 200, 100);
  }

  if (OKtoDraw == true) {
    if (device.getButton("XBTN").pressed()) {
      r=255;
      g=0;
      b=0;
      OKtoDraw=true;
      brushDiameter = 20;
      fill(r, g, b);
      ellipse(px, py, brushDiameter, brushDiameter);
    }
  }

  getUserInput();
  if (device.getButton("XBTN").pressed()) 
    rect (300, 400, 400, 200);
  r=255;
  g=0;
  b=0; // So this is the part im struggling on.
  OKtoDraw=true; //The aim is so when i press X over the rect                              
  brushDiameter = 20; //with those coordinates, the px and py will 
  fill(r, g, b); //leave a trail of red ellipses. 
  ellipse (px, py, brushDiameter, brushDiameter);
}

void handleButtonEvents(GImageButton button, GEvent event) {
  if (button == btnGhost)
    lblOut.setText("Ghosts - png images using transparency");
  else if (button == btnCoins)
    lblOut.setText("Coins - png images using transparency");
}

```

---

<div class="post-metadata">

**Author:** ![Hhussain99](https://avatars.discourse-cdn.com/v4/letter/h/ebca7d/32.png) [@Hhussain99](https://discourse.processing.org/u/Hhussain99)\
**Post date:** [January 2, 2020, 4:32pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/6 "2020-01-02T16:32:50Z")

</div>

Thankyou for responding, I hope the reply helps @quark. If you scroll down near the bottom you can see the section in which i’m having difficulties on. I hope thats okay, if you want more info about anything feel free to ask.

Thankyou

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 5, 2020, 9:46am UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/7 "2020-01-05T09:46:15Z")

</div>

Sorry not to get back to you earlier but I have been very busy.

OK I also see that you are using G4P, this requires that you use [`background()` i](https://processing.org/reference/background_.html)nside the draw method. I think this maybe a part of the problem.

```auto
void draw() {
  background(0); // clear the frame to black before recreating it
  String a = ("Welcome to GamePaint");
  textSize (30);
  fill (255, 300, 255);
  text (a, 110, 850);
  ...

```

---

<div class="post-metadata">

**Author:** ![Hhussain99](https://avatars.discourse-cdn.com/v4/letter/h/ebca7d/32.png) [@Hhussain99](https://discourse.processing.org/u/Hhussain99)\
**Post date:** [January 7, 2020, 4:08pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/8 "2020-01-07T16:08:56Z")

</div>

I see, thankyou @quark i appreciate it.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [January 7, 2020, 5:25pm UTC](https://discourse.processing.org/t/game-control-plus-buttons-interacting-with-objects/16811/9 "2020-01-07T17:25:27Z")

</div>

Try the sketch again and from inside `getUserInput` simply println the variables px and py to make sure you are picking up the control device e.g.

```auto
public void getUserInput () {
  px = map(device.getSlider("X").getValue(), -1, 1, 0, width);
  py = map(device.getSlider("Y").getValue(), -1, 1, 0, height);
  trailOn = device.getButton("XBTN").pressed();
  println(px, py); // display in console pane
}
```