クリックした場所だけ色を変えたいです

Question

電話番号のように数字の所を押すと押した所だけ色を変えたいです。

数字を押すと、縦一列全て色が変わってしまいます。
どのように改善すればよいでしょうか。
Processing初心者です。>

char[]kfont = {'1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'};//出力する文字
int[]fcnt = {0, 0, 0,};//ボタンの色を変える時間を計測

void setup() {
size(300, 400);
PFont f = createFont("Meiryo", 72);
textFont(f);
textAlign(CENTER, CENTER);
}

void draw() {
for (int i=0; i<3; i++) {
for (int j=0; j<4; j++) {
fill(255);
rect(35+i80, 50+j80, 75, 75);
if (fcnt[i]>0) {
fill(255, 0, 0);
fcnt[i]--;
} else {
fill(0);
}
text(kfont[i+3j], 75+i80, 75+j*80);
}
}
}

void mouseClicked() {

for (int i=0; i<3; i++) {
for (int j=0; j<4; j++) {
if (mouseX>(35+i80)&&
mouseX<(35+i80)+75 &&
mouseY>50+j80 &&
mouseY<(50+j80)+75) {//それぞれのボタンのサイズで押された場所の判定
fcnt[i]=10;
print(kfont[i+3*j]);
}
}
}
}

Answer 1

int[]fcnt = {0, 0, 0,};//ボタンの色を変える時間を計測
ボタンの数必要ですね。

fcnt[i]もボタンに対応する必要があるのでこれでは間違ってる。
kfont[i+3*j]でボタンのテキスト出してるのだから…fcntも当然（略

char[]kfont = {'1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'};//出力する文字
int[]fcnt =   {  0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0,   0};//ボタンの色を変える時間を計測

void setup() {
  size(300, 400);
  PFont f = createFont("Meiryo", 72);
  textFont(f);
  textAlign(CENTER, CENTER);
}

void draw() {
  for (int i=0; i<3; i++) {
    for (int j=0; j<4; j++) {
      fill(255);
      rect(35+i*80, 50+j*80, 75, 75);
      if (fcnt[i+3*j]>0) {
        fill(255, 0, 0);
        fcnt[i+3*j]--;
      } else {
        fill(0);
      }
      text(kfont[i+3*j], 75+i*80, 75+j*80);
    }
  }
}

void mouseClicked() {
  for (int i=0; i<3; i++) {
    for (int j=0; j<4; j++) {
      if (mouseX>(35+i*80)&&
        mouseX<(35+i*80)+75 &&
        mouseY>50+j*80 &&
        mouseY<(50+j*80)+75) {//それぞれのボタンのサイズで押された場所の判定
        fcnt[i+3*j]=10;
        print(kfont[i+3*j]);
      }
    }
  }
}

Answer 2

回答はrururu3さんの通りです。

手軽さをとるなら専用のライブラリを使うという選択肢もあります。
「ライブラリをインポート...」から入れられるControlP5を使うと、ボタン等が簡単に作れます。

import controlP5.*;

ControlP5 cp5;
char[]kfont = {'1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'};

void setup() {
  size(300, 400);
  cp5 = new ControlP5(this);
  ControlFont font = new ControlFont(createFont("Meiryo", 72));

  for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 4; j++) {
      String label = str(kfont[i + 3 * j]);
      cp5.addButton("btn" + label).setLabel(label).setFont(font)
         .setPosition(35 + i * 80, 50 + j * 80).setSize(75, 75);
    }
  }
}

void draw() {
}

void btn1() { // ボタンの名前と同名関数で押したときの処理
  println("btn1 clicked");
}

void controlEvent(ControlEvent event) { // まとめて受ける場合
  String name = event.getController().getName();
  if(name.equals("btn1")) return;
  println(name + " clicked");
}

processing GUI, controlP5