スタートページJavascript

美しい数式グラフ
HTML5のCANVASによるグラフの作成

はじめに

中学生の頃、y = x2 のグラフの美しさに感動しました。その後、三角関数や媒介変数などを用いたグラフに接しました。特に、簡単な数式なのに、思いがけないグラフになることに感動すら覚えたものです。
 パソコンのBASICでグラフが描けるようになった頃は、簡単に実験ができるので、結構のめりこんだものでした。

 その後、数十年たち、すっかり忘れていたのですが、HTML5のCANVAS機能とJavascriptの拡張があり、Webページにグラフを記述できるようになりました。この機能を理解するつもりでテストをしたのですが、昔の思い出があり、このようなページにしてしまったという次第です。

http://www.kogures.com/hitoshi/sonota/xycoordinate.js
Canvasの画像エリアは左上(0,0)~右下(cw,ch)(cw,chは画素数)の表示方法になっていますが、数学的なグラフを取り扱うには、左下(xmin,ymin)~右上(xmax,ymax)の仮想的なxy座標を用いるほうが便利です。また、Javascriptのコマンド群では、線を引く、点を打つなどの機能が複数コマンドになり煩雑ですので、drawLine(x0,y0, x1,y1, line_color, line_width)のような関数を作りました。

一覧表

ファイル名 入力項目 数式の特徴
exp   陽関数 y=f(x)
exp010 数式 y=f(x) 型の任意の数式を与える
exp020 数式 y=f(x) (f(x)は三角関数)の任意の数式を与える
(機能はexp010と同じだが、三角関数と特徴である横長の表示範囲にした)
exp030 数式 y2=f(x) 型の任意の数式を与える
(厳密には陽関数ではないが)
imp   陰関数 f(x,y)=0
imp010 数式 f(x,y)=0 型の任意の数式を与える
imp110 パラメタ 二次曲線 ax2+2bxy+cy2=1
imp120 パラメタ xa±ya=1
imp130 自動 (x2+y2+1)2 - 4x2 = k
カッシーニの卵形線
imp310 自動 sin(x) + sin(2y) + sin(3x) + sin(4y) + sin(5x) = 0
(トーテムポール)
imp320 自動 x2y - y3 - x4 = k (猿面)
par   媒介変数 x=f(t), y=g(t)
par010 数式 x=f(t), y=g(t) 型の任意の数式を与える
par210 パラメタ x=cos(at), y=sin(bt)
par310 自動 x = t - sin(t)  サイクロイド
y = 1 - cos(t)
par320 自動 x = 2cos(t)-cos(2t)  エピ・サイクロイド(固定円と回転円の半径1)
y = 2sin(t)-sin(2t)
par321 自動 x = (1+r)*cos(t) - r*cos((1+r)/r*t)  エピ・サイクロイド(回転円の半径r)
y = (1+r)*sin(t) - r*sin((1+r)/r*t)
par322 自動 x = (1-r)*cos(t) + r*cos((1-r)/r*t)  ハイポ・サイクロイド
y = (1-r)*sin(t) - r*sin((1-r)/r*t)
par323 自動 x = cos(t)+t*sin(t)  円の伸開線
y = sin(t)-t*cos(t)
par340 自動 x = R*cos(t/A) + r*cos(t/a) R:地球の公転半径、r:月の公転半径  R/r=2
y = R*sin(t/A) + r*sin(t/a) A:地球の公転周期、a:月の公転周期  A/a=6
pol   極座標表示 r=f(t): x=r*cos(t), y=r*sin(t)
pol010 数式 r=f(x) 型の任意の数式を与える
pol110 パラメタ r=t 時間とともに原点からの距離が長くなる=渦巻
pol111 自動 渦巻の帯
pol120 パラメタ r=1/ta 時間とともに原点からの距離が短くなる
pol130 パラメタ r=t/(t-a)
pol210 自動 r = cos(t) + a (蝸牛線、リマゾン)
pol220 パラメタ r = sin(a*t) (正葉線)
pol230 パラメタ r = a*cos(t) + cos(a*t)
pol310 自動 r1 = 2*(0.5*cos(10*t)+1)*sin(5*t)2 + 0.1
r2 = (1/7)*(0.5*cos(10*t)+1)    コスモス
pol320 自動 r = sin(t) + cos(t2) (孔雀)
uvw   3次元(u,v,w)のグラフ
uvw010 なし 3次元グラフの留意事項
uvw110 数式 陽関数 w=f(u,v) のグラフ
uvw210 数式 媒介関数 u=fu(p,q), v=fv(p.q), w=fw(p,q) のグラフ
uvw310 数式 陰関数 f(u,v,w) = 0 のグラフ
uvw410 数式 回転体のグラフ