ハーモノグラフ

4ヶ月振りの更新です。twitterあるとほんとにブログ書かないな、私。

JavaScriptによるハーモノグラフ・シミュレータ「Harmonograph.js」をちょっとアップデートしました。

今回追加した主な機能は「パラメータのランダム設定」。

新たに「Physical parameters / 物理パラメータ」のあたりにできた「Randomize / ランダム」ボタンをクリックすると、音程・抵抗・振幅比がランダムな値に設定され、まともな音程とはひと味違う、複雑な図形が楽しめます。

下が、この機能で作図した例

パラメータの意味がわからなくても「Randomize / ランダム」と「Draw」を交互にクリックしてみてください。

なお、(パーマリンク以外で)Harmonograph.jsにアクセスしたときにも、これと同じ処理をしていますので、アクセスするたびに、違うハーモノグラフを楽しめます。

ハーモノグラフにはもうだいぶ思い入れがあるので、今後もいろいろやろうと考えてます。

その他の変更

• 「ハーモノグラフの種類」の初期設定を回転ハーモノグラフに。直交だとランダムにしても地味なので・・・。
• 「ギャラリー」の読み込みを非同期に。ページの読み込みを高速化するために、ギャラリーはあとで読み込むことにしました。
• コードの整理

過去にも言及しているハーモノグラフ。振り子の組合せで、振動≒音の調和を視覚化する機械です。

本物をつくるのはちょっと大変なので、JavaScriptとcanvasを利用したWebアプケーションを作りました。

• 
  Harmonograph.js : Visualize Harmony
  http://penguinlab.jp/harmonograph/

各種パラメータを設定して「Draw」で描画開始。すきなところで一時停止もできて、専用のtumblrへの投稿やローカルへの保存もできます。パラメータはGETでも指定でき、同じ設定を開くパーマリンクも表示されます。

下図は描画例。

• 長三度(ドとミの音程)
  
• 完全15度(2オクターブ)
  
• 短10度(ドと1オクターブ上のミ♭)
  

インターフェイスに英語・日本語が入り交じってるのは、英語版つくる能力と気力はないけど、日本語わからん人でも適当に触れるようにするため。簡単な英語がわかる日本語ネイティブと、簡単な日本語がわかる日本語非ネイティブだったら、前者のが格段に多いもんね。

英語版WikipediaのHarmonographの項をみると、Web上でハーモノグラフを再現してるのはいくつかあるけど、描画過程が見られて、パラメータが自由に変更できて、保存もできる、というのはいまのとここれだけだと思います。

Firefox / Safari / Chrome / Opera の最新版で問題なく動くはずだけど、IEはcanvas要素サポートしてないので対象外。一応、ExplorerCanvasを入れてるので、描画はできるけど、tumblrへの投稿と、ローカルへの保存はできない(ExplorerCanvasがtoDataURLに対応していないため)。あとChromeもローカルへの保存はできない。

ちなみにWebアプリケーションといいつつ、コアはJavaScriptですので、tumblrへの投稿と投稿取得以外はオフラインでも動いたりします。それにしてもcanvas要素の表現力と描画速度はなかなかすごい。今後の可能性を感じさせます。

ところで、Chromeで動かすと他ブラウザとはくらべものにならないくらい速い。が、描画が荒く、線が途切れたりする。Firefoxが一番綺麗に書ける気がします。

あ、あと当初想定してなかったけど iPhone / iPod touch でも動きます(iPhone OS 3.0 の iPhone 3G で確認)。やるなあiPhone版Safari。

ハーモノグラフについては、Harmonograph.jsでも簡単に解説していますが、より詳しい情報は、アンソニー・アシュトン著「ハーモノグラフ 音がおりなす美の世界 (ピュタゴラスブックス) 」を参照してください。というか少なくとも日本語ではこれ以外の情報は相当少ないです。

過去、ハーモノグラフに言及した記事

• 音の紡ぎ出すカタチ – 情報と音楽
• ソフトウェア・ハーモノグラフ実現へ。 – 情報と音楽