If you aren't Japanese speaker, I recommend you to read Wikipedia(en): Harmonograph .
ハーモノグラフ(Harmonograph)とは、19世紀ヨーロッパで流行したとされる、2つの振動の調和を視覚化できる装置です。2つないし3つの振り子と、ペン、紙を組み合わせた単純な装置ですが、おどろくほど多彩で美しい図像を生み出します。
音は鼓膜の振動ですから、2つの振動=2つの音と見ることもできます。実際、よく響く音程と同じ振動数の組み合わせでは、規則性の高い図像が得られます。
「Harmonograph.js」は、このハーモノグラフをJavaScriptでシミュレートしたものです。
ハーモノグラフについては、アンソニー・アシュトン著「 ハーモノグラフ: 和音が織りなす美しい図像 (アルケミスト双書) 」に比較的詳しく書かれています。おそらく日本語で得られる最も詳しい情報源でしょう。
ハーモノグラフには、直行ハーモノグラフ (Lateral harmonograph) と回転ハーモノグラフ (Rotary harmonograph) があり、直行ハーモノグラフでは縦横の振動の組み合わせで、回転ハーモノグラフでは2つの回転の組み合わせで図像を生み出します。
直行ハーモノグラフでは、2つの振り子が使われ、それぞれが直行する方向に振動します。片方の振り子には紙が、もう片方の振り子にはペンが固定されており、それぞれの振動の相互作用で図像が描かれます。
回転ハーモノグラフでは、3つの振り子が使われ、2つは直行ハーモノグラフと同様、直行する方向に振動し、もう1つは真上からみて真円を描くように回転します。この直行する2つの振り子の組と、回転する振り子、それぞれに紙とペンが固定されます。2つの直行する振り子は、通常、90°位相をずらして同じ周波数で振動させるため、組み合わせた動きは、円を描きます。つまり、回転ハーモノグラフでは、2つの回転の相互作用で図像が描かれます。
本物のハーモノグラフは、振り子の組み合わせで図像を描きますが、Harmonograph.js では、減衰振動の変位を計算し、これを2つ~4つ組み合わせて使用しています。減衰振動の変位を求めるプログラムは「 Visual C# による物理のシミュレーション 」を参考にさせていただきました。
直行ハーモノグラフの場合、2つの減衰振動子を使用します。これらのある時点tにおける変位をそれぞれ x(t)、y(t) とすると、ある時点 t におけるプロット座標 p(t) は p(t) = (x(t), y(t)) です。
回転ハーノグラフの場合、4つの減衰振動子を使用します。これらのある時点tにおける変位をそれぞれを x1(t)、y1(t)、x2(t)、y2(t) とすると、ある時点tにおけるプロット座標 p(t) は p(t) = (x1(t) + x2(t), y1(t) + y2(t)) です。なお、x1 と y1、x2 と y2 はそれぞれ位相を90°ずらし、位相以外のパラメータは同じにしています。