つつじ行政書士事務所
ホーム>記事一覧 > テオヤンセン機構を描く

テオヤンセン機構を描く

先週、夏休みで山陰旅行に行ってきました。

観光地をいくつか巡りましたが、中でも、島根県立美術館で、2023年8月28日まで開催中の展覧会、「テオ・ヤンセン展」が面白かったです。

テオヤンセンさんは、物理学者で芸術家です。
代表作は、「ストランドビースト」という作品です。

ストランドビーストを説明するのは難しいのですが、砂浜で、プラスチックチューブで作られた、風を食べて動く、大きな謎の生き物です。

言葉ではなんとも説明できないので、とりあえずYouTubeなどを見ていただければと思います。

wikipediaに、「ホーリーナンバー」という名称で、チューブの長さの比率があったので、これを参考に、JavaScriptとcanvasでアニメーションを作成してみました。
それが、この記事の最初にのせたアニメーションです。

Start/Stop ボタンを押していただければ、アニメーションが開始されたり、止まったりするはずです。

1本足の場合も、githubにアップロードしています。
こちらは、アニメーションではなく、手動で動きます。

このような、チューブの長さが固定で、単純な回転運動から足が動くかのような動きになる機構のことを、「テオヤンセン機構」とか「ビースト機構」というそうです。

以下、このテオヤンセン機構について、JavaScriptでの作り方を解説します。
興味のある方は、ぜひ最後まで読んでください。

Canvasについて

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

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

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

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

固定点

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

テオヤンセン機構の交点に名前をつけた図
便宜上、テオヤンセン機構の交点に、A0からM1までの名前をつけています。

上図でいうと、A0と、M0は固定されています。

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

三角形の交点を求める

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

という、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は、線分の長さです。

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

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

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

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

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

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

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

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

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