matoに計算式（例えば、５０＋５２）のような式をを表示させたい

Question

matoに計算式（例えば、５０＋５２）のような式をを表示させ、ユーザーがパネルで計算結果を正確に打つと破壊されて、スコアが獲得
できるようにしたいです.

コードvoid mato() {
  if (width < imgX) {
    imgX = 0;
    imgVX = random(1, 5);
    img = imgs[int(random(imgs.length))];//画像がランダムで選ばれる。
  }

  image(img, imgX, 150, 50, 50);//X軸を等速直線に動く
  imgX += imgVX;
}

/*matoに計算式（例えば、５０＋５２）のような式をを表示させ、ユーザーがパネルで計算結果を正確に打つと破壊されて、スコアが獲得
できるようにしたいです*/
 
```panel

コードint button = -1;

String[] label = {"7","8","9","+/-",
  "4","5","6","-","1","2","3","+",
  "0", "="};

int getID(int i, int j) {
  if (j < 3) {
    return j * 4 + i;
  }
  if (i == 3) return 13;
  return 12; 
}

void showLabel(int i) {
  float bw = w / 4, bh = h / 4;

  fill(200);
  if (i < 12) {
    rect(x + (i % 4) * bw, y + (i / 4) * bh, bw, bh);
  } else if (i == 12) {
    rect(x               , y + 3 * bh, 3 * bw, bh);
  } else {
    rect(x + 3 * bw,       y + 3 * bh, bw, bh);
  }
  
  fill(0);
  if (i < 12) {
    text(label[i], x + bw * (i % 4) + bw / 2, y + (i / 4) * bh + bh / 2); 
  } else if (i == 12) {
    text(label[i], x + bw           + bw / 2, y + 3 * bh + bh / 2); 
  } else {
    text(label[i], x + bw * 3       + bw / 2, y + 3 * bh + bh / 2);
  }
}

void mousePressed() {
  button = -1;
  if (mouseX < x || mouseX > x + w) return;
  if (mouseY < y || mouseY > y + h) return;

  int i = int(4 * (mouseX-x) / w);
  int j = int(4 * (mouseY-y) / h);
  
  button = getID(i, j);
  calc(button);
}

void showPanel(float x, float y, float w, float h) {    
  rect(x, y, w, h);
  for(int i = 0; i < 14; i++) {
    showLabel(i);
  }
}

Answer 1

matoに計算式（例えば、５０＋５２）のような式をを表示させたい

画像に重ねるのか上だか下だか知りませんが、↓のようにするだけではありませんか？（多少の位置合わせは必要でしょうが）

image(img, imgX, 150, 50, 50);
text("50+52", imgX, 150);

ユーザーがパネルで計算結果を正確に打つ

「計算結果」をボタンで入力するんですよね？（電卓を作ってるわけじゃないんですよね？）
なんで演算キー（＋とか）があるんでしょうか？（逆にクリアキーなんかはないんですかね？）

破壊されて、スコアが獲得できるようにしたいです.

「実現したいこと」の提示はありがたいですが、やってみたことや分からないことの情報がありません。これでは単に作業依頼です。
ヘルプ | 質問する時のヒント
ヘルプ | 推奨していない質問

例えばスコアの変数やスコアを表示しようとしている様子が、提示コードからは全くうかがえません（実際はあるのかもしれませんが、それが分からないのでは無いのと同じです）

---

要は脳トレのようなものを作ってるわけですね。

「問題・答え・入力」をすべて文字列（String）で持ってしまうのが楽そうな気がします。
回答は面倒だったので足し算のみですが、四則演算に拡張するのも難しくはないでしょう。

無駄に「破壊」感を出してみましたｗ
Simple Particle System / Examples / Processing.org

final float x = 20;
final float y = 300;
final float w = 800 - 40;
final float h = 400;
final String[] label = {
  "7", "8", "9",
  "4", "5", "6",
  "1", "2", "3",
  "0", "", "C" };
final ParticleSystem ps = new ParticleSystem();

float imgX = 1000;
float imgVX = 2;
String question;
String answer;
String input;
int score;


void setup() {
  size(800, 800);
  textSize(48);
}

void draw() {
  background(127);
  showPanel();
  mato();

  textAlign(LEFT, BASELINE);
  text("SCORE: " + score, 10, 50);
  //textAlign(LEFT, BOTTOM);
  //text(answer, 10, 250);
  textAlign(CENTER, BOTTOM);
  text(input, 0, 0, width, 250);

  ps.run();
}

void mousePressed() {
  if (mouseX < x || mouseX > x + w) return;
  if (mouseY < y || mouseY > y + h) return;

  int i = int(3 * (mouseX - x) / w);
  int j = int(4 * (mouseY - y) / h);
  String s = label[getID(i, j)];

  if (s.equals("C")) { // クリア
    input = "";
    return;
  }

  input += s;
  if (input.equals(answer)) { // 正解
    score++;
    ps.addParticle(new PVector(imgX, 150), question);
    imgX = 1000; // 範囲外に飛ばすことで、matoでの再設定を誘発させる
  }
}

void showPanel() {
  rect(x, y, w, h);

  for (int i = 0; i < label.length; i++) {
    showLabel(i);
  }
}

void showLabel(int i) {
  float bw = w / 3;
  float bh = h / 4;
  float bx = x + (i % 3) * bw;
  float by = y + (i / 3) * bh;

  fill(200);
  rect(bx, by, bw, bh);
  fill(0);
  textAlign(CENTER, CENTER);
  text(label[i], bx, by, bw, bh);
}

void mato() {
  if (width < imgX) {
    imgX = 0;
    int a = int(random(1, 100));
    int b = int(random(1, 100));
    question = a + "+" + b; // 問題を文字列化
    answer = str(a + b); // 答えも文字列化
    input = "";
  }

  textAlign(LEFT, BASELINE);
  text(question, imgX, 150);
  imgX += imgVX;
}

int getID(int i, int j) {
  return j * 3 + i;
}


// [Simple Particle System / Examples / Processing.org](https://processing.org/examples/simpleparticlesystem.html)
// をベースに小改造（文字列を一文字ずつばらばらに四散させる）
class ParticleSystem {
  ArrayList<Particle> particles = new ArrayList<Particle>();
  void addParticle(PVector position, String str) {
    for (char c : str.toCharArray()) {
      particles.add(new Particle(position, c));
    }
  }
  void run() {
    for (int i = particles.size() - 1; i >= 0; i--) {
      Particle p = particles.get(i);
      p.run();
      if (p.isDead()) {
        particles.remove(i);
      }
    }
  }
}
class Particle {
  PVector position;
  PVector velocity = PVector.random3D().mult(10);
  float lifespan = 255;
  char c;
  Particle(PVector l, char c) {
    position = l.copy();
    this.c = c;
  }
  void run() {
    update();
    display();
  }
  void update() {
    position.add(velocity);
    lifespan -= 2;
  }
  void display() {
    push();
    translate(position.x, position.y);
    rotate(radians(position.z));
    fill(0, lifespan);
    textAlign(CENTER, CENTER);
    text(c, 0, 0);
    pop();
  }
  boolean isDead() {
    return lifespan < 0.0;
  }
}

Comments

[sho888]

参考にします。プログラミング初心者で、経験値が浅く、本当に助かりました。ありがとうございます。今後とも何卒宜しくお願い致します。

[sho888]

参考にします。プログラミング初心者で、経験値が浅く、本当に助かりました。ありがとうございます。今後とも何卒宜しくお願い致します。