02-12 数学座標で表示する

1 例題2-12-1
- 1.1 コード
- 1.2 結果
2 練習問題2-12-1
- 2.1 結果

数学座標からp5.jsの座標に座標変換する方法を考える。

数学座標は画面の中央が原点（0,0）でｙ軸の正の向きは上方向である。一方p5.jsの座標は画面の左上隅が原点(0,0)でｙ軸の正の向きは下方向である。

p5.js のキャンバスのサイズはグローバル変数の width と height で得られる。数学座標の(x,y)を p5.js の座標に変換するには以下の式を使う。

px = x + width / 2
py = height / 2 - y

例題2-12-1

数学座標の座標を使ってp5.jsの画面に直線を描くmathLineを定義する。

コード

function mathLine(x1, y1, x2, y2) {
  px1 = x1 + width / 2
  py1 = height / 2 - y1
  px2 = x2 + width / 2
  py2 = height / 2 - y2
  line(px1, py1, px2, py2);
}
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0, 0, 255);
  mathLine(-200, 0, 200, 0);  // x軸
  mathLine(0, 200, 0, -200);  // y軸
}

結果

練習問題2-12-1

目盛り線を入れなさい。