01
サーフェスプロットとは？
サーフェスプロットは、2変数関数 z = f(x, y) を高さの場として可視化します。平らな x/y 平面上の各点で関数が高さ z を与え、それらの高さをつなぐと 3D 空間に浮かぶ滑らかなメッシュになります。通常は色で高さを表すので、山と谷が一目で分かります。地形や板の上の温度分布、数学的な鞍の形などを描くのに自然な方法です。
🏔️ 3Dサーフェスプロッター
曲面 z = f(x, y) を回転できるカラーメッシュとして描画します。鞍や波紋などのプリセットを選ぶか、関数を自分で入力し、回転スライダーで回してみましょう。
z =
Allowed: + - * / ^ ( ) and sin, cos, tan, sqrt, abs, exp, log, pow; constants pi and e; variables x and y.
30
6
34°
52°
詳しく見る
02
3D表示の描画方法
このツールは定義域全体で関数を評価して点のグリッド（最大40×40）を作り、あなたが操作する2つの角度で点を回転し、回転した点を単純な等角投影で2Dに投影し、面を奥から手前へ並べ替えて近い面が遠い面を覆うようにします — 古典的なペインターズアルゴリズムです。すべては素の HTML canvas で描かれ、WebGL も three.js も使わないため、ツールは軽量で依存関係がありません。
03
安全な関数入力
独自のホワイトリストパーサーが式を読み、JavaScript の eval は使いません。したがって、記載された関数（sin, cos, tan, sqrt, abs, exp, log, pow）、定数 pi と e、2つの変数 x と y のみが受け付けられ、それ以外は実行前に拒否されます。始めるのに良い例はプリセットで、うねる波の場をつくる sin(x)*cos(y) や、古典的な鞍をつくる x^2 - y^2 があります。
よくある質問
どの変数を使えますか？
<strong>x</strong> と <strong>y</strong> を使います。ツールは選んだ定義域上のグリッドの各点で関数を評価し、高さ <em>z</em> を求めます。
どの関数が使えますか？
sin, cos, tan, sqrt, abs, exp, log, pow と、定数 pi・e が使えます。四則演算（+ − * /）で組み合わせ、べき乗は ^ で表します。例：z = sin(sqrt(x^2 + y^2))。
WebGL や three.js を使っていますか？
いいえ。ペインターズアルゴリズムで面を並べ替える自己完結型の HTML canvas 投影を使うため、外部依存がなく、控えめなハードウェアでもブラウザさえあればどこでも動作します。