Processing の transform(1) ～translate 前編～
2010/06/21 20:23 - Processing
こないだ買った「Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門
で、その中で一番強く印象に残っているのは何かと言うと、translate、rotate、scale、そして pushMatrix、popMatrix の各メソッドにかなり違和感を感じた、ということ。 良いとか悪いとかではもちろんないですよ。 今まで遭遇したことがないロジックだったので、とまどったということです。
ところでこの記法、今まで慣れから考えるとかなり分りづらい感じするなぁ、と思う反面、使いこなせればけっこう威力を発揮しそうかも、と全く正反対の感想を抱かせたのです私に。
そんなちょっと気になるメソッド群なので、しばらくそれらについて、徒然なるままにいろいろ考えて、文章化してみたいと思います。
本書の P91～93 に translate を使って左図のような結果を表示するサンプルが出てきます。
この正方形を並べるアルゴリズムを ActionScript で記述すると、一般的には以下のようなコードになるんではないかと思います。
本書では以下のようなコードで記述されていました。
2行目の fill は AS の beginFill に、3行目の rect は AS の drawRect に相当しますが、ここで違和感の発生原因となっているのは rect の第1引数と第2引数です。
rect の各引数は drawRect と同じで、第1引数は矩形を描き始めるX座標、第2引数は同じくY座標になります。 そしてこのコードでは共にリテラルで 0 が指定されているというところです引っかかったのは。
今までの慣れから類推すると、10個の矩形が全部 (0, 0) から開始され、ステージ上には見かけ1個の正方形だけになっちゃうんじゃないか、と思ってしまいますが、ここでミソとなるのが4行目の translate(20, 20) とのこと。
何とこのメソッド、実行すると図形描画の基準座標を X座標方向に第1引数値分、Y座標方向に第2引数値分、加算して移動させるという、何ともすげー荒技な感じのものです。
つまり一番最初の正方形を描くときは translate を実行していないので (0, 0) が開始点になりますね。 二番目の正方形を描くときは (20, 20) が開始点に、三番目は (40, 40) が、四番目は (60, 60) …… という具合になり、結果として rect 関数の第1引数と第2引数がそれぞれ 0 でも、20ピクセルおきに正方形が描画されるという仕組みとのこと。
なんか地動説の世界から天動説の世界に連れてかれたような、すっげー違和感を感じました。
ActionScript でこういうロジック、あまりお目にかかった記憶ないんですが、じゃあ AcrionScript でこういうロジックをでコーディングできんのか、できるとするとどのような記述になるのか、というのが次回の話。
なお、この検証作業シリーズは、もう1冊参考書が出てきます。
「ActionScript 3.0による三次元表現ガイドブック
