Processing:極座標とデカルト座標 - 元Webデザイナー兼コーダーの備忘録

「The Nature of Code」から極座標とデカルト座標について取り上げます。極座標からデカルト座標に変換する方法について学びます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

極座標とデカルト座標
極座標からデカルト座標に変換する例
- メモ
螺旋
まとめ
参考書籍

本記事の参考書籍は以下です。

極座標とデカルト座標

Processingでは、位置をデカルト座標で指定します。つまり、rect()メソッドやellipse()メソッドの引数を指定するとき、x、y座標すなわちデカルト座標で座標を指定します。

しかし、極座標で考えた方が楽で分かりやすいです。座標を円の半径と回転角で考えるので、物体の次の位置を計算するのが楽になります。手順としては、

極座標で座標を考える
極座標からデカルト座標に変換する
図形を描画するメソッドの引数に座標を渡して、図形を描画する
新しい座標に更新する

のような手順になります。やることは増えますが、こちらの方が座標を更新する処理が楽になります。

極座標とデカルト座標の変換は、以下のようになります。この変換は可逆です。

cosine(theta) = x/r → x = r * cosine(theta)
sine(theta) = y/r → y = r * sine(theta)

例えば、rが75でθが45度(PI/4ラジアン)の場合、xとyは以下のように計算できます。

float r = 75;
float theta = PI / 4;
float x = r * cos(theta);
float y = r * sin(theta);

極座標からデカルト座標に変換する例

以下は、極座標からデカルト座標に変換する参考例です。

//Polar to Cartesian
float r = 75;
float theta = 0;

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

void draw() {
  //極座標からデカルト座標に変換
  float x = r * cos(theta);
  float y = r * sin(theta);

  noStroke();
  fill(0);
  //ellipse(x+width/2, y+height/2, 16, 16);
  translate(width/2, height/2);
  ellipse(x, y, 16, 16);

  theta += 0.01;
}

メモ

円を描画する位置の指定方法を2通り示します。

//ウィンドウの中心座標+x(y)座標
ellipse(x+width/2, y+height/2, 16, 16);

//上記の書き換え
//translate()で原点をウィンドウの中央に変更
//予め計算したx、y座標をellipse()の引数として渡す
translate(width/2, height/2);
ellipse(x, y, 16, 16);

螺旋

以下は、螺旋を描くプログラムの参考例です。

//spiral
float r = 0;
float theta = 0;

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

void draw(){
  //極座標からデカルト座標に変換
  float x = r * cos(theta);
  float y = r * sin(theta);

  noStroke();
  fill(0);
  translate(width/2, height/2);
  ellipse(x, y, 16, 16);

  theta += 0.01;
  r += 0.05;
}