ゲームパッドの十字キーで画像を上下左右に動かしたい

Question

前提・実現したいこと

Processingとゲームパッドを使用して、表示させた画像を動かしたいです。
今できる操作に加えてゲームパッドの十字キーを押すと上下左右に動かせる仕様にしたいです。

発生している問題・エラーメッセージ

// ゲームパッドを用いた画像の回転・拡大・縮小
// 左アナログスティックの左右: 回転
// ボタン5 & 6: 拡大・縮小
// ハットスイッチ: 上下左右に動く

import org.gamecontrolplus.*;

ControlIO control;
ControlDevice device;
ControlButton button4, button5, button6;
ControlSlider[] sliders = new ControlSlider[2];
ControlHat hat;

int angle = 30; // 座標の回転角度
int margin = 40; // 座標の移動量
int direction = 0; // 向き
int size = 300; // 大きさ
PImage comocomo;

void setup() {
  control = ControlIO.getInstance(this);

  // 名前を指定してデバイスを取得
  device = control.getDevice("PC Game Controller       ");

  button4 = device.getButton(4);
  //button4.plug(this, "pressButton4", ControlIO.ON_PRESS); // ボタン4を押すとpressButton4()関数を呼ぶ
  button5 = device.getButton(5);
  button5.plug(this, "pressButton5", ControlIO.ON_PRESS); // ボタン5を押すとpressButton5()関数を呼ぶ
  button6 = device.getButton(6);
  button6.plug(this, "pressButton6", ControlIO.ON_PRESS); // ボタン6を押すとpressButton6()関数を呼ぶ
  hat = device.getHat(0);
//  hat.plug(this, "pressHat0", ControlIO.ON_PRESS); // 十字キーを押すとpressHat0()関数を呼ぶ


  // 左アナログスティックのXY軸を取得 (現状はX軸のみ使用)
  sliders[0] = device.getSlider(3);
  sliders[1] = device.getSlider(4);



  size(500, 500);
  colorMode(HSB, 100);
  background(99);
  frameRate(20);

  comocomo = loadImage("hituji.png");
  imageMode(CENTER);
}

void draw() {
  background(99);
  translate(width / 2, height / 2);
  rotate(radians(angle * direction));
  image(comocomo, 0, 0, size, size);


  direction += (int)sliders[1].getValue(); // 左 = -1, 右 = 1, 入力無し = 0
  if (direction < 0) direction = 11;
  if (direction > 11) direction = 0;
  println(direction);
}


void pressButton5() {
  if (size > 20) size -= 5;
}

void pressButton6() {
  if (size< 400) size += 5;
}

void pressHat0() {

}

該当のソースコード

Processing

試したこと

十字キーの操作はHatで入力するのでHatを取得させてみました。
上が1、右が3、下が5、左が7のようにもうどの方向が押されたらこの数字と決まっているようです。
上下左右に動かすにはどのようにプログラミングすればいいのか分からず…
どなたか教えていただけませんか？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

まずは変数を用意して

int size = 300;
int imgX = 0; // X座標
int imgY = 0; // Y座標
PImage comocomo;

drawで値を増減します。

void draw() {
  background(99);
  translate(width / 2, height / 2);
  rotate(radians(angle * direction));
  image(comocomo, imgX, imgY, size, size); // 位置を指定

  direction += (int)sliders[0].getValue();
  if (direction < 0) direction = 11;
  if (direction > 11) direction = 0;

  float s = sin(radians(angle * direction));
  float c = cos(radians(angle * direction));

  if (hat.up()) {
    imgX -= s * margin;
    imgY -= c * margin;
  }
  if (hat.down()) {
    imgX += s * margin;
    imgY += c * margin;
  }
  if (hat.left()) {
    imgX -= c * margin;
    imgY += s * margin;
  }
  if (hat.right()) {
    imgX += c * margin;
    imgY -= s * margin;
  }
}

こんな感じでいいんじゃないでしょうか。
イベント（pressHat0 releseHat0）で増減してもいいですが、十字キーを連打することになるので使いにくくなりそうです。

Comments

[Manatan]

ありがとうございます！
出来ました！

[TN8001]

questions/226636をやってて気が付いたのですが、直感的な操作でなかったですねｗ
数学は苦手なのでもっとスマートな書き方があるのかもしれません。