テオヤンセン機構を描く

作成日： 2023年8月26日（土）

更新日： 2023年8月27日（日）

テオヤンセン機構のひとつに点を指定したもの

Canvas について

HTML5 以降、 JavaScript で絵を描く場合、たいていは svg か、 canvas になりました。
今回は、 canvas で作りました。

canvas の使い方は、 MDN の解説が役に立ちます。

canvas は、基本的には、紙芝居を作るような感覚です。
clearRect で、前の描画を消し、 lineTo で線を引いていきます。

凝った作りにしようと思ったら、楕円やベジェ曲線なども作れます。
（今回は、そこまではチャレンジしていません）

固定点

テオヤンセン機構には、動かない点が2つあります。

便宜上、テオヤンセン機構の交点に、 A0 から M1 までの名前をつけています。
上図でいうと、 A0 と、 M0 は固定されています。

今回作成したプログラムでは、 points という連想配列を用意して、そこに A0, M0 を用意しています。

三角形の交点を求める

テオヤンセン機構を計算するとき、三角形 ABC において、

3辺の長さが決まっている（辺 AB, BC, CA が決まっている）
2点の座標が決まっている（たとえば、点A と B の x, y 座標が決まっている）
回転の方向が決まっている（たとえば、点C は、辺AB から反時計回りに最初の点）

という、3つの条件が決まった場合に、点C が求まるという計算が多用されます。

この計算は、最初は chatGPT にお願いしたいのですが、思うような計算結果が出てこなかったので、高校時代の幾何の知識を調べながら作りました。
（もし、うまくいくプロンプトをご存じの方は教えてください）

さしあたり、 triangle という関数を以下のとおり定義しました。

function triangle (pointA, pointB, AC, BC) {
  const dx = pointB.x - pointA.x,
  dy = pointB.y - pointA.y,
  AB = Math.sqrt(dx ** 2 + dy ** 2);

  const cosA = (AB ** 2 + AC ** 2 - BC ** 2) / (2 * AC * AB),
  sinA = Math.sqrt(1 - cosA ** 2);

  const pointC = {
    x: (cosA * dx - sinA * dy) * AC / AB + pointA.x,
    y: (sinA * dx + cosA * dy) * AC / AB + pointA.y,
  }
  return pointC;
}

pointA.x, pointA.y に、点Aの x, y 座標があり、 pointB についても同様です。
また、 AC, BC は、線分の長さです。

やっていることは単純です。

まずピタゴラスの定理で、線分 AB の長さを求めます。
次に、余弦定理で、コサインとサインを求めます。
最後に、座標の回転の計算で、点C の座標を求めます。（このサイトが参考になりました）

もしかすると、もっとうまいやり方があるかもしれませんが、とりあえずこれで正しく計算できます。
計算量も大したことありません。

三角形の計算をつなげていく

上記の三角形の計算が分かれば、あとは単純に、それをつなげていくだけです。

固定点 M0 と、回転角から、点 M1 が求まります。
次に、 A0 と M1 から、三角形の計算で、点 B1 , C1 が求まります。
以下同様に、 A0 と B1 から D1 が、 D1 と C1 から F1 が、 F1 と C1 から H1 が求まります。

それぞれの求まった点を、線分で結んでいけば、機構を描けることになります。

ここまでが足が1本の説明です。

4本足にするには、それぞれ三角形の点C の求める角度の方向を逆にしたり、回転運動の回転角をずらしたりして、できるだけ同じ関数が使えるように工夫しました。

4本足の script も、GitHub に乗せていますので、気になる方は見てみてください。

最後までお読みいただき、ありがとうございました。

何かお気づきの点がありましたら、お問い合わせください。

つつじ行政書士事務所

テオヤンセン機構を描く

目次：

Canvas について

固定点

三角形の交点を求める

三角形の計算をつなげていく