GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

Canvas D3v3

D3.jsを使ってジェネレーティブアートを作成してみた

投稿日:2016年3月25日

最近、D3.jsを使ってジェネレーティブアートの勉強をしているので、ゴラン・レヴィンの作品を参考にボロノイ図エフェクトを画像に適用してみました。

Segmentation and Symptom – Interactive Art by Golan Levin and Collaborators

画像をボロノイ図にする

選んだ画像に他意はありません。元ネタがボロノイ図を使うことで被写体の「今にも崩れ落ちてしまいそうな繊細さ」を表現していたので、逆を狙ってみました。

voroart_svg160325

example

サンプルコード

概要を簡単に説明すると、imgタグで読み込んだ画像をcanvasに転写し、グレースケール化したのちにエッジを抽出、ピクセルの濃淡に閾値を設定し超えたピクセルの座標をD3.jsのvoronoi関数に渡して描画しています。

その他

canvasに出力
vorart_canvas160325
アウトプット先をsvgではなくcanvasにしてみました。
同じ出力結果になってもつまらないので、ドロップシャドウエフェクトなんぞを掛けています。
svgだとこのようなエフェクトを掛けると、要素の数によっては非常に重くなるのですが、canvasだと快適ですね。イントラクションを必要としないのであれば、canvasは便利です。

videoにフィルターをかける

voroart_video160325
データのインプットをimg要素ではなくvideo要素に変えて動的に変化するボロノイ図を描画しています。ちょっとだけフラクタル。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。