02-13 グラフを描く

1 例題2-13-1
- 1.1 コード
- 1.2 結果
2 練習問題2-13-1
- 2.1 結果
3 練習問題2-13-2
- 3.1 結果
4 練習問題2-13-3
- 4.1 結果
5 練習問題2-13-4
- 5.1 結果

y=xやy=x²などの関数グラフを描く。

■setpoint関数とmoveto関数を作る

line 関数は始点と終点を与えて直線を描くが、関数グラフなどの連続した線を描く場合は、描画現在位置(LPX,LPY)から(x,y)位置に直線を描く moveto(x,y)関数があると便利である。合わせて現在位置を設定する setpoint(x,y)を定義する。

例題2-13-1

setpoint と moveto を使って y=x のグラフを描く。キャンバスのサイズは 400×400 とする。

コード

let LPX = 0, LPY = 0;  // 描画現在位置

function setpoint(x, y) {
  LPX = x + width / 2;
  LPY = height / 2 - y;  
}

function moveto(x, y) {
  let px = x + width / 2;
  let py = height / 2 - y;
  line(LPX, LPY, px, py);
  LPX = px; LPY = py;
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0, 0, 255);
  setpoint(-200, 0); moveto(200, 0);  // x軸
  for (let x = -180; x <= 180; x += 20) {
    setpoint(x, 5); moveto(x, -5);
  }
  setpoint(0, 200); moveto(0, -200);  // y軸 
  for (let y = 180; y >= -180; y -= 20) {
    setpoint(-5, y); moveto(5, y);
  }
  
  stroke(0);
  for (let x = -180; x <= 180; x += 10) {
    let y = x;
    if (x == -180)
      setpoint(x, y);
    else
      moveto(x, y);
  }
}