processingのマウス操作について

質問

現在processingを使って、画像のような図を作り、マウスでクリックしたところだけに色がついて、もう一度クリックすると色が消えるというプログラミングを作りたいと思っているのですが、なかなかうまくできません。
以下現在打ち込んでいるものです

// Click within the image to change
// the value of the rectangle after
// after the mouse has been clicked

int value = 255;
int rect_size = 50;
int num = 300 / rect_size;
int x;

void setup(){
size(300,300);
}

void draw(){
fill(value);

for (int i = #ffffff;i < num;i++){
for (int j = 0;j < num;j++){
if (j%2 == 0){
x = i*rect_size*2;
}
else {
x = i*rect_size*2+rect_size;
}

rect(x,j*rect_size,rect_size,rect_size);
}
}
}

void mouseClicked() {
if (value == 255) {
value = #aaaaaa;
} else {
value = 255;
}
}

使用言語はすべて英語です。
おそらく、drawのところでパターンとしてチェック模様を書いてしまっているのと、１マスだけに限定するという風な命令を書けていないからだと思うのですが、先生に訊いてもよくわかりません。
ご存じの方はご指導ご鞭撻のほどどうぞよろしくお願いします。

回答No.1

koujikuu · ベストアンサー

processing 勉強中の身ですが、参考に

int step=50;
int bx,by;
int white=255,gray=200,black=0;
int mx,my;
int[][] fx;

void setup(){
size(300,300);
bx=width/step+1;by=height/step+1;
fx = new int[bx][by];
for (int y=0;y<by;y++){
for (int x=0;x<bx;x++){fx[x][y]=0;}
}
}

void draw(){
for (int y=0;y<by;y++){
for (int x=0;x<bx;x++){
if (x%2==0){if (y%2==0){fill(white);} else {fill(gray);} }
else {if (y%2==0){fill(gray);} else {fill(white);} }
if (fx[x][y]!=0){fill(black);}
rect(x*step,y*step,step,step);
}
}
}

void mouseClicked(){
mx=mouseX/step;my=mouseY/step;
if (fx[mx][my]==0){fx[mx][my]=1;} else {fx[mx][my]=0;}
}

お礼

ありがとうございます！とても困っていたので大変助かりました！