高校数学１０分プログラミング（数学Ⅱ編 5.微分法と積分法）2日目「接線を描く」解説

マガジンリスト　＞　数学Ⅱ編 5.微分法と積分法　＞　2日目 解説

本日の課題、おつかれさまでした。

課題の接線や法線を描くプログラムを作成することができたでしょうか。

解答例

今回の課題の接線や法線を描くプログラムの例を示します。

float x_range = 10.0; // x軸の表示範囲 -x_rangeからx_rangeまで
float y_range = 10.0; // y軸の表示範囲 -y_rangeからy_rangeまで 

void setup(){
  size(500,500);
  noLoop();

  setAxes(x_range, y_range); // 座標軸の準備
  
  noFill();
  
  // 曲線を描く
  stroke(0,0,0);  
  float x_min = -x_range;
  float x_max = x_range;
  draw_curve_function(x_min, x_max);

  // 接点をプロットする
  float a = 1.0; // 接点のx座標
  stroke(0,255,0);
  plot_contact_point(a);

  // 接線を描く
  stroke(255,0,0);
  draw_tangential_line(a, x_min, x_max);

  // 法線を描く
  stroke(0,0,255);
  draw_normal_line(a, x_min, x_max);

}

// 曲線を表す関数
float f(
  float x 
){
  return x*x-3.0*x+2.0;
}

// 曲線の導関数
float f_prime(
  float x
){
  return 2.0*x-3.0;
}

// 曲線を描く関数
void draw_curve_function(
  float x_min, // グラフの定義域の下限
  float x_max  // グラフの定義域の上限
){
  int plot_num = 2000; // グラフを描くための頂点の個数  
  
  // グラフを描画
  float x, y; // 関数の座標
  float X, Y; // キャンバス上の座標 
  beginShape();
  for(int i=1; i<plot_num; i++){
    x = x_min + (x_max - x_min) / plot_num * i; // 曲線上の点のx座標
    y = f(x); // 曲線上の点のyの値
    // キャンバス上の座標位置に換算
    X = width / 2.0 / x_range * x;
    Y = height / 2.0 / y_range * y;
    vertex(X, Y);
  }
  endShape();

}

// 接点をプロットする関数
void plot_contact_point(
  float a // 接点のx座標
){
  float y = f(a);// 接点のx座標
  float X, Y; // キャンバス上の座標
  // キャンバス上の座標位置に換算
  X = width / 2.0 / x_range * a;
  Y = height / 2.0 / y_range * y;
  strokeWeight(5);
  point(X, Y);
  strokeWeight(1);
}

// 接線を描く関数
void draw_tangential_line(
  float a, // 接点のx座標
  float x_min, // グラフの定義域の下限
  float x_max  // グラフの定義域の上限
){
  int plot_num = 2000; // グラフを描くための頂点の個数  
  
  // グラフを描画
  float x, y; // 関数の座標
  float X, Y; // キャンバス上の座標 
  beginShape();
  for(int i=1; i<plot_num; i++){
    x = x_min + (x_max - x_min) / plot_num * i; // 接線上の点のx座標
    y = f_prime(a) * (x-a) + f(a); // 接線上の点のyの値
    // キャンバス上の座標位置に換算
    X = width / 2.0 / x_range * x;
    Y = height / 2.0 / y_range * y;
    vertex(X, Y);
  }
  endShape();
}

// 法線を描く関数
void draw_normal_line(
  float a, // 接点のx座標
  float x_min, // グラフの定義域の下限
  float x_max  // グラフの定義域の上限
){  
  int plot_num = 2000; // グラフを描くための頂点の個数  
  
  // グラフを描画
  float x, y; // 関数の座標
  float X, Y; // キャンバス上の座標

  if( f_prime(a) == 0.0 ){
    X = width / 2.0 / x_range * a;
    line(X, -height/2.0, X, height/2.0);
  } else {
    beginShape();
    for(int i=1; i<plot_num; i++){
      x = x_min + (x_max - x_min) / plot_num * i; // 接線上の点のx座標
      y = - 1.0 / f_prime(a) * (x-a) + f(a); // 接線上の点のyの値
      // キャンバス上の座標位置に換算
      X = width / 2.0 / x_range * x;
      Y = height / 2.0 / y_range * y;
      vertex(X, Y);
    }
    endShape();
  }
}

ソースコード2　曲線上の点における接線と法線とを描くプログラム（完成版）

スケッチ「drawTangentialLine」の 「drawTangentialLine」タブのテキストエディタ部分を書き換えて、実行してみると、図2のように実行ウィンドウのキャンバス上に、課題の曲線のグラフが黒色、接点が緑色、接線のグラフが赤色、法線のグラフが青色でそれぞれ描かれます。

図2　課題の接線と法線のグラフ

本日は以上です。
明日は、関数の極大値、極小値を求めるプログラムについて考えていきます。

明日もよろしくお願いします。

読んだ感想などをお寄せください

本記事を読んだ感想や質問などを以下のお問い合せフォームからお寄せください。（お問合せフォームの本文に、本記事のタイトルを入れてください。）

お問い合わせ | note（ノート）

MK’s papa