点描画＋バネ運動のシミュレータに WebGL でウェブカメラの映像を合成するショートデモが楽しい！
バネ運動を使ったクロスシミュレーション
今回ご紹介するのは、バネのシミュレーションを利用して点と点をつないでいきクロスシミュレーションを行っているデモです。
デモというよりも、作例や習作といったほうが適切かもしれません。非常にシンプルなデモですが、操作できるパラメータの種類はなかなか豊富です。しかも、ウェブカメラを利用する事もできるようになっているので、インタラクションをしっかり活用したコンテンツに仕上がっています。
波打つ点の動きが見事
今回のデモはデフォルトでは、青い色使いの画像を用いたと思われる点の集合体が描かれます。
これはなんだろう……地図かな？
この状態で既にクロスシミュレーションが適用されており、マウスで点の上をなぞってやると波打つように動きます。
同時に、それぞれを連結している見えない結合子があるみたいなのですが、マウスをぐりぐりと動かすとこの結合子が分断され、布が切れるような感じでどんどん点が引き裂かれていきます。
まるでボロ布のようになってしまう点で出来た布
単なるクロスシミュレーションではなく、こういった千切られるような効果まで加えられているというのは珍しいですね。
動きも非常にスムーズですし、不自然な感じもしません。とても良く出来ていると思います。
また、ウェブカメラの映像を取得しながら、それを布の模様として適用することも可能です。ページを開いたときに許可を求められるので、ウェブカメラへのアクセスを許可してあげましょう。
実際にやってみるとわかるのですが、今回のデモは点のひとつひとつに何色があてがわれているのかによって、重みというか周囲の点を引き寄せる引力が変化するようになっているみたいです。
人間の肌の色の部分に点が引っ張られているのが、上の画像を見てもなんとなくわかるのではないでしょうか。
またウェブカメラモードでは、被写体というか、撮影されている映像の変化が、そのまま物理演算にも影響するようになっています。顔を動かしたり、手をかざしたりすると、それに反応して点が波打ちます。
これはなかなか楽しい。
画像ではわかりにくいと思いますが点が映像に反応して動きます！
パラメータ類が右側にメニューとして置かれており、ここから任意に変更できるようになっています。
操作できるパラメータの種類も多いですし、このデモひとつで、シンプルながらかなり楽しめるのではないでしょうか。
こういった物理演算系のデモは重いのが常ですが、点の数がそれほど多くないこともあり、あまり極端に重いという感じはありません。操作しているだけで非常に楽しめるデモですので、ぜひチェックしてみてください。
