[Processing]点と点の距離を求める関数dist(), mag() : うえちょこ＠ぼろぐ

[Processing]点と点の距離を求める関数dist(), mag()

Written by uechoco 2 月 28

プログラミングベースのCGとかゲームとかを作るときに良く使う数式が、点と点、円と円、点と円、マウス座標と画面の中心、自機と敵機などの二点間の距離を求める数式です。数学的な求め方で言えば、二点間のx座標とy座標の差分をそれぞれ二乗したものを足し合わせて平方根を取ると、三平方の定理によって二点間の距離が求まるんですが、processingではそんなまどろっこしいことを覚える必要はありません。デザインを作るための言語ですので、デザインを作るのに関係のないことを必死に覚えなくて済むように設計されています。

dist()関数。「距離」という意味の「distance（ディスタンス）」という英語の略ですね。この関数がまどろっこしい数式を内包しているので、二点間の引数を与えてやれば距離が求まります。たとえば、

dist(10, 10, 110, 110);

と書くと、座標1(10, 10)と座標2(110, 110)の間の距離が返ってきます。この場合は141.42136が返ってきます。別の例だと、

dist(10, 10, mouseX, mouseY);

と書くと、座標1(10, 10)と現在のマウス座標の間の距離が返ってきます。特殊な場合として、

dist(0, 0, mouseX, mouseY);

などの片方の座標が(0, 0)の場合、省略記法として

mag(mouseX, mouseY);

というようにmag()関数を使うことができます。

というわけで、サンプルを作ってみました。マウスの座標にあわせて、原点(0, 0)からと円(cx, cy)からの距離をリアルタイムに求めて表示しています。

PLAIN TEXT

Processing:

int cx, cy; // 円の中心
 
PFont font;
 
 
void setup() {
  size(200, 200);
  colorMode(RGB, 100);
  background(100);
 
  cx = 120;
  cy = 60;
 
  font = loadFont("Tahoma-12.vlw");
  textFont(font, 12);
  textAlign(LEFT, TOP);
  println(dist(0, 0, 100, 100));
}
 
void draw() {
  // 背景を塗りつぶし
  noStroke();
  fill(100);
  rect(0, 0, width, height);
 
  // 円を描画
  stroke(40);
  fill(80);
  ellipse(120, 60, 30, 30);
 
  // 原点(0, 0)からの距離を求めて表示
  stroke(60, 0, 0);
  line(0, 0, mouseX, mouseY);
 
  fill(60, 0, 0);
  float fromZero = mag(mouseX, mouseY);
  // float fromZero = dist(0, 0, mouseX, mouseY); // 同じ
  text("from (0, 0): "+fromZero, 0, 5);
 
  // 円の中心からの距離を求めて表示
  stroke(0, 60, 0);
  line(cx, cy, mouseX, mouseY);
 
  fill(0, 60, 0);
  float fromCircle = dist(cx, cy, mouseX, mouseY);
  text("from ("+cx+", "+cy+"): "+fromCircle, 0, 30);
}