編集履歴

回答編集履歴

誤字修正

2022/09/29 01:40

投稿

スコア0

answer CHANGED Viewed

@@ -121,7 +121,7 @@
 >
 > 移動します。
-と書きましたが、これらの座標は「左上と右上の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
+と書きましたが、これらの座標は「左上と右下の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
 #### 問題の設定

テキスト追加

2022/09/27 05:11

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -3,10 +3,11 @@
 この前提で答えを先にいうと、
 - 左上の(0, 0)は(50, 50-50√2)に、
 - 右下の(100, 100)は(50, 50+50√2)に
-移動します。
-これを計算で求めるときに基本になるのは（数学で通常使う）xy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン）回転した座標を(x', y') としたときの
+移動します。（※これの算出は追記3を参照）
+(0, 0)や(100, 100)に限らず任意の点を、45度に限らず任意の角度で回転した後の座標を計算で求めるときに基本になるのは（数学で通常使う）xy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアンあるいは度）回転した座標を(x', y') としたときの
 x' = x･cosθ - y･sinθ
 y' = x･sinθ + y･cosθ

テキスト追加

2022/09/25 13:41

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -122,7 +122,7 @@
 と書きましたが、これらの座標は「左上と右上の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
-#### 設問
+#### 問題の設定
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-25/a8a5d529-e9d8-4331-a836-859766bfb52e.png)

テキスト修正

2022/09/25 13:40

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -120,12 +120,8 @@
 >
 > 移動します。
-と書きましたが、これは平面における回転行列を持ち出すことなく
+と書きましたが、これらの座標は「左上と右上の45度回転後の座標**のみ**を求めればよい問題」として以下のように問題を設定して求解することができます。
-- 回転前の正方形の左上と右下の点の座標は、正方形の中心周りの時計回り45度回転後には各々どうなるか？
-を下記の設問と解法で解きました。
 #### 設問
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-25/a8a5d529-e9d8-4331-a836-859766bfb52e.png)

テキスト修正

2022/09/25 05:39

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -176,7 +176,7 @@
 　を得る。
-- よって、①からAのy座標は50-50√2 、 Cのy座標は50+50√2 となり、両点のx座標は50であるからこれらの点の座標は以下である。
+- よって、①からAのy座標は50-50√2 、 ②からCのy座標は50+50√2 となり、両点のx座標は50であるからこれらの点の座標は以下である。
 　　A (50, 50-50√2 )

追記3

2022/09/25 05:32

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -109,7 +109,92 @@
+### 追記3
+回答の冒頭で
+> この前提で答えを先にいうと、
+>
+> ・左上の(0, 0)は(50, 50-50√2)に、
+> ・右下の(100, 100)は(50, 50+50√2)に
+>
+> 移動します。
+と書きましたが、これは平面における回転行列を持ち出すことなく
+- 回転前の正方形の左上と右下の点の座標は、正方形の中心周りの時計回り45度回転後には各々どうなるか？
+を下記の設問と解法で解きました。
+#### 設問
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-25/a8a5d529-e9d8-4331-a836-859766bfb52e.png)
+上記の図において、以下の1. 〜 5 . が条件として与えられている。
+1) x軸は水平の右向き。y軸は垂直の下向き
+2) 四角形ABCDは一辺の長さが100の正方形
+3) 対角線ACはY軸と平行（したがって対角線BDはX軸と平行）
+4) 正方形ABCDの中心（＝2つの対角線ACとBDの交点）をPとする。
+5) P の座標は (50, 50)である。
+このとき、点Aと点Cの座標を求めよ。
+#### 解法
+- 対角線ACがy軸と平行なので、点Aと点Cおよび正方形の中心P のx座標は同じである。Pのx座標は50なので、AとCのx座標もまた50である。
+- 次にAとCの各y座標を求める。
+- PA の長さを h とおくと、Aのy座標は 50-h である。 ---- ①
+- また、PC=PA なので、Cのy座標は 50+h である。---- ②
+- そこで h についての方程式を立ててそれを解き、h の値が得られれば①、②から AおよびCのy座標が得られる。
+- hの方程式を立てるために三角形ABCに着目する。これは角ABCが直角で辺BAと辺BCの長さが等しい直角二等辺三角形である。
+- 直角二等辺三角形において斜辺と他の一辺の比は√2 対 1であるので、
+　　AC : AB = √2 : 1
+　これに AB = 100 と AC = PA + PC = h + h = 2h を代入して以下の比例式を得る。
+　　2h : 100 = √2 : 1
+- 比例式の内項の積と外項の積は等しいので
+　　2h × 1 = 100 × √2　　∴ 2h = 100√2
+　この h についての方程式を解けば、
+　　h = 50√2
+　を得る。
+- よって、①からAのy座標は50-50√2 、 Cのy座標は50+50√2 となり、両点のx座標は50であるからこれらの点の座標は以下である。
+　　A (50, 50-50√2 )
+　　C (50, 50+50√2 )
+なお上記の「解法」の中の
+> 直角二等辺三角形において斜辺と他の一辺の比は√2 対 1である
+というのは、中学の終わりのほうで習う[三平方の定理](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)（あるいはピタゴラスの定理)から導かれます。

テキスト修正

2022/09/24 01:25

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -71,7 +71,7 @@
 ### 追記1
-上記の回答では、高校で習う（数学で通常使う）xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること（2次元における左手系）が常であることを考えると、このコンピュータの画面でよくある座標系での（時計回りを正とする）回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
+上記の回答では、高校で習う（数学で通常使う）xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の根本を示したものです。しかしコンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすることが常であることを考えると、この（画面の）下をy座標の正方向とする座標系での時計回りを正とする回転による写像を、いちいち数学のxy座標での変換に置き換えないで求める式を得ておきたいところです。これは以下のように導出できます。
 - 数学で通常使う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 とします。
 - コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ）とします。これが求めたい行列です。

テキスト修正

2022/09/23 13:54

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -103,7 +103,7 @@
 R'(θ) = A･R(-θ)･A
-から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少なりとも慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
+から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少なりとも慣れている人だったら基底ベクトルの行き先をだけを考慮して、より直裁にこう考えるかもしれません。
 - 下がyの正方向の(左手系の)xy座標においても、時計回りを回転角θの正方向とするのであれば、基底ベクトル (1, 0) と(0, 1)が、それぞれ (cosθ, sinθ) および (-sinθ, cosθ)に写像されることは通常の(右手系の)xy座標のときと変わらない。従って、R'(θ) は R(θ) と等しい。

テキスト変更

2022/09/23 08:27

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -103,7 +103,7 @@
 R'(θ) = A･R(-θ)･A
-から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
+から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少なりとも慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
 - 下がyの正方向の(左手系の)xy座標においても、時計回りを回転角θの正方向とするのであれば、基底ベクトル (1, 0) と(0, 1)が、それぞれ (cosθ, sinθ) および (-sinθ, cosθ)に写像されることは通常の(右手系の)xy座標のときと変わらない。従って、R'(θ) は R(θ) と等しい。

追記

2022/09/23 08:22

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -69,7 +69,7 @@
 これらは冒頭に書いた(50, 50-50√2) および (50, 50+50√2) となっています。（プログラムでの計算結果のx座標が正確に50ぴったりにならないのはコンピュータで数値計算する上で避けられない誤差です。）
-### 追記
+### 追記1
 上記の回答では、高校で習う（数学で通常使う）xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること（2次元における左手系）が常であることを考えると、このコンピュータの画面でよくある座標系での（時計回りを正とする）回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
@@ -97,11 +97,19 @@
 console.log(rotate({ x: 100, y: 100 }, 45, 50, 50)); // => { x: 50.00000000000001, y: 120.71067811865476 }
 ```
+### 追記2
+上記の追記1では、
+R'(θ) = A･R(-θ)･A
+から R'(θ) が R(θ)に等しいことを得ましたが、コンピュータグラフィクスを専門にしている方など線形代数に多少慣れている人だったら基底ベクトルの行き先を考慮して、もっと直裁にこう考えるかもしれません。
+- 下がyの正方向の(左手系の)xy座標においても、時計回りを回転角θの正方向とするのであれば、基底ベクトル (1, 0) と(0, 1)が、それぞれ (cosθ, sinθ) および (-sinθ, cosθ)に写像されることは通常の(右手系の)xy座標のときと変わらない。従って、R'(θ) は R(θ) と等しい。

テキスト追加

2022/09/23 07:29

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -80,7 +80,8 @@
 R'(θ) = A･R(-θ)･A
-この等式の右辺に出てくる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)分の平行移動をすることを加味して、質問で求められている変換後の座標を求める関数を以下のように書けます。
+この等式の右辺に出てくる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)分の平行移動をすることを加味すればよいです。
+上記をコードとしてまとめると、質問で求められている変換後の座標を求める関数を以下のように書けます。（回転の角度の引数を `deg` として度数で与えることができるようにしています。また引数の `a`, `b` は中心のx,y座標です。）
 ```javascript
 function rotate(point, deg=0, a=0, b=0) {

テキスト追加

2022/09/23 07:18

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -74,7 +74,7 @@
 上記の回答では、高校で習う（数学で通常使う）xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること（2次元における左手系）が常であることを考えると、このコンピュータの画面でよくある座標系での（時計回りを正とする）回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
 - 数学で通常使う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 とします。
-- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ）とします。
+- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ）とします。これが求めたい行列です。
 そうすると、R, R', A の間には以下の関係が成り立ちます。

テキスト追加

2022/09/23 06:53

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -69,5 +69,38 @@
 これらは冒頭に書いた(50, 50-50√2) および (50, 50+50√2) となっています。（プログラムでの計算結果のx座標が正確に50ぴったりにならないのはコンピュータで数値計算する上で避けられない誤差です。）
+### 追記
+上記の回答では、高校で習う（数学で通常使う）xy座標における原点中心の反時計回りの回転の問題に置き換えていますが、これは考え方の大本を示したものです。コンピュータグラフィクスでは左上を原点として右方向をxの正方向、下方向をyの正方向とすること（2次元における左手系）が常であることを考えると、このコンピュータの画面でよくある座標系での（時計回りを正とする）回転による座標変換を、数学のxy座標を持ちださないで求める式を得ておきたいところです。これは以下のように導出できます。
+- 数学で通常使う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 とします。
+- コンピューター座標における、原点を中心に時計回りにθ回転させる変換行列をR'(θ）とします。
+そうすると、R, R', A の間には以下の関係が成り立ちます。
+R'(θ) = A･R(-θ)･A
+この等式の右辺に出てくる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)分の平行移動をすることを加味して、質問で求められている変換後の座標を求める関数を以下のように書けます。
+```javascript
+function rotate(point, deg=0, a=0, b=0) {
+  const theta = deg * Math.PI / 180;
+  const dx = point.x - a;
+  const dy = point.y - b;
+  const x = dx * Math.cos(theta) - dy * Math.sin(theta) + a;
+  const y = dx * Math.sin(theta) + dy * Math.cos(theta) + b;
+  return { x, y };
+}
+console.log(rotate({ x: 0, y: 0 }, 45, 50, 50));  // => { x: 49.99999999999999, y: -20.710678118654755 }
+console.log(rotate({ x: 100, y: 100 }, 45, 50, 50)); // => { x: 50.00000000000001, y: 120.71067811865476 }
+```

テキスト修正

2022/09/22 22:40

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -5,7 +5,7 @@
 - 右下の(100, 100)は(50, 50+50√2)に
 移動します。
-これを計算で求めるときに基本になるのはxy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン）回転した座標を(x', y') としたときの
+これを計算で求めるときに基本になるのは（数学で通常使う）xy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン）回転した座標を(x', y') としたときの
 x' = x･cosθ - y･sinθ
 y' = x･sinθ + y･cosθ

テキスト修正

2022/09/22 22:09

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -1,6 +1,9 @@
 回転の中心になる点の座標が質問に書いてありませんが、回転前の正方形の対角線の交点(50, 50)を中心に時計回りの方向を回転角の正方向という前提で回答します。
+この前提で答えを先にいうと、
+- 左上の(0, 0)は(50, 50-50√2)に、
-この前提で答えを先にいうと、左上の(0, 0)は(50, 50-50√2)に、右下の(100, 100)は(50, 50+50√2)に移動します。
+- 右下の(100, 100)は(50, 50+50√2)に
+移動します。
 これを計算で求めるときに基本になるのはxy平面における点(x, y)を原点(0,0)を中心として反時計回りの方向にθ(ラジアン）回転した座標を(x', y') としたときの

コード追加

2022/09/22 22:05

投稿

退会済みユーザー

スコア0

answer CHANGED Viewed

@@ -47,6 +47,10 @@
     ]
     return this;
   }
+  toString() {
+    return `(${this.x}, ${this.y})`;
+  }
 }
 ```
 上記のようなクラス `PointXY` を作っておくと、質問の与題にある左上(0, 0) の回転後の座標`p0`、および右下(100,100) の回転後の座標`p1`は以下で計算できます。