JavaScript : 傾く放物線の描きかた

この前、曲線の平行移動は比較的簡単に操作できましたけれど、
曲線の回転移動となると、ちょっと難しそうです。

それを簡単にしてしまう方法が、ペン軸そのものの回転です。

---

　操作方法は本当に簡単で、たとえば、

◈　y ＝ x2 ＋ 1

という 2 次関数の方程式の曲線を傾けて描きたいなら、回転移動の中心点にペンの基準点を平行移動させてから、ペン軸を回転して、あとは通常の手順で、細切れのラインを連続して描けばよいのです。
　描線後は、まずペン軸の回転をもとに戻してから、最後にペンの平行移動をもとに戻します。

// rad = radian, g = grid pixel

var cvs = document.getElementById('sample_canvas');
var pen = cvs.getContext('2d');
var rad = Math.PI/10;
var g = 50;

　　// Canvas の中心にペン軸を移動させる
　　pen.translate(cvs.width/2, cvs.height/2);

　　// ペン軸を回転させる
　　pen.rotate(rad);

　　// 放物線を描線する
　　pen.beginPath();
　　pen.moveTo(-2*g, -5*g);
　　for (var i=-1.9; i<=2.1; i+=0.1) {
　　　　pen.lineTo(i*g, -(i*i+1)*g);
　　}
　　pen.stroke();

　　// ペン軸の回転を戻す
　　pen.rotate(-rad);

　　// Canvas の左上にペン軸の基準点を戻す
　　pen.translate(-cvs.width/2, -cvs.height/2);

　暫定的な接線も、この方法で同時にまた同様に、描くことができます。
　しかしながらこの手順では、曲線上の座標の数値がわからなくなるという問題が残ってしまいますので、ペン軸の回転を使わず、計算式による手順を構築して、曲線の回転移動を実現してみたいと思ったのです。

// dx = 回転後の x 座標, dy = 回転後の y 座標

var theta = 角度 °;
var x = 基本の x 座標;
var y = -(x*x + 1);
var r = Math.sqrt(x*x + y*y);
var deg = Math.atan2(y, x) * 180/Math.PI;
　 　deg += theta;
var dx = r * Math.cos(deg * Math.PI/180);
var dy = r * Math.sin(deg * Math.PI/180);

　　document.getElementById('y_parabola').innerHTML = -Math.round(y * 100)/100;
　　document.getElementById('para_x').innerHTML = Math.round(dx * Math.pow(10, 5))/Math.pow(10, 5);
　　document.getElementById('para_y').innerHTML = -Math.round(dy * Math.pow(10, 5))/Math.pow(10, 5);

　　pen.translate(cvs.width/2, cvs.height/2);

　　// 放物線を描線する
　　pen.strokeStyle = 'orangered';
　　pen.lineWidth = 1;
　　pen.beginPath();
　　x = -2.4;
　　y = -(x*x + 1);
　　r = Math.sqrt(x*x + y*y);
　　deg = Math.atan2(y, x) * 180/Math.PI;
　　deg += theta;
　　dx = r * Math.cos(deg * Math.PI/180);
　　dy = r * Math.sin(deg * Math.PI/180);
　　pen.moveTo(dx*g, dy*g);
　　for (i=-2.3; i<2.5; i+=0.1) {
　　　　x = i;
　　　　y = -(x*x + 1);
　　　　r = Math.sqrt(x*x + y*y);
　　　　deg = Math.atan2(y, x) * 180/Math.PI;
　　　　deg += theta;
　　　　dx = r * Math.cos(deg * Math.PI/180);
　　　　dy = r * Math.sin(deg * Math.PI/180);
　　　　pen.lineTo(dx*g, dy*g);
　　}
　　pen.stroke();

　　pen.translate(-cvs.width/2, -cvs.height/2);

test Canvas 回転する放物線

回転角度を変更： 角度 ＝ °

基本の x 座標 ：

基本の y 座標 ： y ＝ x2 ＋ 1 ＝

▣　回転する x 座標 ：

▣　回転する y 座標 ：