Rikemen 
これまでのプログラムでは実行した後の結果の画面は静止していましたね。しかし、ここからは動きのあるプログラムを作り、Processingの魅力をさらに感じていただきます。
目次
setup/draw関数：Processingプログラムの基本
まずは、Processingプログラムの基本であるsetup()とdraw()関数について学びましょう。
setup()関数
Processingのプログラムでは、setup()関数は一度だけ実行される特別な関数です。ここでは初期化のコードを書くことが一般的です。例えば、キャンバスのサイズを設定するsize()関数や、背景色を設定するbackground()関数などはsetup()関数内で呼び出すことが多いです。
void setup() {
size(500, 500);
background(255);
}
draw()関数
一方、draw()関数はsetup()関数の後に連続して実行され、フレームごとに画面が更新されるところです。この関数の中に描画したい要素を書くことで、動きのある表現が可能となります。例えば、以下のようなコードでは、マウスの位置に追従する円が描かれます。
void draw() {
background(255);
ellipse(mouseX, mouseY, 50, 50);
}
draw()関数が繰り返し実行されることで、マウスを動かすたびに新しい円が描かれ、古い円は背景色で消えるというアニメーションが作られます。
setupは初期設定、drawで連続的な動作や変化、アニメーション、インタラクティブな反応を記述
setup関数の背景と役割
setup()関数は、Processingスケッチ（プログラム）が起動したときに一度だけ呼び出されます。ここで行うのは、通常、アプリケーションの初期設定です。そのため、setup()関数内にはキャンバスの大きさを設定するsize()関数や、初期の背景色を設定するbackground()関数など、全体の設定に関わるコードが記述されることが一般的です。
また、画像ファイルやサウンドファイルの読み込み、変数の初期化、オブジェクトの生成など、アプリケーションの実行に必要な準備を行うコードもsetup()関数内に記述します。
draw関数の背景と役割
一方、draw()関数はsetup()関数の後、毎フレームごとに自動的に繰り返し呼び出されます。そのため、draw()関数内には動的な描画に関するコードを記述します。円を移動させる、色を変化させる、画像を回転させるなど、時間と共に変化する表現はdraw()関数内で扱います。
Processingが自動的にdraw()関数を繰り返し呼び出すことで、動きのあるアニメーションや、ユーザーの入力にリアルタイムに反応するインタラクティブな表現を作ることが可能となります。
インタラクティブなプログラムを作る
それでは、実際にマウスやキーボードを使ってインタラクティブなプログラムを作ってみましょう。
マウスで操作
Processingではマウスの位置情報を変数mouseXとmouseYで取得できます。また、マウスボタンが押されたときの動作はmousePressed()関数で定義します。
以下のプログラムでは、マウスを押すたびに画面上にランダムな色の円が描かれます。
void setup() {
size(500, 500);
background(255);
}
void draw() {
}
void mousePressed() {
fill(random(255), random(255), random(255));
ellipse(mouseX, mouseY, 50, 50);
}このように、マウス操作でインタラクティブな表現ができます。
キーボードで操作
Processingではキーボードの入力も簡単に扱うことができます。キーボードが押されたときの動作は、keyPressed()関数内に記述します。
次のプログラムでは、キーが押されると背景色がランダムに変わります。
void setup() {
size(500, 500);
background(255);
}
void draw() {
}
void keyPressed() {
background(random(255), random(255), random(255));
}
これにより、ユーザーがキーを押すことでプログラムが反応し、インタラクティブな体験が生まれます。
まとめ
このように、Processingを使えば、setup/draw関数とマウスやキーボードのイベントを利用して、簡単にインタラクティブなプログラムを作ることができます。実際にコードを書いてみて、さまざまな表現を試してみてください。
Processingの世界は無限大です。次回は、より高度な動きを生成するための、ループや条件分岐について学んでいきましょう。
コラム：関数とは？そして、voidの意味
Processingの世界を理解するためには、「関数」と「void」の概念を理解することが重要です。
関数とは？
関数とは、一連の命令をひとまとめにしたもので、特定のタスクを実行するためのコードのブロックです。関数は一度定義してしまえば何度でも呼び出すことができ、同じコードを何度も書く必要がなくなるため、プログラムを整理したり、効率的にしたりするのに役立ちます。
Processingでよく見るsetup()やdraw()も関数の一つです。例えばdraw()関数は、画面を更新するためのコードを含んでいます。Processingがこのdraw()関数を繰り返し呼び出すことで、アニメーションが作られます。
voidとは？
Processingで関数を定義するとき、しばしばvoidというキーワードを見かけますが、これは何を意味するのでしょうか？
voidは「戻り値がない」という意味を持つキーワードです。関数は、処理を実行した後に結果（戻り値）を返すことができます。しかし、すべての関数が何かしらの値を返すわけではありません。特に、setup()やdraw()のような関数は、何かを計算したり値を生成したりするわけではなく、あくまで画面に何かを描画するための命令を行っています。
そこで、こうした「結果を返さない関数」を定義するときには、戻り値の型としてvoidを使用します。これにより、「この関数は何も返さない」と明示的に示すことができます。
整数を返す関数の例
整数を返す関数を作ってみましょう。例えば、2つの整数を引数として受け取り、それらを足し合わせた結果を返す関数add()を考えてみます。
int add(int a, int b) {
int sum = a + b;
return sum;
}
この関数は、二つの引数aとbを受け取り、それらの和sumを計算して返します。returnキーワードは、関数が計算した結果を呼び出し元に返すために使用されます。そして、関数名の前にあるintは、この関数が整数を返すことを意味します。
文字列を返す関数の例
次に、文字列を返す関数を考えてみましょう。例えば、ある文字列を引数として受け取り、その文字列に”Hello, “を加えて返す関数greet()を作ることができます。
String greet(String name) {
String greeting = "Hello, " + name;
return greeting;
}
この関数は、引数nameを受け取り、その前に”Hello, “を加えた文字列greetingを作成し、それを返します。関数名の前にあるStringは、この関数が文字列を返すことを示しています。
以上、関数とvoidの基本的な概念について解説しました。これらの理解は、Processingだけでなく、プログラミング全般の理解にも寄与する重要な概念です。それぞれの役割を理解しながら、楽しくProcessingを学んでいきましょう！
