概要
意外と検索してもヒットしなかったので、記事にまとめます。
大まかに言うと、等高線のplotをします。
やりたいこと
今回は $y^2 = x^3 - 4 x$ が描きたいグラフです。
$f(x,y) = x^3 - 4 x - y^2$ に対して、 $|f(x,y)| \le \epsilon$ を満たす点を描画します。
結果の例
結果はこんな感じです。
epsilon=0.1
ゼロの近傍を $-0.1 \le f(x,y) \le 0.1$ とした場合のグラフです。
epsilon=1.0
やっていることが分かりにくいので、ゼロの近傍を $-10 \le f(x,y) \le 10$ までに広げたものです。
方針
陰関数が描きたいというのに、等高線で我慢すれば良いんじゃね？と思ったのですが、見たいもの以外の情報が入りすぎるので情報を削ります。
- 楽するためには絶対値を取ります
- $f(x,y)$ は、ゼロをまたぐところで符号が変わります。
- 符号が変わると、
contourで描く等高線は別の色になります。 - 正負で同じ色をつける colorscale はなさそうです。それに、colorscaleをカスタマイズするのは面倒です。
- colorscale の
z_maxとepsilonを合わせます- $x^3$ のオーダーですし、スケールが広ければ広いほど 0 周辺が目立たなくなります。そうなると本末転倒ですから、カラーバーの目盛りを 0 ～
epsilonまでの範囲に制限します。
- $x^3$ のオーダーですし、スケールが広ければ広いほど 0 周辺が目立たなくなります。そうなると本末転倒ですから、カラーバーの目盛りを 0 ～
JavaScriptのコード例
function window_function(z, epsilon) {
positive_z = Math.abs(z);
if (positive_z > epsilon) return epsilon;
return positive_z;
}
let cd_ary_x = [];
let cd_ary_y = [];
let cd_ary_z = [];
let x_min = -5;
let x_max = 5;
let x_sample_size = 600;
let dx = (x_max - x_min) / x_sample_size;
let y_min = -5;
let y_max = 5;
let y_sample_size = 600;
let dy = (y_max - y_min) / y_sample_size;
let epsilon = 0.1;
for (let x = x_min; x <= x_max; x += dx) {
for (let y = y_min; y <= y_max; y += dy) {
cd_ary_x.push(x);
cd_ary_y.push(y);
cd_ary_z.push(window_function(x*x*x - 4 * x - y * y, epsilon));
}
}
var cd_trace = {
color:'rgb(0,0,0)',
x: cd_ary_x,
y: cd_ary_y,
z: cd_ary_z,
type: 'contour',
colorscale: 'Hot',
z_min: 0,
z_max: epsilon
};
var cd_layout = {
hovermode:'closest',
autosize: false, width: 600, height: 600,
yaxis: { l: 10, r: 10, b: 10, t: 10, pad: 4 },
paper_bgcolor: '#efefef'
};
Plotly.newPlot('jacobi_elliptic_functions_plot_area', [cd_trace], cd_layout, {displayModeBar: false});
呼び出し元のコード
今回は AsciiDoc に埋め込んだのでこんな感じです。
ifndef::leveloffset[]
:toc: left
:toclevels: 3
ifeval::["{backend}" == "html5"]
pass:[<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>]
endif::[]
endif::[]
include::header.adoc[]
== Jacobi elliptic functions
ifeval::["{backend}" == "html5"]
**楕円関数: f(_x_) = _x_^3^ -4__x__ - _y_^2^**
[pass]
++++
<div id="jacobi_elliptic_functions_plot_area"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
include::js/jacobi_elliptic_functions.js[]
</script>
++++
endif::[]
htmlで試したい人のために、htmlに仕立て上げたものも参考に載せます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Pragma" content="no-cache">
<meta charset="utf-8">
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<title>Jacobi elliptic functions</title>
</head>
<body>
<div id="jacobi_elliptic_functions_plot_area"></div>
<script language="JavaScript" type="text/javascript">
function window_function(z, epsilon) {
positive_z = Math.abs(z);
if (positive_z > epsilon) return epsilon;
return positive_z;
}
let cd_ary_x = [];
let cd_ary_y = [];
let cd_ary_z = [];
let x_min = -5;
let x_max = 5;
let x_sample_size = 600;
let dx = (x_max - x_min) / x_sample_size;
let y_min = -5;
let y_max = 5;
let y_sample_size = 600;
let dy = (y_max - y_min) / y_sample_size;
let epsilon = 0.2;
for (let x = x_min; x <= x_max; x += dx) {
for (let y = y_min; y <= y_max; y += dy) {
cd_ary_x.push(x);
cd_ary_y.push(y);
cd_ary_z.push(window_function(x*x*x - 4 * x - y * y, epsilon));
}
}
var cd_trace = {
color:'rgb(0,0,0)',
x: cd_ary_x,
y: cd_ary_y,
z: cd_ary_z,
type: 'contour',
colorscale: 'Hot',
z_min: 0,
z_max: epsilon
};
var cd_layout = {
hovermode:'closest',
autosize: false, width: 600, height: 600,
yaxis: { l: 10, r: 10, b: 10, t: 10, pad: 4 },
paper_bgcolor: '#efefef'
};
Plotly.newPlot('jacobi_elliptic_functions_plot_area', [cd_trace], cd_layout, {displayModeBar: false});
</script>
</body>
</html>