朝の１０分プログラミング（4日目、2024年6月6日）解説

本日の課題、おつかれさまでした。

円を描くプログラム（コメント付）は、きちんと動いたでしょうか。

解答例

Processing の開発環境ウィンドウを立ち上げて、そのテキストエディタ部分に円を描くプログラム（コメント付）（ソースコード）を書き写した状態が以下のようになります。

図1　テキストエディタ部分に円を描くプログラム（コメント付）を書き写す

そして、実行ボタン（左上の ▶ ボタン）を押すと、実行ウィンドウに、輪郭が黒色、中身が白色の円が描かれます。

図2　実行ウィンドウに円が描かれる

簡単な解説

今回のプログラムで実行ウィンドウに描かれた円は、昨日（3日目、2024年6月5日）描いた円と全く同じものになっています。ただ、ソースコードは違っています。昨日書いたソースコードは、

void setup(){
  size(300,300);
  circle(150.0, 150.0, 200.0);
}

であったのに対し、本日書いたソースコードは、

// 円を描くプログラム
void setup(){
  size(300,300); // キャンバスのサイズ
  float x = 150.0; // 円の中心位置のx座標
  float y = 150.0; // 円の中心位置のy座標
  float d = 200.0; // 円の直径
  circle(x, y, d); // キャンバスに円を描画する
}

となっています。前者に比べて、後者は少しコードが長くなっているものの、以下の点でわかりやすくなっていることがわかると思います。

１．変数を使うことで数字が何を表しているかわかりやすい
２．コメントを書くことで各コードが何を表しているのかがわかりやすい

今後プログラムを書いていくときは、これらのことに気を付けて、わかりやすいソースコードを書くようにしていきましょう。

なお、変数、コメントについては、記事『高校数学をプログラミングで解く（準備編）「1-3 データ型、変数、コメント、コンソール出力」』で解説していますので、詳しくはそちらをご覧ください。

おまけ

プログラムをわかりやすくすることについて、もう一つ、スケッチ（フォルダ）の名前の付け方にも注意していきましょう。
上記のスケッチでは「sketch_240606a」という Processing で自動的に割りふられるスケッチ名を利用していましたが、このスケッチ名では、今後「円を描くプログラムのソースコードを見返したい」ときなど、見つけ出すのに大変になってしまいます。
そのため、スケッチ名はそのプログラムで何を行っているのかがわかるような名前を付けておきましょう。例えば、今回のスケッチであれば「drawCircle」などと付ければわかりやすくなるのではないでしょうか。

図3　スケッチ名を「drawCircle」として保存

図4　実行ウィンドウの名前も「drawCircle」になっている

スケッチ名はスケッチを保存するときに付けることができます。詳細は記事『高校数学をプログラミングで解く（準備編）「1-1 Processingの準備」』の「名前を付けて保存する」の節で解説していますので、そちらをご覧ください。

明日は結果をコンソールに出力するプログラムを作成していきます。

明日もよろしくお願いします。

MK’s papa