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

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

２つの同心円はうまく描けたでしょうか。
以下のような図形が描ければ、O.K.です。

図1　2つの同心円

プログラム例

プログラム例を示しておきます。

void setup(){
  size(400,400); // キャンバスサイズ
  float c_x = 200.0; // 同心円の中心のx座標
  float c_y = 200.0; // 同心円の中心のy座標
  float D = 300.0; // 大きい円の直径
  float d = 150.0; // 小さい円の直径
  circle(c_x, c_y, D); // 大きい円の描画
  circle(c_x, c_y, d); // 小さい円の描画
}

ソースコード1　２つの同心円を描くプログラムの例

開発環境ウィンドウを立ち上げて、テキストエディタ部分にソースコード1を書き写して、実行ボタンを押してみると、図1の図形が実行ウィンドウのキャンバス上に描かれることを確かめてみてください。

解説

変数、コメントの利用

今回のプログラム（ソースコード1）では、円の中心座標や各円の直径は変数を利用して表すようにしています。具体的には、「中心」は英語で「center」ですので、その頭文字「c」をとって中心座標の$${x}$$座標を「c_x」、$${y}$$座標を「c_y」で表すことにしました。また、「直径」は英語で「diameter」ですので、その頭文字「d」を利用し、大きい円の直径は大文字の「D」、小さい円の直径は小文字の「d」でそれぞれ表すことにしました。このように、その変数が意味することを踏まえながら、変数を定義していくとあとでソースコードを見直すときにわかりやすくなります。
さらにソースコード1では、各変数の説明をコメントするようにしています。これにより、プログラムの内容がさらにわかりやすくなったのではないでしょうか。

なお、今回のプログラムですが、

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

ソースコード2　２つの同心円を描くプログラムの例2

と記述しても、図1と同じ図形を描くことができます。今後見直すことがない場合はこのような書き方でも、特に問題ないと思います。ただ、あとで見直す可能性がある場合やほかの人にもプログラムを見せる可能性がある場合は、やはりソースコード1のような記述をしておいた方がよいでしょう。

注意

今回のプログラムで一点注意しておきたいことがあります。２つの円は、大きい円を描いたあと、小さい円を描くようにする必要があるということです。もし、順番を逆にすると、図2のように大きい円だけが描かれるようになります。

図2　大きい円だけが描かれる

円を描く関数 circle を特に設定を変更せずにそのまま利用すると、円の輪郭は黒色で描かれ、円の中身は白色で塗りつぶされた状態で描かれます。そのため、図2では、先に小さい円を描いてはいるのですが、その上に大きい円を描いたので、大きい円の中身の白色で塗りつぶされてしまったというわけです。

なお、図形の輪郭の色や太さ、図形の中身の色や塗りつぶすか、塗りつぶさないかなどの設定は別途行うことができますが、今後の課題で必要なときに説明していこうと思っています。
ただ、早く知りたいという方は、記事『高校数学をプログラミングで解く（準備編）「2-1 Processingで図形を描く」』や記事『高校数学をプログラミングで解く（準備編）「2-2 Processingで色を扱う」』で解説していますので、そちらをご覧ください。

今週は、以上になります。
来週からはいよいよ「数学A」に関連した課題にチャレンジしてもらおうと思っています。

来週もよろしくお願いします。

MK’s papa