はじめに

今回のサンプルコードを開いてもらった時、これまで解説してきたサンプルとは異なる点に気づかれたと思います。タブが複数ありますね。 ProcessingのIDE (統合開発環境)では、タブは内部クラスを定義するのに使われます。一般的なエディタでも、複数のファイルをタブごとに開いて同時に表示する機能はありますが、注意しておくべき点は、タブはそのタブを含むウィンドウの別のタブからしか参照できず、独立したコードファイルを保存できるわけではないことです。今回のコードでは、 ArrayObjects と Module という二つのタブが存在しますが、ModuleタブはArrayObjectsで使用するクラスの定義のみを行っています。

コードを読む

ArrayObjecs

Module

軽く目を通してみると、 setup() や draw() などの見慣れた関数が揃っているのは ArrayObjects タブの方なので、こちらから読みましょう。

コメントから始まっていますね。読んでみましょう。「ArrayObject。カスタムオブジェクトの配列を作成する構文をデモします。」とのことです。詰まる箇所は特にないと思うのでサクサク進めましょう。

変数意味 unit 単位？ count 何かの数？ mods あまりわからないけど”modules”を縮めて”mods”になってそう？

9行目で Module という型の変数が宣言されていますが、実はこれはProcessingに元々用意されているクラスではなく自分で定義しているものです。中身は後で確認しましょう。

では setup() から確認していきましょう。

setup

size() はウィンドウサイズを指定する関数、 noStroke() は図形の枠線が描かれなくなります。どちらも毎度おなじみだと思うので、憶えていらっしゃる方も多いと思います。

次に wideCount , highCount を定義していますが、式に width , height が使われています。 width , height は、自分で定義せずに使用できる特殊な変数で、それぞれ描画ウィンドウの幅、高さを取得する時に使用します。描画ウィンドウのサイズは12行目で定義している通りなので、今回は width =640, height =360となっています。

ところで wideCount , highCount はその式の定義から、幅方向、高さ方向にそれぞれ unit が何個取れるか、を表すことがわかります。

次に count ですが、 wideCount , highCount の意味を考えれば、 count は、一辺の長さが unit の正方形を描画ウィンドウに何個敷き詰められるかを表すことがわかります。この直後に配列 mods を定義しているのですが、配列の要素数に count が使われています。

ところで、ここまで出てきた変数の関係を図にすると下のようになるのですが、概ね正方形の区画1つに対して1つの点が入っていることから、「 1つの点が配列の1要素に対応していそう」と予想できますね。

（図の中の正方形の一辺の長さは unit (=40) です。）

ついに Module が出てきたので、 Module タブのコードを読む必要が出てきたのですが、一旦全体の流れを追いたいので、放置します！ Module 型の変数が入ることだけ憶えておきましょう。

これで setup() はおしまいですね。

background() は毎度おなじみですね。描画ウィンドウ全体を塗りつぶす関数です。今回の引数は 0 なので黒で塗り潰すことになります。

次にループを回していますが、これまで見てきたfor文とは少し異なると思います。これは拡張for文 (for-each文) と呼ばれる構文です。何が行われているかは一見して想像がつくと思いますが、 mods の要素を順に mod という名前の変数として取り出し、処理を行います。

繰り返し処理の中身なのですが、ここも Module クラスの定義を読まないとわからないところでね。というわけで一旦放置しましょう。

これで draw() が終わり、 ArrayObjects タブは終わってしまいましたね。

というわけでここまで放置してきた Module を読みましょう！

変数意味 xOffset , yOffset x, y方向の初期位置のずれ？ x , y x, y座標? unit 何かの単位 xDirection , yDirection x, yの方向？ speed 移動速度？

次にコンストラクタが書かれていますね。コンストラクタは、変数（インスタンス）を生成するときの初期化処理を行う関数です。（ちなみに、コンストラクタは必ずしも全フィールドの値を引数にとるように定義されるわけではありません。） Module のコンストラクタはフィールド8つのうち、 xDirection , yDirection 以外のフィールドの代入を行っています。

次に update() というメソッドが定義されていますね。コメントには「変数を更新するためのメソッド」と書かれていますね。このメソッドをこのまま読み進めてもいいのですが、 x , y などのフィールドを更新しているものの、図形描画は行われていません。全体像を掴むためには、まず描画に直接使われている変数を把握するのが近道なので、 update() は一旦飛ばして先に display() を読んで見ましょう。

fill() は図形の塗り潰し色を指定します。今回は引数が255なので、白になります。 ellipse() は楕円を描く関数ですが、今回は中心が ( xOffset + x , yOffset + y )、直径が 6 の円を描いています。どちらもよく見る関数ですね。

これで x , y , xOffset , yOffset は円の中心座標に関係する変数であることがわかりましたね。とりあえず display() は円を描いているということだけ憶えておきましょう。

では update() に戻りましょう。さっき display() を読んだことで、 x , y は円の中心の座標に関係していることがわかっています。 22行目をみると、 x に speed * xDirection を加算しています。ということは speed はx方向の移動速度に相当し、また xDirection は x の正負いずれの方向に移動するかを表す変数であると予想できます。

次に x の値で分岐していますね、 x が大きすぎる/小さすぎる場合に xDirection に -1 をかけるという処理をしています。つまり x がある範囲をはみ出してしまった場合に点の移動方向を反転させ、範囲内に戻るようにしています。また移動方向が反転する時に y の値も少し移動させており、さらに y がある範囲をはみ出した場合は移動方向を反転させています。

Module を理解したところで、 ArrayObjects の読み飛ばした箇所に戻りましょう。

22行目の index++ という記法に注目してください。これは後置インクリメントと呼ばれる記法で、ループ構文でよくみかけると思います。これはある処理と変数のインクリメントを纏めて行う際に使える記法で、このコードは次のコードと同じ処理を行います。

というわけでこの行では、正方形区画を順番に見て、 Module 型のインスタンスを生成して mods の各要素に代入しています。

Module が一体どの位置に円を描くのか丁寧に考えてみましょう。まず x , y それぞれのオフセットは x * unit , y * unit なので、図で表すとこのような位置になります。

拡大してみましょう。 x , y の値は unit /2なので、先ほどのオフセットにこれらを加算すると、円の初期位置は正方形区画の中心になることがわかります。

ちなみに random() は、範囲を指定して乱数を取得する関数です。今回は 0.05~0.8 の範囲からランダムに一つの値を取得しています。 mods の各要素の speed は乱数で決定しているんですね。

この描画を描画ウィンドウに収まるような全ての x , y で繰り返すと、はじめに見せたアニメーションが出来上がります。

おまけ多次元配列

今回のコードに関してはmodsはModule型の配列として定義されていました。ここで配列 mods にはインデックスは1つしか存在しない（逆に言えば、 mods [0], mods [2]などと1つのインデックスにより Module 型の要素1つを取り出せる）ので敢えていうなら一次元配列です。

ところで、今回扱った作品の図形的な意味を考えると、Module型の配列はx, yの２方向に広がっているので、二次元配列として扱う方が直感に即しているように思われます。

というわけで二次元配列を使用する場合のコードを書きました。 Module はサンプルと全く同じものを使用する想定です。

変更した箇所を説明します。 mods の定義のカギかっこが2つに増えていますが、これが二次元配列の変数を定義しているところです。配列要素数には wideCount , highCount をそれぞれ指定します。

ループしている箇所では x , y を配列のインデックスとしてそのまま利用できるので、元あった変数 index は不要になります。

さいごに

今回は、自作クラスの配列の使い方を学びました。クラスは慣れると便利な道具になります。雰囲気を感じ取って使いこなしてくださいね。

共有:

X で共有 (新しいウィンドウで開きます) X
Facebook で共有 (新しいウィンドウで開きます) Facebook

関連 Processingサンプルコードをわかりやすく解説【Constrain】 Processingサンプルコードをわかりやすく解説【Pattern】 Processingサンプルコードをわかりやすく解説【ToonShading】 Processingサンプルコードをわかりやすく解説【Tickle】 Processingサンプルコードをわかりやすく解説【Button】 Processingサンプルコードをわかりやすく解説【Follow1】コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Processingサンプルコードをわかりやすく解説【Arct… Processingサンプルコードをわかりやすく解説【Butt…

📎📎📎📎📎📎📎📎📎📎