今日の風景は休みです

f:id:nisemono_san:20160804085435j:plain

はじめに

元々錯視というか、トリックアートみたいなのが好きだったのだけれども、久しぶりに「なるほど」と思った錯視画像が『哲学101問』の中に紹介されていた。

f:id:nisemono_san:20160806112707p:plain

f:id:nisemono_san:20160806112528p:plain

これが、立方体が正六角形に見えるというものなのだけれど、単純にそれを書いても面白くないだろう、ということで、久しぶりにProcessingを使って、GIFアニメーションにしたら、錯視っぽさが出てくるのではないだろうかと思って作ってみたのが、今回のエントリとなる。

制作物

とはいえ、いきなりProcessingのことを書きはじめても仕方ないので、先に成果物を出す。

このような単純な動画であるならば、Processingで簡単にできる。

UbuntuによるProcessingのインストール

これ自体は簡単で、Linux用の圧縮ファイルの解凍する場所に、processingというパスが通るようにするといい。色々な方法はあるけれど、自分の場合だと、自分のホームディフェクトリに対して$HOME/binというディフェクトリを掘り、そこにパスが通るようにしている。

Processingの利用言語をPythonとして使う

手元にあるProcessingの本によれば、Processingは、メディアアートのための「スケッチブック」という側面を強調している。つまり、気軽に自分のグラフィック的なアイデアを簡単に実現するためのもの、という側面を見ている。

しかし、デフォルトの言語であるJavaは、静的型付け言語という側面もあり、簡単に書く分には少々面倒臭い。ProcessingにはPythonをサポートしているのもあるので、そちらを使うほうが、自分の性にあっている。なので、Pythonを利用して、自分は書くことを決めた。Pythonの言語を追加する方法は下のような感じ:

右の言語の部分をクリックすると「モードの追加」が出てくるので、それを選択:

f:id:nisemono_san:20160806115636p:plain

そのあとにPythonを選んでインストール完了

f:id:nisemono_san:20160806115834p:plain

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の座標を計算すれば良い。あとは、このラインにそって引いていけば、正三角形による正六角形ができあがる。図にすれば下のような感じ。

f:id:nisemono_san:20160806121056p:plain

ちなみに、ABの中点を仮にHと置くと、HGは100となる。

GIFの作りかた

Processingには、GifAnimationというプラグインが存在している。Ubuntuの場合、これを、Processing起動時に生成されるホームディレクトリ下のsketchbook/librariesに置くと良い。そのあと、「スケッチ」というメニューから「ライブラリをインポート」で、「GifAnimation」を選択すれば、ライブラリ用のコードが投入される。(参考:Processing 3でGIFアニメを作って保存する方法 - Qiita)