変数について理解する のバックアップ(No.2)


ここではプログラミングの重要な概念である「変数」について詳しく解説します。少し抽象的な話になりますが、まず念頭に置いてほしいのが、「変数」は小難しいもの、複雑なものではなく、プログラミングをする人間にとって非常に便利なもの、だということです。
 
「変数」の理解を進めるために、次の「お題」を考えていきます。

お題

正方形の画面を描き、その四隅に大きさが等しく位置が対称になる円を1つずつ書いてください。
※例えば以下の図のようになればOKです。細かな大きさや位置は変わってもOK。
 
var_sample1.png

考え方:「変数」を利用しない場合

まずは「変数」を利用せずに考えましょう。以下に、筆者の考え方と「変数」を利用しない場合のコードを記しますが、いい機会なので、どういう風に考えてコードを書けばいいか自分なりに試行錯誤から目を通すようにしてください。
 
まずは与えられたお題を前から順に見ていきます。

正方形の画面を描き、

 
画面を描くのは「size()」でしたね。正方形を描けばよいので、十分な大きさを確保する意味で横幅、縦幅をそれぞれ「400」に指定しましょう。
 

size(400, 400);

 
var_sample2.png
 
これでとりあえず画面はできました。あとは四隅に4つの円を描くだけです。ポイントは「4つの円の位置が対称」、「大きさは同じ」というところです。をここでは「ellipse()」を使っていきます。忘れた人は基本の図形:円で復習しましょう。
 
まず、「大きさは同じ」は簡単そうですね。計4つ描く円の半径をすべて同じ値にすればいいだけです。あまり大きく描くと円がかぶってしまいそうなので、「100」くらいにしましょうか。
 
問題は4つの円の位置(座標)ですね。まずは左上の円の位置を決めて、それに従って他の場所の位置を決めることにしましょう。
 
円の直径は「100」(つまり半径は「50」)に指定したので、左上の円の座標は「(80, 80)」くらいにしてみましょうか。
 

size(400, 400);

ellipse(80, 80, 100, 100);

 
var_sample3.png