はじめてのプログラミング③(描画)
https://www.youtube.com/watch?v=2Rad62UQF_o&feature=youtu.be
概要
キャンバス
キャンバスを構成するピクセルについて
デフォルトの横幅と高さについて
size 関数
int は「型」である
int は整数型であり、文字列型とは異なる
「引数」「呼び出し」の概念
複数の引数の渡し方
キャンバスの大きくする
size 関数の引数に文字列を渡して型エラーにする実験
rect 関数
席を表す四角形を原点の位置にひとつ描画する
席を表す四角形を原点からズレた位置にひとつ描画する
席を表す四角形を、間隔を開けながら複数描画する
さて、関数を使って複数の図形を描画してみようと思います。
今回の大まかな流れはこのようになります。
キャンバスの座標の考え方を知り、関数を用いてキャンバスの大きさを変更したり図形を描画したりします。
第2回で初めてのプログラムを作っていたとき、実行中に灰色っぽいウィンドウが表示されていたのを覚えているでしょうか。
図形や文字を描画したりできるキャンバスというウィンドウです。
素早く描画内容を切り替えることでアニメーションにもできます。
では何かを描画したいとなると、どうやって位置や大きさを指示すればいいのでしょうか。
まずはキャンバスの座標について理解しておく必要があります。
画面上の画像の最小単位となる点のことをピクセルと呼び、x座標やy座標、大きさはこのピクセルが何個分かで表現されます。
Processing のキャンバスでは左上の端に原点があり、x 座標は画面右方向、y 座標は画面下方向に増えていきます。
一番左上のピクセルの座標が (1, 1) ではなく (0, 0) になることに注意してください。
キャンバスウィンドウは、後述する方法で設定を変更しなければ 100 ピクセル掛ける100ピクセルの大きさになっています。
キャンバスの大きさがそのままでは小さすぎるので、もっと大きくしようと思います。
キャンバスを大きくするには、size 関数を使います。
公式リファレンスでの size 関数についての説明を見てみると、Syntax、つまり文法の章で、左から順に size → カッコ → width → カンマ → height → 閉じカッコと記載されています。
これはどういう意味でしょうか?
前回説明した関数という用語を思い出してください。
データを受け取って特定の処理をするものを関数と呼びましたが、関数は複数のデータを受け取ることもあります。
この、関数が使われる際に受け取るデータのことを「引数」といいます。
println 関数は出力したい内容を引数に取る、引数が1つだけの関数だった、という言い方をします。
2つ以上の引数を取る関数の場合、使うときにはカンマ区切りでそれぞれデータを渡します。
そういうわけで、size 関数は1つ目の引数 width と2つ目の引数 height を取るということがリファレンスから明らかになりました。
すぐ下の、Parameters、つまり引数の章に着目してください。
引数それぞれについて名前とその役割の説明が左右に記載されていますが、真ん中の int はどういう意図で記載されているのでしょうか?
これは、プログラム上でデータを混同せずに安全に扱うための分類で、型と呼ばれています。
int は integer、つまり整数型を意味しており、width でも height でも、整数という分類のデータしか受け取らないことを示しています。
ここに整数型以外のデータを渡すように書かれたプログラムは不正ということになります。
型に関する決まりごとはプログラミング言語によって大きく異なりますが、Processing においては、型の考え方で不正と判定されたプログラムは実行できません。
これまで説明した size 関数の使い方や型について確認するために、さっそく実際にプログラムを書いてみましょう。
文字列2つの組を size 関数に渡しています。
code: typeError.pde
println("start");
size("300", "200");
println("canvas size changed");
code: error
The method size(int, int) in type PApplet is not applicable for the arguments (String, String)
start すらコンソールに出力されません。
なぜ出力されないかというと、先述した型に関するエラーが出ていて、プログラムが実行されていないからです。
プログラミングにおいてエラーメッセージは、プログラムを完成させるための大事な手がかりになります。
まだ紹介していない専門用語を含んでいるので今回は別途説明しますが、ぜひ自分でエラーメッセージを読み解くことを習慣づけてください。
このエラーメッセージのなかで applicable という単語に注目してください。
これを日本語に訳すと「適用できる」となります。
今までは「関数にデータを渡して使う」のような言い方をしていましたが、「データに関数を適用する」という言い方もできます。
もともと関数があってデータを持ってきたような言い方から、もともとデータがあって関数を持ってきたような言い方に変わりましたね。
これをもとに大体の意味をとってみると「String 2つの組に対して size 関数を適用できない」というようになります。
String は文字列型を意味しています。
言い換えると「size 関数に String 2つの組を渡せない」ということになります。
さきほどのプログラムから、文字列をつくるためのダブルクォートを外して、それぞれ整数値として扱われるようにします。
これなら型の観点では正しいプログラムになるはずです。
code: changeSize.pde
size(300, 200);
キャンバスが少し広くなりましたね。
次は rect 関数を用いて、席替え表での席を表す四角形を描画していきます。
rect 関数は4つの引数を取り、キャンバスにおいて指定した位置に指定した縦横の大きさで四角形を描画します。
では、どんな挙動をするか予想しながら、これから提示するプログラムを写して実行してみてください。
code: rect1.pde
size(300, 200);
rect(20, 20, 80, 50);
左上に横長の長方形が描画されました。
さらに1行追記して、右に間隔をあけて別の四角形も描画させてみます。
code: rect2.pde
size(300, 200);
rect(20, 20, 80, 50);
rect(120, 20, 80, 50);
目標にしている席替え表生成プログラムでは、席を表す四角形をズラシながらたくさん描画することになるので、このままだとプログラムを書く側の人間が何度も座標を計算することになります。
これは非効率なので、次回はもっとわかりやすいかたちで規則的に複数の図形を描画する方法について学んでいきます。
今回はここまでにします。