第2回 – 設定をしよう


基本的な設定

さて、前回ダウンロードしたProcessingを立ち上げると、このような画面が表示されます。(mac版)

sketch_160724a___Processing_3_1_1.png

この白い部分にコードを書いていくわけだけれど、まず最初にしておいた方が良い設定があります。

メニューバーの環境設定から、チェックを画像のようにしてください。

設定.png

特に、複雑なテキスト入力を有効にする
と、
コード補完
にチェックを入れるのを忘れないでください。
これでコード補完が有効になって、生産性がかなり向上します。

ためしに、sと入力してcontrol + spaceを押してみてください。
sで始まるprocessingの予約語や命令がズラっと並びます。
この機能は、自分でかってにつけた変数名なども補完してくれるので、長い変数名を気軽に使うことが出来るようになります。
また、
//
と入力してその後日本語で何か打ってみてください。
多分表示されたのではないでしょうか。
Windowsの人は、コンソールのフォント をMSゴシックか何かにしないと文字化けしてしまうかも知れないので、同じく設定画面の「コンソールのフォント」をMSゴシックに変更してください。

ためしに何か表示させてみよう。

早速、以下のコードを白い部分に書いてみてください。

void setup(){

size(800,800);

}
void draw(){

ellipse(400,400,100,100);

}

そして、command + r (macの人) control + r (windowsの人)を押してみてください。
灰色のウインドウが現れて、真ん中に円が描かれているだけのウインドウが開いたと思います。

 では次に、ellipse(400,400,100,100)の400の数字を変えてみたり、他の部分の数字を変えてみたりしましょう。
 もう大体なんとなく、このプログラムが何を示しているか解ってきたと思います。

size(横幅、縦幅);
ellipse(横の位置(画面の左端から何ピクセル離れているか),縦の位置(画面の上から何ピクセル離れているか、)円の横幅,円の縦幅);

 まず、最初に void setup(){}の { と }の間に書かれた命令が、一度だけ実行される。
その中に記述されている命令は、

size(800,800)

だけではあるのだけれど、これがウインドウの大きさを決めています。
size()という命令(Method/メソッドと呼ぶ)は、setupの中でだけ有効なメソッドで、drawの中に書いても無視されるので必ず void setup(){ } の中に書きましょう。

そして、{}の中に書かれた命令文などは、行の最後に ; (セミコロン)を付ける、という約束があります。
必ずつけましょう。そうしないと、パソコンが行の終わりを認識出来なくてエラーが起きます。

そして、その後でvoid draw(){}の{と}の間に書かれた命令が、おおよそ秒間に60回連続で実行され続けます。
秒間に60回実行され続ける、の意味が少し解りづらいと思うので、次回わかりやすい方法を試していきます。