立方体がいつのまにか正六角形に見える錯視画像をProcessingで作る
今日の風景は休みです
はじめに
元々錯視というか、トリックアートみたいなのが好きだったのだけれども、久しぶりに「なるほど」と思った錯視画像が『哲学101問』の中に紹介されていた。
これが、立方体が正六角形に見えるというものなのだけれど、単純にそれを書いても面白くないだろう、ということで、久しぶりにProcessingを使って、GIFアニメーションにしたら、錯視っぽさが出てくるのではないだろうかと思って作ってみたのが、今回のエントリとなる。
制作物
とはいえ、いきなりProcessingのことを書きはじめても仕方ないので、先に成果物を出す。
このような単純な動画であるならば、Processingで簡単にできる。
UbuntuによるProcessingのインストール
これ自体は簡単で、Linux用の圧縮ファイルの解凍する場所に、processing
というパスが通るようにするといい。色々な方法はあるけれど、自分の場合だと、自分のホームディフェクトリに対して$HOME/bin
というディフェクトリを掘り、そこにパスが通るようにしている。
Processingの利用言語をPythonとして使う
手元にあるProcessingの本によれば、Processingは、メディアアートのための「スケッチブック」という側面を強調 している。つまり、気軽に自分のグラフィック的なアイデアを簡単に実現するためのもの、という側面を見ている。
しかし、デフォルトの言語であるJavaは、静的型付け言語という側面もあり、簡単に書く分には少々面倒臭い。ProcessingにはPythonをサポートしているのもあるので、そちらを使うほうが、自分の性にあっている。なので、Pythonを利用して、自分は書くことを決めた。Pythonの言語を追加する方法は下のような感じ:
右の言語の部分をクリックすると「モードの追加」が出てくるので、それを選択:
そのあとにPythonを選んでインストール完了
Processingの基本
先にコードを見せたほうが早いので、コードを先に掲載しておく:
add_library('GifAnimation') animation = GifMaker(this, "/home/esehara/Pictures/sample.gif") frame = 0 rev = False def setup(): size(300, 300) stroke(0, 0, 0) strokeWeight(3) animation.setRepeat(0) def draw(): background(255) stroke(255, 255) draw_quad(fillalpha(rev)) draw_line(fillalpha(rev)) animation.setDelay(1) animation.addFrame() update() def fillalpha(rev): global frame if rev: return (255 * 2) - frame else: return frame def draw_quad(fillalpha): stroke(0, 255) fill(255, 255, 0, fillalpha) quad(150, 35, 50, 94, 50, (94 + 115), 150, 150) fill(255, 0, 255, fillalpha) quad(50, (94 + 115), 150, (300 - 45), 250, (94 + 115), 150, 150) fill(0, 255, 255, fillalpha) quad(150, 35, 250, 94, 250, (94 + 115), 150, 150) def draw_line(fillalpha): stroke(0, fillalpha) line(50, 94, 150, 150) line(250, 94, 150, 150) line(150, 150, 150, 250) def update(): global frame global rev frame += 5 if frame == 255: rev = True if frame > (255 * 2): animation.finish()
基本的には、Processingが実行されるときに呼びだされるsetup
という関数と、定期的に実行されるdraw
という関数を定義するという方針になっている。とりあえず、この二つで、画像を書いていくことになる。
ちなみに、Processingは、キャンパスに対して重ね描きするので、初期化方法として、background
を使う。これによって、キャンパスに描かれたものがクリアされる。
考え方
まず最初に、正三角形をぐるりと中心から配置した正六角形を作る。ここから、三つの線を消すことによって、立方体に見せることにする。
三つの線を消すということを考えた場合、愚直に三角形を描写することを考えず、四辺形を描写するquad
関数を使い、これを消えるラインで分割することにする。ただ、先に一辺がどれくらいの長さになるかを知らないといけない。
正三角形の高さに対し、辺の長さを求める公式はあるのだが、とりあえずその公式はすっとばして、垂線の高さが100の場合は115になる(このサイトを利用した)。一辺が115になることがわかれば、図のようにAB、CD, DE, EFの座標を計算すれば良い。あとは、このラインにそって引いていけば、正三角形による正六角形ができあがる。図にすれば下のような感じ。
ちなみに、ABの中点を仮にHと置くと、HGは100となる。
GIFの作りかた
Processingには、GifAnimationというプラグインが存在している。Ubuntuの場合、これを、Processing起動時に生成されるホームディレクトリ下のsketchbook/libraries
に置くと良い。そのあと、「スケッチ」というメニューから「ライブラリをインポート」で、「GifAnimation」を選択すれば、ライブラリ用のコードが投入される。(参考:Processing 3でGIFアニメを作って保存する方法 - Qiita)
まとめ
個人的な印象だと、やはりプロトタイピングというか、スケッチベースの落書きをコードベースでやるんだったら、動的型付け言語のほうが好きだなあ、というのがある。なんで型を気にしながら、いちいち書いていかなければいけないのか、なんて面倒なことを考えてしまう。
以前にClojureから使えるQuilを使っていても思ったけれども、なにかをインタラクトに書く用途であるならば、自分としては動的型付け言語がいいな、と思ったりしたのであった。
参考文献

- 作者: マーティンコーエン,Martin Cohen,矢橋明郎
- 出版社/メーカー: 筑摩書房
- 発売日: 2008/10/08
- メディア: 文庫
- 購入: 5人 クリック: 4回
- この商品を含むブログ (11件) を見る

Processing:ビジュアルデザイナーとアーティストのためのプログラミング入門
- 作者: ベン・フライ,ケイシー・リース,中西泰人,安藤幸央,澤村正樹,杉本達應
- 出版社/メーカー: ビー・エヌ・エヌ新社
- 発売日: 2015/09/20
- メディア: 単行本
- この商品を含むブログを見る