ハーモノグラフ
19世紀の振り子マシン「ハーモノグラフ」をWebで再現。ゆっくり減衰しながら螺旋を描く曲線が、光るアートになる。
- ⏱ 1枚30秒ほど
- 🎨 色テーマ4種
- 📸 画像で保存
- 🆓 無料・登録不要
このブラウザはキャンバス描画に対応していません。
最新の Chrome / Safari / Edge でお試しください。
キャンバスをタップしても新しい模様が描けます
遊び方
- 👆 タップ黒いキャンバスをタップするか「🎲 ランダム」で、新しい振り子の組み合わせが描き始めます。
- 👀 眺める線はだんだん細く、色は少しずつ移り変わりながら内側へ。振り子が止まると小さく音が鳴って完成です。
- 🎨 色を選ぶオーロラ・ゆうやけ・ふかうみ・きんいろの4色。押すと、いまの模様を新しい色で最初から描き直します。
スピードで描く速さ、減衰で螺旋の重なり具合(弱いほど長く、密に巻く)を調整。「クリア」で画面を消し、タップか 🎲 で次の1枚。📸 で PNG 保存、🔗 で画像ごとシェア。
つくりの話
振り子2つでペンを揺らす装置
ハーモノグラフは19世紀に流行した、振り子で絵を描く装置です。いくつかの振り子の揺れをペンや紙に伝えると、揺れどうしが重なって複雑な曲線になります。振り子は空気の抵抗で少しずつ揺れが小さくなるので、線は外側から内側へ渦を巻くように縮んでいきます。
この画面の中でも、やっていることは同じです。ペン先の横位置と縦位置を、それぞれ「だんだん弱まる2つの揺れの足し算」で決めています。振り子は全部で4本。各方向に、大きく揺れる主役の振り子と、その半分以下の幅で揺れる脇役の振り子が1本ずつあります。
縦と横で、揺れの速さをわざと変える
縦と横が同じ速さで揺れると、図形はただの円か楕円になってしまいます。そこで横と縦の速さの比を、2:3、3:4、2:5、4:7 のような小さな整数の組から選んでいます。用意した組み合わせは15通りで、どれも縦と横が違う比率です。
整数比ぴったりだと線が同じ道をなぞって閉じてしまうので、そこからほんのわずかに速さをずらしています。このずれのせいで、図形は一周ごとに少しずつ回転し、線が重ならずに層になります。ハーモノグラフらしい「ほどけていく」見た目は、この小さなずれから来ています。
脇役の振り子は、主役のちょうど2倍の速さか、主役より1つ上か下の整数の速さで揺れます。これが線に厚みと、縞のような干渉の模様を足しています。
色は「残りの勢い」で決める
線の色は、描いた時間ではなく振り子に残っている勢いで決めています。描き始めはテーマのいちばん端の色、止まりかけるほど反対側の色へ。こうすると、すぐ止まる模様でも長く続く模様でも、テーマのグラデーションがほぼ端から端まで出ます。
線の太さと濃さも勢いに合わせて落としていくので、最初は太くくっきり、終わりぎわは細い糸のように消えていきます。振り子に残る勢いが最初の3.5%を切ったところで描画をやめます。
重なるほど光る
線は「重ねるほど明るくなる」描き方で引いています。黒い背景の上で、線が何度も通る中心ほど明るく光るのはこのためです。
この描き方のせいで、一度困ったことがありました。描き直しのとき、背景の黒まで「重ねるほど明るく」で塗っていたため、消えるどころか前の絵が明るくなっていったのです。iPhone でページをスクロールしてアドレスバーが伸び縮みするたびに描き直しが走り、キャンバスがどんどん白っぽく焼けて、何も反応しないように見えていました。いまは背景だけ普通の塗り方に戻してから描いています。
いちばん大きいボタンはキャンバス
画面でいちばん大きいのは黒いキャンバスなので、そこをタップすれば次の模様が出るようにしました。スクロールのためにキャンバスに触れても、指を滑らせた場合は反応しません。描き終わりの音と振動は、自分で新しい模様を出したときと色を変えたときだけ。開いた直後や画面サイズが変わったときの描き直しでは鳴りません。
楽しみ方
- スロットのように回す:タップを繰り返して、ぐっとくる形が出るまで回す。整った結び目のような形も、くしゃっと崩れた形も出ます。
- 色を着せ替える:形が気に入ったら、4色を順に押して比べてみる。同じ線でも、きんいろだとインク画のように、オーロラだと発光体のように見えます。
- 最後まで見届ける:中心に向かって細くなっていく終わりぎわがいちばんきれいです。スピードを下げると、渦が巻き込んでいく様子をじっくり追えます。
- 自由研究に:模様を何枚か保存して、似た形どうしを並べると、自分だけの図鑑になります。
よくある質問
同じ模様をもう一度出せますか?
出せません。振り子の比率・ずれ・揺れ始めの位置・止まり方を毎回ランダムに決めているので、同じ線は二度と出ません。気に入った模様が出たら、描き終わったところで 📸 を押してください。
保存した画像はどこに入りますか?
📸 で、いまのキャンバスが PNG 画像としてダウンロードされます。右下に小さくサイトのハッシュタグが入ります。🔗 シェアは対応する端末なら画像つきで共有し、できない端末ではリンクをコピーします。
データは送られますか?
何も送りません。選んだ色テーマだけをお使いのブラウザの中に覚えておき、次に開いたときにその色から始まります。
動きが苦手です
端末の「視差効果を減らす(動きを減らす)」設定がオンのときは、線を少しずつ描くアニメーションをやめて、完成した模様を一度に表示します。
最終更新