四角の中央に丸を配置する方法 「オセロ」

Question

Processingでオセロを作ろうとしています。
初心者なのであまり難しい関数はわかりません。
四角の中央に丸を配置したいのですがやり方がわかりません。
分かる方教えてもらえると幸いです。

現状はこんな感じです。
void setup(){
size(400,400);
background(0,150,0);
}

void draw(){
for(int i=0; i<=8; i++){
for(int j=0; j<=8; j++){
stroke(0);
line(i50,0,i50,400);
line(0,j50,400,j50);
}
}
}

void mousePressed(){
noStroke();
if(mouseButton==LEFT){
fill(255);
ellipse(mouseX,mouseY,35,35);
}else if(mouseButton==RIGHT){
fill(0);
ellipse(mouseX,mouseY,35,35);
}
}

Answer 1

やってることは結局map()と一緒ですけど、関数が嫌いなら。

void mousePressed() {  
  int x=mouseX/(width/8)*(width/8)+(width/8/2);
  int y=mouseY/(height/8)*(height/8)+(height/8/2);
  noStroke();
  if (mouseButton==LEFT) {             
    fill(255);    
  } else if (mouseButton==RIGHT) {
    fill(0);              
  }
  ellipse(x, y, 35, 35);//同じ処理は一箇所に書こう
} 

int同士の計算はintで閉じている(小数点以下は切り捨てになる)ことに注意。
切り捨ての分があるので、mouseX/(width/8)*(width/8)の結果は必ずしもmouseXにならない(なる場合もある)
mouseX/(width/8)で0～width-1(widthは画面幅を取得する変数。この場合は400)を0～7の整数にマッピングしていることになる。
(width/8とかheight/8をあちこちで使うから予め計算して変数にとっておいてもいいですね)

Comments

[keyakizakarrisa]

ありがとうございます
参考にします

Answer 2

こんな感じでどうでしょうか？

void mousePressed() {
    noStroke();
    // マウス座標の 0～400 を 1～8 に変換
    int x_pos = (int)map(mouseX, 0, 400, 1, 8);
    int y_pos = (int)map(mouseY, 0, 400, 1, 8);
    // １マスのサイズを計算
    int x_size = 400 / 8;
    int y_size = 400 / 8;
    // 配置位置を計算
    int x = x_pos * x_size - x_size / 2;
    int y = y_pos * y_size - y_size / 2;
    if (mouseButton == LEFT) {
        fill(255);
        ellipse(x, y, 35, 35);
    } else if (mouseButton == RIGHT) {
        fill(0);
        ellipse(x, y, 35, 35);
    }
}

■ 実行結果

＜参考＞
■ Processing: map関数を使おう
https://scrapbox.io/ZawaBlogs/Processing:_map%E9%96%A2%E6%95%B0%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86

Comments

[keyakizakarrisa]

ありがとうございます
参考にします