第1回　開発環境の使い方と基本的文法のおさらい

導入

今回と次回、2回にわたってProcessingの基本的な使い方をおさらいします。特に新しいコンピュータサイエンスを必要としない内容です。おさらいをしたら演習問題に取り組んでください。

演習は簡単なものから難しいものまで用意しています。なるべく自力で演習の要求するsketchを作成し、それから解答を参照してください。

なお、この連載で初めてProcessingに触れる方は、まず『Getting Started with Processing』（⁠以下、GSWPと略します。邦訳はこちら）をご一読ください。1時間もあれば目を通すことができる、大変やさしく分かりやすい書籍です。

お詫び：: 記事公開時に書籍ダウンロードサイトへのリンクを張っていましたが、こちらは正規に取り扱ったサイトではないと読者の方から連絡を受けました。筆者が再度確認したところ指摘の通りでしたので、該当部分を削除しました。関係各位・読者の方にはお詫びいたします。

展開

Processingの公式サイトのチュートリアルを読んで、Processingの開発環境（今後はPDEと呼びます）の使い方を身につけてください。英語ですが、簡単に書かれています。

［作業］ PDEの使い方を身につけよう。

Hello, World!

Processingにとって最も簡単なプログラムは、次のように書けます。

PDEを起動して、次のコードを入力してください。座標(50,50)に幅80、高さ80の円を描くメソッドです。ファイル名はDrawAnEllipse.pdeとしましょう。

DrawAnEllipse.pde

ellipse(50, 50, 80, 80);

このコードはGSWPの9ページに記載されています。

実行（RUN）ボタンをクリックすると、図1.1のような出力が得られます。

［作業］ 円の直径を100ピクセルに変更してください。

左側の円が表示されているウィンドウを「ディスプレイウィンドウ」と呼びます。このようなProcessingのウィンドウ各部の名称は、図1.2を参照してください。

もちろん、古典的なHello,World!プログラムも簡単です。

HelloWorld.pde

print("Hello,World!");

この場合、Hello, World!の文字列は、ディスプレイウインドウではなくPDE下部のコンソールに表示されます（図1.3⁠）⁠。

いかがでしょうか。Processingが敷居の低いプログラミング言語であることを感じられましたか？

［作業］ 読者の氏名をローマ字でコンソールに表示しましょう。

Processingの文法、一巡り

読者はCやRuby、BASIC等、何らかのプログラミング言語の入門書を一通り読んだことがあるという前提で、Processingの文法が一通り入っているコードを紹介します。

なお、今後この連載ではProcessingで書かれたソースコードのことをsketch（スケッチ）と呼びます。

次のコードForAndIf.pdeは、GSWPのP.43に記載されているコードに手を加えたものです。このsketchを入力して実行してください。エラーなく実行できるでしょうか（図1.4⁠）⁠。

ForAndIf.pde

size(480, 120);
strokeWeight(8);
for ( int i = 20; i < 400; i += 60) {
  if ( ((i-20)/60 % 2) == 0 ) {
     stroke(255,0,0);
  } else {
     stroke(0,255,0);
  } 
  line(i, 40, i + 60, 80);
}

このコードを解説します。

size(480, 120)はディスプレイウインドウの大きさを設定するメソッドで、ここでは幅480ピクセル、高さ120ピクセルに設定しています。
strokeWeight(8)は線の太さを8ポイントに設定するというメソッドです。
for(A;B;C){ D }は繰り返しの構文です。Aは初期条件。Bが繰り返し実行の継続判定。Cが実行1回終了後におこなう処理。そしてDが繰り返される命令ブロックです。
if(A){ B } else { C }は条件判断文です。条件Aが成り立てば命令ブロックBが実行され、Aが成り立たなければ命令ブロックCが実行されます。
stroke(255,0,0)は線の色を設定するメソッドで、3つの引数はそれぞれ色の三原色、赤・緑・青の強さを表し、この順に整数値で指定します。0が最も弱く、255が最も強い値になります。
line(i,40, i+60, 80)が線を描くメソッドです。引数は線の始点と終点の(x,y)座標です。

プログラムの動きを作る仕組みを 制御構造といいます。大きく3つに分類されます。参考文献『プログラム書法』のP.42から読んでみることをお勧めします。

順次 : 上から下へ単純にコードを実行する構造です。
選択 : if文で作られる構造です。 
反復 : for文やwhile文で作られる制御構造です。

for文とif文がどのように作用して動作するのか、トレースをおこなってください。

トレースとは、コード中の変数やオブジェクトの値を追跡することです。一覧表を作り、実行ステップにしたがって値を更新します。トレース作業をすることで、コードに対する理解が深まります。意図した動きをするかどうかの確認のために、努めておこないましょう。

［作業］ ForAndIf.pdeをトレースしましょう。

［作業］ ForAndIf.pdeを変更して、左下がりの斜線を7本表示しましょう。

トレースすると表1.1のように各値が更新されていることがわかります。

表1.1　トレースの例

実行ステップ	`i`	`(i-20)/60%2`	`stroke`
1	20	0	赤 (以後R)
2	80	1	緑 (以後G)
3	140	0	R
4	200	1	G
5	260	0	R
6	320	1	G
7	380	0	R
8	440	実行無し	実行無し

手を動かして紙の上でトレースし、体でコードの動きを確認すると、わからないと感じられていたコードが不思議と納得できます。「⁠プログラムが読めない、わからない」と感じる人は、そのコードを2度3度とトレースしましょう。登山者が山頂でひらけた景色に感動するように、「⁠はっ！」とする感覚を味わうことでしょう。

演習

演習1（難易度：easy）

sketchウインドウを幅400ピクセル、高さ300ピクセルにし、中心座標が(x,y)=(60,50)、直径が60の円を描きましょう（図1.5⁠）⁠。ファイル名はCircleOnUpperLeft.pdeとしてください。

演習2（難易度：hard）

ForAndIf.pdeを変更して、図1.6のように赤・緑、青・赤、緑・青、赤・緑……の順でクロスが並ぶようにしましょう。ファイル名はForAndIfRGB.pdeとしてください。

演習3（難易度：middle）

size(100,100)のスケッチウインドウに幅10、高さ10の正方形を100個並べましょう。左上角から右へ順に1から100の番号がついているものとして、順番が素数の正方形を赤で塗りつぶしましょう（図1.7⁠）⁠。ファイル名はPrimeNumberCubes.pdeとしてください。

演習4（難易度：middle）

size(100,100)のスケッチウインドウに幅10、高さ10の正方形を100個並べましょう。左上角から右へ順に1から100の番号がついているものとして、3の倍数の番号の正方形は緑、5の倍数の正方形は青、3と5の公倍数の正方形は赤で塗りつぶしましょう（図1.8⁠）⁠。ファイル名はFizzBuzz.pdeとしてください。

まとめ

Processingの開発環境の使い方を学習しました。
Processingのsketchの書き方を学習しました。
Processingの文法をひととおりおさらいしました。
トレースを学習しました。

学習の確認

それぞれの項目で、Aを選択できなければ、本文や演習にもう一度取り組みましょう。

Processingの開発環境（PDE）を使えるようになりましたか？
1. 使えるようになった。
2. ヘルプを見れば何とか使える。
3. 使い方がよくわからない。
Processingのsketchウインドウに線や丸を描く方法がわかりましたか？
1. わかった。
2. テキストを見れば何とかわかる。
3. わからない。
Processingのif文・for文の使い方がわかりましたか？
1. わかった。
2. テキストを見れば何とかわかる。
3. わからない。
ForAndIf.pdeのトレースが自力でできましたか？
1. できた。
2. テキストを見ながらなら何とかできた。
3. できなかった。

参考文献

『Getting Started with Processing』（⁠Casey Reas, Ben Fry著）
- 邦訳は『Processingをはじめよう』（⁠Casey Reas, Ben Fry 著、船田巧訳）です。
『プログラム書法第2版』(Brian W.Kernighan, P.J.Plauger 著)
- プログラミングの書籍としては古典中の古典ですが、今なお有益な名著です。今回であれば本書の制御構造の項をお読み頂くことをお勧めします。

第1回開発環境の使い方と基本的文法のおさらい

導入

展開