スタートページJavascript

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

はじめに

中学生になったとき、y = x2 のグラフの美しさに感動しました。その後、三角関数や媒介変数などを用いたグラフに接しました。特に、簡単な数式なのに、思いがけないグラフになることに感動を覚えたものです。
 その後、長い時間がたち、年金生活になりました。HTMLのCANVAS機能を知り、昔の思い出がよみがえって、若い人にその感動を押し付けようとして、このようなページにしてしまったという次第です。

ご利用方法

感動しない人でも、ちょっとしたグラフを描きたいことがあるでしょう。フォームに式を入れるだけでグラフが描けるツールにもなっています。

さらに、自分でもグラフ作図のプログラムを書きたい人には、「コード表示」によりソースコードが見えるようにしました。
 これらのプログラムでは、CANVAS機能を自作ライブラリの canvas.js を用いています( 使用解説書)。

「コード表示」「canvasxy」の著作権は私にありますが、適当にコピーして改変してお使いになるのは自由です。しかし、信頼性は保証していないし、ご利用による損害には責任を持ちません。

一覧表

ファイル名 入力項目 数式の特徴
exp   陽関数 y=f(x)
exp010 数式 y=f(x) 型の任意の数式を与える
exp011 数式 同上 パラメタ指定による複数グラフ
exp012 数式 同上 複数の y=f(x) 指定による複数グラフ
exp020 数式 y=f(x) (f(x)は三角関数)の任意の数式を与える
(機能はexp010と同じだが、三角関数と特徴である横長の表示範囲にした)
exp021 数式 双曲線関数( cosh(), sinh(), tanh() )
exp030 数式 y2=f(x) 型の任意の数式を与える
(厳密には陽関数ではないが)
exp031 自動 y2=f(x) 型 ハート形
exp032 自動 y2=f(x) 型 楕円・双曲線と焦点
exp110 数式 y=f(x) 型のグラフと微分・積分のグラフ
imp   陰関数 f(x,y)=0
imp010 数式 f(x,y)=0 型の任意の数式を与える
imp110 パラメタ 二次曲線 ax2+2bxy+cy2=1
imp111 パラメタ 一般の楕円と双曲線 ax2+2hxy+by2+2gx+2fy+c=0
imp120 パラメタ xa±ya=1
imp130 自動 (x2+y2+1)2 - 4x2 = k
カッシーニの卵形線
imp140 パラメタ 等高線を色で表示 f(x,y) = k
imp141 パラメタ 捕食-被食関係モデルの解曲線 F(x,y)=d*x-c*log(x)+b*y-a*log(y)=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 自動 螺旋と接線による図形
pol112 自動 4匹の犬(等角螺旋、ベルヌーイ螺旋)
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 数式 回転体のグラフ
com   複素数のグラフ
com010 なし 複素数の四則演算
com020 なし 複素数の二乗
com021 なし 複素数の累乗
com030 なし 複素数*(1+ai), 複素数*(a+1i),
com040 なし 複素数のn乗根
com110 なし 複素数の漸化式(マンデルブロ集合)
unclassified   未分類
bezie パラメタ ベジェ曲線(2次、3次)
dif210 自動 ロジステック曲線 差分方程式
dif220 パラメタ 微分方程式、ローレンツ方程式