Tokyo Demo Fest 2017に参加しました

2月18日と2月19日に3331 Arts Chiyodaで開催されたTokyo Demo Fest（TDF）2017に参加しました．
tokyodemofest.jp
去年に引き続き，二回目の参加になります．去年の参加記事はこちら．
TokyoDemoFest2016に参加しました - 心鏡曼荼羅
TDFは日本で唯一のデモパーティです．詳しくはTDF公式サイトを参照してもらいたいのですが，すごく簡単にいうとデモと呼ばれるリアルタイムに映像や音楽を生成するプログラムを発表したり，参加者同士で交流したりする場です．作品発表の様子はYouTubeでもみることができます．
Tokyo Demo Fest 2017 - Combined Demo Compo [Live footage] - YouTube

今回はCombined Graphics CompoとGLSL Graphics Compoに作品を投稿し，Combined Graphicsで二位，GLSL Graphicsで一位をいただきました．



あまり制作に時間は取れなかったのですが，評価していただけて嬉しいです．簡単に作品の紹介と解説をつけておきます．

TokyoDemoFesTessellation

f:id:soma_arc:20170224173532p:plain
https://www.shadertoy.com/view/MsscR4
Tokyo Demo Festの頭文字TDFを使って平面を敷き詰めた作品です．テセレーションというとポリゴン分割のことを考える人が多いかと思いますが，平面や空間を図形で敷き詰めることもテセレーションといいます．
以前から普通の双曲タイリングは描いていましたが，こういったデザインのものを作ったのは初めてです．本当は回転を含むような複雑なパターンにしたかったのですが，三種類のアルファベット展開というのはなかなかに難しいです．あちらをたてればこちらがたたず…割と単純なものになってしまいました．アイデアメモの一部を置いておきます．

グリッドで考えて塗りつぶすような実装にしました．

また，GLSLで描いたのでこちらの記事（[メガデモ]VisualStudio2013で4kbのexeを作る | notargs.com）を参考にexecutableにしてPC 4k Graphicsとして投稿してみました．本番では解像度の違いから図が左に寄ってしまうというミスがありましたが…
f:id:soma_arc:20170225184307p:plain
元々小さなファイルサイズというのはあまり興味がなかったのですが，案外面白かったので，次回もPC 4k Graphicsに出してみたいところです．

4kは手間がかかりそうだと思っていたのですが，こちらの発表資料（デモシーンへようこそ-4KBで映像作品をつくる技術-.pptx - Google ドライブ）や，i_saintさんのテンプレート（GitHub - i-saint/CEDEC2016_4kintro）で捗りそうです．

こういった敷き詰め作品を作りたい方には，こちらの本がおすすめです．
www.amazon.co.jp

また，GLSLで描く方法については少し前に記事を書きました．
GLSLで描くTessellation - 心鏡曼荼羅
GLSLで描くHyperbolic Tessellation - 心鏡曼荼羅

Schottky Waltz

f:id:soma_arc:20170224173544p:plain
https://www.shadertoy.com/view/XslyzH


これはCircle inversion fractalやSelf inversion fractalと呼ばれる種類のフラクタルです．ショットキー変換と呼ばれる，円のペアから定義される変換の名前に由来しています．

このフラクタルは円の外側と内側を入れ替える"反転"という操作を繰り返すことで描かれます．例えば，下図のような４つの円の反転で構成されるものを考えてみましょう．

１つの円の反転によって，他の３つの円は反転を行った円の内側に移されます．そのため，４つの円で反転を行うと，それらの内側に１２個の小円ができます．

新たにできた１２個の小円に対しても４つの円の反転を作用させると小円の下にさらに円ができます．

これを更に繰り返していくことで，円が無限に連なる図を得ることができます．

これをGLSLで描画する詳しいアルゴリズムに興味がある方はこちらの記事（GLSLで描くCircle Inversion Fractals - 心鏡曼荼羅）をご覧ください．

アルゴリズムは単純なので，面白い図を生成する円の配置を見つけて，動きをつけます．円の配置を試す際には拙作のSchottkyLinkを用いました．円や球で構成されるフラクタルを直観的に構成することができるウェブアプリケーションです．普段からこういったフラクタルの可視化等に取り組んでいるのでこういった形で役に立つのは嬉しいですね．まだバグも多いのですが，興味があればお試しください．
f:id:soma_arc:20170225211055p:plain

動きをつける際に参考にさせていただいたのはこちらの記事（2Dの小技 動くお絵かき - Qiita）と各種のeasingが紹介されており，実際に動きをみることができるこちらのサイト（http://gizma.com/easing/）です．前々からこのフラクタルに小気味良いモーションを付けたいと思っていたので実現できてよかったです．

去年投稿した作品はこのフラクタルの三次元版でした．形状は気に入っていたのですが，シェーディングがわりとお粗末だったのがマイナスポイントでした．三次元は魅せ方が難しいうえ，時間もなかったので，二次元にしてわかりやすい形にしたのは良い選択だったと思います．

おわりに

今回のTDFではやりたいと思っていたことを試す非常に良い機会になりました．他の作品にも創作意欲を刺激されたので来年に備えたいですね．また，各部門にもっと作品が増えて欲しいと思っておりますので，興味のある方は是非参加，作品発表をしていただければと思います．
それでは，Demoscenerの皆様の一年がより良きものでありますように．