プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Processing、ある地点とクリックした位置の距離を何となく計算する
2017/11/24追記
本ページでは三平方の定理を使った距離の求め方を説明していますが
よく調べたら、そのものズバリ!な「dist()」という関数がありました。
dist()関数は2点間の距離を取得する関数です。

ということで、できれば「ある地点とクリックした位置の距離を何となく計算する【改訂版】」の方を見てください。


最初に留意事項です。
このページの説明は

マウスの位置を取得する
クリックした位置を取得する

の2つのページに書かれている内容を理解している前提で書きます。
よく分からない人は、そっちから勉強してください。

それでは、やってみましょう。
結論から書くと、数学で出てくる「三平方の定理」を使います。

三平方の定理は、ざっくり説明すると
直角三角形があったときに

【横の長さの2乗】+【縦の長さの2乗】=【斜めの長さの2乗】

になるよ!な公式です。
※詳細は他のところで勉強してください。

20171119-05.png


それを踏まえて、ある地点(今回の例では「点」)とクリックした位置の距離を計算してみます。
点とクリックした位置の距離は、日本語で説明すると

「【点の横位置】から【クリックした場所の横位置】を引いた値を2乗した値」と「【点の縦位置】から【クリックした場所の縦位置】を引いた値を2乗した値」を足して、結果の平方根(2乗の反対)をとった値

です。
横の距離と縦の距離は引き算で求められるので、それを使って斜め距離を求めます。
斜めの距離が点とクリックした位置の距離です。

20171119-06.png


例えば、横位置「50」縦位置「100」の場所に点があったとしましょう。
クリックした場所の位置は変数「mouseX」「mouseY」に入っているとします。

値を2乗するときには「sq()」という関数を使います。
平方根をとるときの関数は「sqrt()」です。
ついでに、小数を何となく整数にするときは「int()」を使います。

そんな諸々を踏まえると、横位置「50」縦位置「100」の場所にある点とクリックした位置の距離は

int(sqrt(sq(50 - mouseX) + sq(100 - mouseY)))

で求められます。
※「50 - mouseX」「100 - mouseY」が正の数になるか負の数になるかは気にしなくてOKです。
 2乗すれば、どちらにしろ正の数になります。

という理屈で書いたのが以下の処理です。

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

void draw(){
    //点を打つ
    point(50,100);
}

void mousePressed() {
    background(255);
    
    //点との距離を求める
    int kyori = int(sqrt(sq(50 - mouseX) + sq(100 - mouseY)));
    
    //距離を表示
    fill(0);
    text("kyori= " + kyori, mouseX + 10, mouseY);
    noFill();
}

実行すると、最初は(小さくて見えにくい)点が1つあるだけです。
クリックすると、その点との距離が表示されます。

20171119-07.png

20171119-08.png


以上で、基本的な説明は終わりです。

せっかくなので、もう少し遊んでみましょう。

点の位置を変数で持つことにします。
例えば、こんな感じですねφ(--)

int basicPositionX = 50;
int basicPositionY = 100;


void setup(){
    size(400,400);
    background(255);
}

void draw(){
    //点を打つ
    point(basicPositionX,basicPositionY);
}

void mousePressed() {
    background(255);
    
    //点との距離を求める
    int kyori = int(sqrt(sq(basicPositionX - mouseX) + sq(basicPositionY - mouseY)));
    
    //距離を表示
    fill(0);
    text("kyori= " + kyori, mouseX + 10, mouseY);
    noFill();
}

ついでなので、クリックした位置との距離で大きさを変えてみましょうか。
点だと大きさを変えられないので丸にします。
例えば、こんな感じφ(--)

int basicPositionX = 50;
int basicPositionY = 100;
int kyori = 10;

void setup(){
    size(400,400);
    background(255);
}

void draw(){
    //丸を描く
    ellipse(basicPositionX,basicPositionY,kyori,kyori);

}

void mousePressed() {
    background(255);
    
    //点との距離を求める
    //int kyori = int(sqrt(sq(basicPositionX - mouseX) + sq(basicPositionY - mouseY)));
    kyori = int(sqrt(sq(basicPositionX - mouseX) + sq(basicPositionY - mouseY)));
    
    //距離を表示
    fill(0);
    text("kyori= " + kyori, mouseX + 10, mouseY);
    noFill();
}

実行すると、丸の近くをクリックするほど小さい丸、
遠くをクリックするほど大きな丸が表示されるはずです。

20171119-09.png

20171119-10.png


そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:Processing  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事