人妻と0から学ぶプログラミング入門「第3回 Processingの基本を学ぼう」

前回の復習

　前回の記事は以下。

　宿題はドラえもんを描くプログラムをつくること！結構難易度の高い宿題だったのにきっちり仕上げてきました。凄い！さすが妻！

f:id:necogista:20141120174046p:plain
　やるじゃん！

　前回はちょっと急ぎでとにかく絵を描いちゃいましたが、今回は一度Processingの基本の説明です。

Processingの基本

Processingの文法

　実はProcessingは以下のような文法が基本になります。

void setup() {
　ここにかかれたプログラムは一回だけ実行される
}

void draw() {
　ここにかかれたプログラムは繰り返し実行される
}

　とりあえず void とか()の意味はあまり気にせず、上のようになっていると覚えて下さい。setupの中ではプログラム中一度だけ実行すればよいような命令をかいてやって、drawの中には何度も実行するような命令をかいてやります。
　こうすることで、実行されるたびにちょっとずつ変化するプログラムをかくことで例えば今後アニメーションなんかを簡単につくることができるのです。

　例えば、第2回で出て来た以下の線を引くプログラムの場合。

size(200,200);
line(100,100,150,150);

　以下のようにかいてあげるのがProcessing流です。ウィンドウのサイズを決める箇所は一度でよいので、sizeはsetupの中に描いてやって、絵を描く部分は drawの中に入れてあげます。こうすると、今後線を動かしたいときとかに便利なのです（当然、今は動きません）。
　あと、{}の中は見やすくするために、頭に空白を入れるのが一般的です。空白を入れる時は「tab」というキーを押して入れてあげましょう。といっても、パソコン自体は空白は無視するので、空白入れなくても大量に入れてもエラーになることはありません。

void setup() {
  size(200,200);
}

void draw() {
  line(100,100,150,150);
}

Processingの辞書

　前回の宿題中、妻から「色つけたい！どうやって色つけるの？」と質問されました。答えは、 fillという関数を使うのですが、このように何かやりたいときにどうやるのか調べたいときは、Processingのリファレンスを見るのがよいです。

Processing 1.0 _ALPHA_ » Reference
　こちらが日本語版。

　少し古い場合があるので、できれば以下の英語版をみるのがよいです。
Language Reference (API) \ Processing 3+
　英語版

　ここを見ると、例えば背景の色を変えたい時は、backgroundって関数を使えばよいんだなということが分かったり、三角形をかきたいときは、triangleって関数を使えばよいことがわかります。

　じゃあここで、Processingの文法に従って背景白で赤い三角形を描きたい！となると、以下のようなプログラムになります。

void setup() {
  size(200,200);
  background(255,255,255);
}

void draw() {
  fill(255, 0, 0);
  triangle(10, 10, 50, 50, 10, 100);
}

f:id:karaage:20141130145344p:plain
　実行したらこんな感じね

　これでもう自分で調べてどんなプログラムでもつくれちゃえますね。凄い！

宿題

　前回の宿題で描いたドラえもんの絵を、Processingの文法で書き直してみましょう！その際、背景を白にして、鼻を三角形にしてみて下さい。今回は簡単かな☆

　プログラムとスクリーンショットを自分のブログに公開してね☆

次回予告

　次はProcessingで計算してみようと思います。そして、今話題のミステリー「すべてがFになる」のトリックをプログラムしてみる予定です。予定は未定！

karaage. [からあげ]