回答編集履歴
16
誤字修正
test
CHANGED
@@ -121,7 +121,7 @@
|
|
121
121
|
>
|
122
122
|
> 移動します。
|
123
123
|
|
124
|
-
と書きましたが、これらの座標は「左上と右
|
124
|
+
と書きましたが、これらの座標は「左上と右下の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
|
125
125
|
|
126
126
|
#### 問題の設定
|
127
127
|
|
15
テキスト追加
test
CHANGED
@@ -3,9 +3,10 @@
|
|
3
3
|
この前提で答えを先にいうと、
|
4
4
|
- 左上の(0, 0)は(50, 50-50√2)に、
|
5
5
|
- 右下の(100, 100)は(50, 50+50√2)に
|
6
|
-
移動します。
|
7
6
|
|
7
|
+
移動します。(※これの算出は追記3を参照)
|
8
|
+
|
8
|
-
|
9
|
+
(0, 0)や(100, 100)に限らず任意の点を、45度に限らず任意の角度で回転した後の座標を計算で求めるときに基本になるのは(数学で通常使う)xy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアンあるいは度)回転した座標を(x', y') としたときの
|
9
10
|
|
10
11
|
x' = x・cosθ - y・sinθ
|
11
12
|
y' = x・sinθ + y・cosθ
|
14
テキスト追加
test
CHANGED
@@ -122,7 +122,7 @@
|
|
122
122
|
|
123
123
|
と書きましたが、これらの座標は「左上と右上の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
|
124
124
|
|
125
|
-
#### 設
|
125
|
+
#### 問題の設定
|
126
126
|
|
127
127
|

|
128
128
|
|
13
テキスト修正
test
CHANGED
@@ -120,11 +120,7 @@
|
|
120
120
|
>
|
121
121
|
> 移動します。
|
122
122
|
|
123
|
-
と書きましたが、これは平面における回転行列を持ち出すことなく
|
124
|
-
|
125
|
-
|
123
|
+
と書きましたが、これらの座標は「左上と右上の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
|
126
|
-
|
127
|
-
を下記の設問と解法で解きました。
|
128
124
|
|
129
125
|
#### 設問
|
130
126
|
|
12
テキスト修正
test
CHANGED
@@ -176,7 +176,7 @@
|
|
176
176
|
|
177
177
|
を得る。
|
178
178
|
|
179
|
-
- よって、①からAのy座標は50-50√2 、 Cのy座標は50+50√2 となり、両点のx座標は50であるからこれらの点の座標は以下である。
|
179
|
+
- よって、①からAのy座標は50-50√2 、 ②からCのy座標は50+50√2 となり、両点のx座標は50であるからこれらの点の座標は以下である。
|
180
180
|
|
181
181
|
A (50, 50-50√2 )
|
182
182
|
|
11
追記3
test
CHANGED
@@ -109,8 +109,93 @@
|
|
109
109
|
|
110
110
|
|
111
111
|
|
112
|
-
|
112
|
+
### 追記3
|
113
|
+
|
113
|
-
|
114
|
+
回答の冒頭で
|
115
|
+
|
114
|
-
|
116
|
+
> この前提で答えを先にいうと、
|
115
|
-
|
117
|
+
>
|
116
|
-
|
118
|
+
> ・左上の(0, 0)は(50, 50-50√2)に、
|
119
|
+
> ・右下の(100, 100)は(50, 50+50√2)に
|
120
|
+
>
|
121
|
+
> 移動します。
|
122
|
+
|
123
|
+
と書きましたが、これは平面における回転行列を持ち出すことなく
|
124
|
+
|
125
|
+
- 回転前の正方形の左上と右下の点の座標は、正方形の中心周りの時計回り45度回転後には各々どうなるか?
|
126
|
+
|
127
|
+
を下記の設問と解法で解きました。
|
128
|
+
|
129
|
+
#### 設問
|
130
|
+
|
131
|
+

|
132
|
+
|
133
|
+
|
134
|
+
上記の図において、以下の1. 〜 5 . が条件として与えられている。
|
135
|
+
|
136
|
+
1) x軸は水平の右向き。y軸は垂直の下向き
|
137
|
+
2) 四角形ABCDは一辺の長さが100の正方形
|
138
|
+
3) 対角線ACはY軸と平行(したがって対角線BDはX軸と平行)
|
139
|
+
4) 正方形ABCDの中心(=2つの対角線ACとBDの交点)をPとする。
|
140
|
+
5) P の座標は (50, 50)である。
|
141
|
+
|
142
|
+
|
143
|
+
|
144
|
+
このとき、点Aと点Cの座標を求めよ。
|
145
|
+
|
146
|
+
#### 解法
|
147
|
+
|
148
|
+
- 対角線ACがy軸と平行なので、点Aと点Cおよび正方形の中心P のx座標は同じである。Pのx座標は50なので、AとCのx座標もまた50である。
|
149
|
+
|
150
|
+
- 次にAとCの各y座標を求める。
|
151
|
+
|
152
|
+
- PA の長さを h とおくと、Aのy座標は 50-h である。 ---- ①
|
153
|
+
|
154
|
+
|
155
|
+
- また、PC=PA なので、Cのy座標は 50+h である。---- ②
|
156
|
+
|
157
|
+
- そこで h についての方程式を立ててそれを解き、h の値が得られれば①、②から AおよびCのy座標が得られる。
|
158
|
+
|
159
|
+
- hの方程式を立てるために三角形ABCに着目する。これは角ABCが直角で辺BAと辺BCの長さが等しい直角二等辺三角形である。
|
160
|
+
|
161
|
+
- 直角二等辺三角形において斜辺と他の一辺の比は√2 対 1であるので、
|
162
|
+
|
163
|
+
AC : AB = √2 : 1
|
164
|
+
|
165
|
+
これに AB = 100 と AC = PA + PC = h + h = 2h を代入して以下の比例式を得る。
|
166
|
+
|
167
|
+
2h : 100 = √2 : 1
|
168
|
+
|
169
|
+
- 比例式の内項の積と外項の積は等しいので
|
170
|
+
|
171
|
+
2h × 1 = 100 × √2 ∴ 2h = 100√2
|
172
|
+
|
173
|
+
この h についての方程式を解けば、
|
174
|
+
|
175
|
+
h = 50√2
|
176
|
+
|
177
|
+
を得る。
|
178
|
+
|
179
|
+
- よって、①からAのy座標は50-50√2 、 Cのy座標は50+50√2 となり、両点のx座標は50であるからこれらの点の座標は以下である。
|
180
|
+
|
181
|
+
A (50, 50-50√2 )
|
182
|
+
|
183
|
+
C (50, 50+50√2 )
|
184
|
+
|
185
|
+
|
186
|
+
|
187
|
+
|
188
|
+
|
189
|
+
|
190
|
+
なお上記の「解法」の中の
|
191
|
+
|
192
|
+
> 直角二等辺三角形において斜辺と他の一辺の比は√2 対 1である
|
193
|
+
|
194
|
+
というのは、中学の終わりのほうで習う[三平方の定理](https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%BF%E3%82%B4%E3%83%A9%E3%82%B9%E3%81%AE%E5%AE%9A%E7%90%86)(あるいはピタゴラスの定理)から導かれます。
|
195
|
+
|
196
|
+
|
197
|
+
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
|
10
テキスト修正
test
CHANGED
@@ -71,7 +71,7 @@
|
|
71
71
|
|
72
72
|
### 追記1
|
73
73
|
|
74
|
-
上記の回答では、高校で習う(数学で通常使う)xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の
|
74
|
+
上記の回答では、高校で習う(数学で通常使う)xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の根本を示したものです。しかしコンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすることが常であることを考えると、この(画面の)下をy座標の正方向とする座標系での時計回りを正とする回転による写像を、いちいち数学のxy座標での変換に置き換えないで求める式を得ておきたいところです。これは以下のように導出できます。
|
75
75
|
|
76
76
|
- 数学で通常使うxy座標で、原点を中心に反時計回りにθ回転させる変換行列を[R(θ)](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)とし、x軸に関しての対称移動の行列を A とします。
|
77
77
|
- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ)とします。これが求めたい行列です。
|
9
テキスト修正
test
CHANGED
@@ -103,7 +103,7 @@
|
|
103
103
|
|
104
104
|
R'(θ) = A・R(-θ)・A
|
105
105
|
|
106
|
-
から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少なりとも慣れている人だったら基底ベクトルの行き先を考慮して、
|
106
|
+
から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少なりとも慣れている人だったら基底ベクトルの行き先をだけを考慮して、より直裁にこう考えるかもしれません。
|
107
107
|
|
108
108
|
- 下がyの正方向の(左手系の)xy座標においても、時計回りを回転角θの正方向とするのであれば、基底ベクトル (1, 0) と(0, 1)が、それぞれ (cosθ, sinθ) および (-sinθ, cosθ)に写像されることは通常の(右手系の)xy座標のときと変わらない。従って、R'(θ) は R(θ) と等しい。
|
109
109
|
|
8
テキスト変更
test
CHANGED
@@ -103,7 +103,7 @@
|
|
103
103
|
|
104
104
|
R'(θ) = A・R(-θ)・A
|
105
105
|
|
106
|
-
から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
|
106
|
+
から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少なりとも慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
|
107
107
|
|
108
108
|
- 下がyの正方向の(左手系の)xy座標においても、時計回りを回転角θの正方向とするのであれば、基底ベクトル (1, 0) と(0, 1)が、それぞれ (cosθ, sinθ) および (-sinθ, cosθ)に写像されることは通常の(右手系の)xy座標のときと変わらない。従って、R'(θ) は R(θ) と等しい。
|
109
109
|
|
7
追記
test
CHANGED
@@ -69,7 +69,7 @@
|
|
69
69
|
|
70
70
|
これらは冒頭に書いた(50, 50-50√2) および (50, 50+50√2) となっています。(プログラムでの計算結果のx座標が正確に50ぴったりにならないのはコンピュータで数値計算する上で避けられない誤差です。)
|
71
71
|
|
72
|
-
### 追記
|
72
|
+
### 追記1
|
73
73
|
|
74
74
|
上記の回答では、高校で習う(数学で通常使う)xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること(2次元における左手系)が常であることを考えると、このコンピュータの画面でよくある座標系での(時計回りを正とする)回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
|
75
75
|
|
@@ -97,6 +97,15 @@
|
|
97
97
|
console.log(rotate({ x: 100, y: 100 }, 45, 50, 50)); // => { x: 50.00000000000001, y: 120.71067811865476 }
|
98
98
|
```
|
99
99
|
|
100
|
+
### 追記2
|
101
|
+
|
102
|
+
上記の追記1では、
|
103
|
+
|
104
|
+
R'(θ) = A・R(-θ)・A
|
105
|
+
|
106
|
+
から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
|
107
|
+
|
108
|
+
- 下がyの正方向の(左手系の)xy座標においても、時計回りを回転角θの正方向とするのであれば、基底ベクトル (1, 0) と(0, 1)が、それぞれ (cosθ, sinθ) および (-sinθ, cosθ)に写像されることは通常の(右手系の)xy座標のときと変わらない。従って、R'(θ) は R(θ) と等しい。
|
100
109
|
|
101
110
|
|
102
111
|
|
@@ -105,4 +114,3 @@
|
|
105
114
|
|
106
115
|
|
107
116
|
|
108
|
-
|
6
テキスト追加
test
CHANGED
@@ -80,7 +80,8 @@
|
|
80
80
|
|
81
81
|
R'(θ) = A・R(-θ)・A
|
82
82
|
|
83
|
-
この等式の右辺に出てくる3つの行列の積を計算すると実は [R(θ)](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)に等しくなります。このことを使いかつ回転の中心が原点ではない (a, b) であった場合は、回転の前後に (a, b)分の平行移動をすることを加味
|
83
|
+
この等式の右辺に出てくる3つの行列の積を計算すると実は [R(θ)](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)に等しくなります。つまり得たかったR'(θ) としては [R(θ) ](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)をそのまま使えるのでした。このことを使いかつ回転の中心が原点ではない (a, b) であった場合は、回転の前後に (a, b)分の平行移動をすることを加味すればよいです。
|
84
|
+
上記をコードとしてまとめると、質問で求められている変換後の座標を求める関数を以下のように書けます。(回転の角度の引数を `deg` として度数で与えることができるようにしています。また引数の `a`, `b` は中心のx,y座標です。)
|
84
85
|
|
85
86
|
```javascript
|
86
87
|
function rotate(point, deg=0, a=0, b=0) {
|
5
テキスト追加
test
CHANGED
@@ -74,7 +74,7 @@
|
|
74
74
|
上記の回答では、高校で習う(数学で通常使う)xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること(2次元における左手系)が常であることを考えると、このコンピュータの画面でよくある座標系での(時計回りを正とする)回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
|
75
75
|
|
76
76
|
- 数学で通常使うxy座標で、原点を中心に反時計回りにθ回転させる変換行列を[R(θ)](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)とし、x軸に関しての対称移動の行列を A とします。
|
77
|
-
- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ)とします。
|
77
|
+
- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ)とします。これが求めたい行列です。
|
78
78
|
|
79
79
|
そうすると、R, R', A の間には以下の関係が成り立ちます。
|
80
80
|
|
4
テキスト追加
test
CHANGED
@@ -69,6 +69,39 @@
|
|
69
69
|
|
70
70
|
これらは冒頭に書いた(50, 50-50√2) および (50, 50+50√2) となっています。(プログラムでの計算結果のx座標が正確に50ぴったりにならないのはコンピュータで数値計算する上で避けられない誤差です。)
|
71
71
|
|
72
|
+
### 追記
|
73
|
+
|
74
|
+
上記の回答では、高校で習う(数学で通常使う)xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること(2次元における左手系)が常であることを考えると、このコンピュータの画面でよくある座標系での(時計回りを正とする)回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
|
75
|
+
|
76
|
+
- 数学で通常使うxy座標で、原点を中心に反時計回りにθ回転させる変換行列を[R(θ)](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)とし、x軸に関しての対称移動の行列を A とします。
|
77
|
+
- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ)とします。
|
78
|
+
|
79
|
+
そうすると、R, R', A の間には以下の関係が成り立ちます。
|
80
|
+
|
81
|
+
R'(θ) = A・R(-θ)・A
|
82
|
+
|
83
|
+
この等式の右辺に出てくる3つの行列の積を計算すると実は [R(θ)](https://ja.wikipedia.org/wiki/%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97#2%E6%AC%A1%E5%85%83%E3%81%AE%E5%9B%9E%E8%BB%A2%E8%A1%8C%E5%88%97)に等しくなります。このことを使いかつ回転の中心が原点ではない (a, b) であった場合は、回転の前後に (a, b)分の平行移動をすることを加味して、質問で求められている変換後の座標を求める関数を以下のように書けます。
|
84
|
+
|
85
|
+
```javascript
|
86
|
+
function rotate(point, deg=0, a=0, b=0) {
|
87
|
+
const theta = deg * Math.PI / 180;
|
88
|
+
const dx = point.x - a;
|
89
|
+
const dy = point.y - b;
|
90
|
+
const x = dx * Math.cos(theta) - dy * Math.sin(theta) + a;
|
91
|
+
const y = dx * Math.sin(theta) + dy * Math.cos(theta) + b;
|
92
|
+
return { x, y };
|
93
|
+
}
|
94
|
+
|
95
|
+
console.log(rotate({ x: 0, y: 0 }, 45, 50, 50)); // => { x: 49.99999999999999, y: -20.710678118654755 }
|
96
|
+
console.log(rotate({ x: 100, y: 100 }, 45, 50, 50)); // => { x: 50.00000000000001, y: 120.71067811865476 }
|
97
|
+
```
|
72
98
|
|
73
99
|
|
74
100
|
|
101
|
+
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
|
106
|
+
|
107
|
+
|
3
テキスト修正
test
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
- 右下の(100, 100)は(50, 50+50√2)に
|
6
6
|
移動します。
|
7
7
|
|
8
|
-
これを計算で求めるときに基本になるのはxy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン)回転した座標を(x', y') としたときの
|
8
|
+
これを計算で求めるときに基本になるのは(数学で通常使う)xy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン)回転した座標を(x', y') としたときの
|
9
9
|
|
10
10
|
x' = x・cosθ - y・sinθ
|
11
11
|
y' = x・sinθ + y・cosθ
|
2
テキスト修正
test
CHANGED
@@ -1,6 +1,9 @@
|
|
1
1
|
回転の中心になる点の座標が質問に書いてありませんが、回転前の正方形の対角線の交点(50, 50)を中心に時計回りの方向を回転角の正方向という前提で回答します。
|
2
2
|
|
3
|
+
この前提で答えを先にいうと、
|
4
|
+
- 左上の(0, 0)は(50, 50-50√2)に、
|
3
|
-
|
5
|
+
- 右下の(100, 100)は(50, 50+50√2)に
|
6
|
+
移動します。
|
4
7
|
|
5
8
|
これを計算で求めるときに基本になるのはxy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン)回転した座標を(x', y') としたときの
|
6
9
|
|
1
コード追加
test
CHANGED
@@ -47,6 +47,10 @@
|
|
47
47
|
]
|
48
48
|
return this;
|
49
49
|
}
|
50
|
+
|
51
|
+
toString() {
|
52
|
+
return `(${this.x}, ${this.y})`;
|
53
|
+
}
|
50
54
|
}
|
51
55
|
```
|
52
56
|
上記のようなクラス `PointXY` を作っておくと、質問の与題にある左上(0, 0) の回転後の座標`p0`、および右下(100,100) の回転後の座標`p1`は以下で計算できます。
|