Weighted Voronoi Stippling

何となくいい感じに点を散らす方法を探していて、Evil Mad Scientistの人が作っていたやつを思い出した。 StippleGen: Weighted Voronoi stippling and TSP paths in Processing | Evil Mad Scientist Laboratories

元のソースはこれ。 Weighted Voronoi Stippling
論文もあって、他にも面白そうな研究が沢山。

仕組みとしては適当に点を置いた後、ボロノイ領域に分け、その領域を正方形に近づくよう変形したものの中心に点を移動させて描画している。

中身を整理して必要なところだけ抜き出した。Processingの2.0.2で、toxiclibと適当な画像を用意して下さい(コードと同階層にdataフォルダを作り、img.jpgで保存)。
stipple.pde

VoronoiができるということはDelaunayもすぐできるだろうと思ってJonathan PuckeyのDelaunay Raster的なことをやってみた。
weighted_delaunay.pde

が、あんまり面白くない

できていく過程だったり

点の結び方を変える(vertexをコメントアウトしてわざと三角形にしない)とか

整然としているのであれば線の方がまだ何かに使えるかも知れない

点の打ち方と、色の塗り方をどうするかが大事なんだと思った。

Evil Mad Scientistのやつは巡回セールスマン問題のアルゴリズムを使って、点を打つ機械が最短の動きで描画できるようにもしてある。実行時間を縮めるにはああいう処理が必要になってくるんですね。かつ視覚的にも面白い。

stonewall開発日記14

自分でレイアウトのスタイルを定義して差し替えられる仕組みを追加してタグv1.0.0つけた。レイアウトのスタイルと言っても普通にJavaScriptで関数を書く必要がある。

Stonewallのインスタンス生成時に渡す設定オブジェクトに少し変更を加えて、layoutStyle:'レイアウトスタイル名'でスタイルを指定するようにした。自分で定義したスタイルを使うには、layoutStyleにレイアウト名を設定して、StonewallのインスタンスオブジェクトのメソッドregisterLayout('レイアウト名', 定義した関数)を実行すると、calculatePositionメソッド内で定義した関数が使われるようになる。Stonewallのインスタンスオブジェクトのコンテキストで関数を実行するためにbindを使ったのだけど、古いブラウザに対応するにはapplyとかで地道に対応した方が良かったかも知れない。

使えるのかどうか不明だけど、ある程度位置が揃いつつ微妙に散らかるレイアウトのサンプルを作った。そのままだと次のページ読み込んだ時とかリサイズした際に位置が変わるのでごちゃごちゃするけどそれもエフェクトの一部としてみたり。少し変えればこれに近いのとか作れると思う。

飽きそうだけどドキュメントとか充実させるフェーズに入る。

stonewall開発日記13

前回作ったaddとremoveメソッドをpushとpopに名前を変えて、新たにaddとremoveを実装し直した。

addは配列の任意の位置にオブジェクトを追加でき、removeは配列の任意の位置からオブジェクトを削除できる。その後resetGridを呼んで、buildを呼ぶと新しい要素でレイアウトが行われる。

これでversion 1にしようと思っていたが、レイアウトの仕方をプラグイン的な仕組みで差し替えられるような機能を追加してからにしようと思う。