高校数学をプログラミングで解く（数学I編）「1-0-2 グラフを描くための準備（その2）」

2023年11月1日 04:12

はじめに

記事『高校数学をプログラミングで解く（数学I編）「1-0-1 グラフを描くための準備（その1）」』で実行ウィンドウのキャンバス上にグラフを描いていくための準備として座標軸を描くためのプログラムを作成しました。今回は、その続きとして座標軸を描くためのプログラムを関数化し、その関数の利用方法について解説します。

座標軸を描くプログラム（再掲）

記事『高校数学をプログラミングで解く（数学I編）「1-0-1 グラフを描くための準備（その1）」』で作成した座標軸を描くためのプログラムを再掲します。

// 関数のグラフを描く
void setup(){
  size(500, 500); // キャンバスの大きさを指定する
  translate(width/2, height/2); // 座標の中心をキャンバスの中心に移動する

  stroke(128,128,128); // 線の色をグレーにする
  
  // 軸の設定
  line(-width/2, 0.0, width/2, 0.0); // x軸
  line(0.0, -height/2, 0.0, height/2); // y軸
  
  // 目盛りの設定
  float scale_size = 10.0; // 目盛りの幅（pixel単位）
  int scale_num = 20; // 目盛りの数
  float pos_scale; // 目盛りの位置
  
  // x軸に目盛りを設定する
  for(int i=0; i<=scale_num; i++){
    pos_scale = -width/2.0 + i * width / scale_num;
    line(pos_scale, -scale_size/2.0, pos_scale, scale_size/2.0);
  }
  // y軸に目盛りを設定する
  for(int i=0; i<scale_num; i++){
    pos_scale = -height/2.0 + i * height / scale_num;
    line(-scale_size/2.0, pos_scale, scale_size/2.0, pos_scale);
  }

  float x_range = 10.0; // グラフの表示範囲を-x_rangeからx_rangeまでとする
  float y_range = 10.0; // グラフの表示範囲を-y_rangeからy_rangeまでとする

  // x軸とy軸の両端にxとyのそれぞれの範囲を表す数字を表示
  textAlign(LEFT, TOP);
  text("0", 0.0,0.0);
  textAlign(LEFT, TOP);
  text(int(-x_range), -width/2.0, 0.0);
  textAlign(RIGHT, TOP);
  text(int(x_range), width/2.0, 0.0);
  textAlign(LEFT, BOTTOM);
  text(int(-y_range), 0.0, height/2.0);
  textAlign(LEFT, TOP);
  text(int(y_range), 0.0, -height/2.0);
 
  scale(1,-1); // y軸正の向きを下向きから上向きに反転する

  // 以下にグラフを描いていく
  noFill(); // グラフの中身を塗りつぶさない
  stroke(0,0,0); // グラフの線の色を黒色に設定

}

ソースコード1　座標軸を描くプログラム（再掲）

このソースコード1を、Processingの開発環境ウィンドウを開いて（スケッチ名を「drawAxes」としています）、テキストエディタ部分に書いて実行すると、図1のように、$${-10 \leq x \leq 10}$$、$${-10 \leq y \leq 10}$$の表示範囲で座標軸を描きます。

座標軸を描くためのプログラムの関数化

ソースコード1を書き換えて、座標軸を描くプログラムを関数化していきます。また、今後グラフ描画の際に一から座標軸のプログラムを書いていくことは煩わしいので、関数をpdeファイルとして保存して再利用できるようにしていきます。
具体的には、次の手順で行います。

① スケッチ「drawAxes」の開発環境ウィンドウのタブ欄にある▼のボタンを押すと、メニューが表示されるので、「新規タブ」を選択します。

② 「新規名」ダイアログが表示されますので、「ファイルの新しい名前:」の入力欄に「setAxes」と入力して、「OK」ボタンを押します。

③ タブ欄に新たに「setAxes」タブが追加されます。

④ 「drawAxes」タブを選択し、そのテキストエディタ部分に書いてあるコード（ソースコード1）の

translate(width/2, height/2); // 座標の中心をキャンバスの中心に移動する

から

scale(1,-1); // y軸正の向きを下向きから上向きに反転する

までを切り取り、その部分を「setAxes」タブのテキストエディタにコピーして、関数「setAxes」を作成します。なお、setAxes関数の引数は、グラフの表示範囲を設定するパラメータとなっています。

// 座標軸を描画する関数
void setAxes(
  float x_range, // グラフの表示範囲を-x_rangeからx_rangeまでとする
  float y_range  // グラフの表示範囲を-y_rangeからy_rangeまでとする
){
  
  translate(width/2, height/2);
  
  stroke(128,128,128); // 線の色をグレーにする
  
  // 軸の設定
  line(-width/2, 0.0, width/2, 0.0); // x軸
  line(0.0, -height/2, 0.0, height/2); // y軸
  
  // 目盛りの設定
  float scale_size = 10.0; // 目盛りの幅（pixel単位）
  int scale_num = 20; // 目盛りの数
  float pos_scale; // 目盛りの位置
  
  // x軸に目盛りを設定する
  for(int i=0; i<=scale_num; i++){
    pos_scale = -width/2.0 + i * width / scale_num;
    line(pos_scale, -scale_size/2.0, pos_scale, scale_size/2.0);
  }
  // y軸に目盛りを設定する
  for(int i=0; i<scale_num; i++){
    pos_scale = -height/2.0 + i * height / scale_num;
    line(-scale_size/2.0, pos_scale, scale_size/2.0, pos_scale);
  }
  // x軸とy軸の両端にxとyのそれぞれの範囲を表す数字を表示
  textAlign(LEFT, TOP);
  text("0", 0.0,0.0);
  textAlign(LEFT, TOP);
  text(int(-x_range), -width/2.0, 0.0);
  textAlign(RIGHT, TOP);
  text(int(x_range), width/2.0, 0.0);
  textAlign(LEFT, BOTTOM);
  text(int(-y_range), 0.0, height/2.0);
  textAlign(LEFT, TOP);
  text(int(y_range), 0.0, -height/2.0);
  
  scale(1,-1); // 座標系を上下反転させる
  
}

ソースコード2　座標軸を描くための関数「setAxes」

このとき、スケッチ「drawAxes」の「setAxes」タブは図5のようになっています。

⑤ 「drawAxes」タブを選択し、そのテキストエディタ部分に以下のソースコードに書き換えます。具体的には、setAxes関数を呼び出す形で座標軸を描くようにしています。

// 関数のグラフを描く
void setup(){
  size(500,500);
  noLoop();
  float x_range = 10.0; // x軸の表示範囲 -x_rangeからx_rangeまで
  float y_range = 10.0; // y軸の表示範囲 -y_rangeからy_rangeまで 
  setAxes(x_range, y_range); // 座標軸の準備
  
  // 以下にグラフを描いていく
  noFill(); // グラフの中身を塗りつぶさない
  stroke(0,0,0); // グラフの線の色を黒色に設定

}

ソースコード3　座標軸を描くための関数を呼び出す

この状態で実行ボタンを押して、図1のような座標軸が実行ウィンドウのキャンバスに表示されれば成功です。

⑥ 最後に、「ファイル」メニューの「保存」を選択して、スケッチを保存しておきます。

座標軸を描くための関数の利用方法

上記で、座標軸を描くプログラムを関数化し、さらにその関数をpdeファイルとして保存しました。ここでは、pdeファイルとして準備したsetAxes関数を利用して、グラフを描いていく方法を解説していきます。

2次関数$${y=x^2+4x+3}$$を描いていきます。実際に描いた結果は以下の通りです。

① まず、今回利用するスケッチを新規に作成します。新しい開発環境ウィンドウを立ち上げ、スケッチの名前を「drawFunction」として準備します。

② エクスプローラーを立ち上げ、左側のメニューから「ドキュメント」をクリックし、右側に現れるフォルダやファイルのリストから「Processing」フォルダをダブルクリックします。すると、これまで作成したスケッチフォルダーの一覧が表示されます。

③ 一覧の中から「drawAxes」フォルダをダブルクリックして「drawAxes」フォルダを開きます。

④「setAxes.pde」ファイルを右クリックするとメニューが出るので、その上部のコピーボタンを押します。

⑤ 左上の ↑ ボタンを押して、スケッチフォルダーの一覧の「Processing」フォルダ（図10）に戻ります。

⑥ 一覧（図10）の中から「drawFunction」フォルダをダブルクリックして「drawFunction」フォルダを開きます（図14）。そして、図14の赤色の枠で囲んだ領域を右クリックするとメニューが現れるので、その中の貼り付けボタン（青色の枠）を押します。

⑦ その結果、「setAxes.pde」ファイルが「drawFunction」フォルダにコピーされます。

図15　「setAxes.pde」ファイルを「drawFunction」フォルダにコピー

⑧ また、⑦と同時に、開発環境ウィンドウのタブ欄に「setAxes」タブが追加されます。

図16　「drawFunction」の開発環境ウィンドウに「setAxes」タブが追加される

⑨ ここから、2次関数を描くためのプログラムを書いていきます。なお、２次関数を描くプログラムについては、記事『高校数学をプログラミングで解く（数学I編）「1-0-1 グラフを描くための準備（その1）」』で解説していますので、そちらをご覧ください。

void setup(){
  size(500,500);
  noLoop();
  float x_range = 10.0; // x軸の表示範囲 -x_rangeからx_rangeまで
  float y_range = 10.0; // y軸の表示範囲 -y_rangeからy_rangeまで 
  setAxes(x_range, y_range); // 座標軸の準備
  
  noFill();
  stroke(0,0,0);
  
  // グラフの定義域
  float x_min = -x_range;
  float x_max = x_range;
  int plot_num = 200; // グラフを描くための頂点の個数  
  
  // グラフを描画
  float x, y; // 関数の座標
  float X, Y; // キャンバス上の座標 
  beginShape();
  for(int i=0; i<=plot_num; i++){
    x = x_min + (x_max - x_min) / plot_num * i; // 関数のx座標
    y = quadraticfunction(x); // 関数の値
    // キャンバス上の座標位置に換算
    X = width / 2.0 / x_range * x;
    Y = height / 2.0 / y_range * y;
    vertex(X, Y);
  }
  endShape();

}

float quadraticfunction(
  float x
){
  return x*x + 4.0*x + 3.0;
}

ソースコード4　2次関数$${y=x^2+4x+3}$$を描くプログラム

このソースコード4を、スケッチ「drawFunction」の「drawFunction」タブに記述します。

最後に、実行ボタンを押すと、図8のように、実行ウィンドウのキャンバス上に、座標軸とともに2次関数$${y=x^2+4x+3}$$が描画されます。

まとめ

今回は、記事『高校数学をプログラミングで解く（数学I編）「1-0-1 グラフを描くための準備（その1）」』の続きとして座標軸を描くためのプログラムを関数化し、その関数の利用方法について解説しました。
特に、関数を別のpdeファイルとして保存することで、そのファイルをグラフを描くために準備したスケッチ（フォルダ）にコピーすることで関数を再利用することができることを解説しました。
以降の記事でグラフを描く場合、特に断らない限り、setAxes関数のpdeファイルをスケッチにコピーすることで座標軸を準備するようにします。そのため、このコピー方法だけ覚えておいてください。

参考文献

Processingをはじめよう第２版（オライリー・ジャパン、オーム社、ISBN9784873117737）

この記事が気に入ったらサポートをしてみませんか？