変数と繰り返し

https://gyazo.com/c54feacc65f87c01365cc7f22a5260e4

スケッチの作成

Processingを起動して、新規にスケッチを保存しましょう。 メニューから[ファイル]-[名前を付けて保存]をクリックして、「スケッチフォルダを名前を付けて保存」を開きます。 ファイル名に「Project3」を入力し、[保存]をクリックしましょう。 保存先に「Project3」という名前のフォルダが作成されていることを確認してください。

https://gyazo.com/1454a1bbd3db15eb5ea977017a6202a2

データ型

Processingでは、「1」や「2」などの 整数 、「0.1」や「1.1」などの 小数 をデータとして扱うことができます。 これらデータの種類は データ型 で明確に区別されます。 例えば、整数は int というデータ型、小数は float というデータ型に該当します。 下記表に利用頻度の高いデータ型をまとめます。 取り敢えず表中の intfloatbooleanString だけはしっかりと覚えておきましょう(正確にはStringはクラスでありデータ型ではない)。

データの種類 データ型
整数 int 1, 2, 3
小数 float 0.1, 1.1, 10.1
真理値 boolean true, false
文字列 String “ABC”, “あいう”

変数

データを記憶しておくための箱が 変数 です。 変数を使用するには事前に 変数宣言 が必要です。 変数宣言はデータ型 変数名;と記述します。 データ型とは intfloat のことを指しています。 変数名は「変数に付ける名前」のことで、自由に設定が可能ですが、 「小文字で始まるわかりやすい名前」を設定することが望ましいとされています。 変数にデータを記憶させるには、変数=代入するデータ;と記述します。 変数にデータを記憶させることを 代入 と呼びます。

下記のコードを参考に各データ型の変数を作成してみましょう. データ型が異なる値を代入するとどうなるかも試してください.

それでは,変数を利用して図形を描画していきましょう. ここでは、 int型 の変数xとyを宣言し、ともに 150 を代入します。 この変数xとyを利用して、座標(x,y)の位置に半径5の円を描いてみましょう。 下記を参考にコードを入力したら、Runボタンをクリックしてください。 指定した半径の円が描かれていることを確認してください。

https://gyazo.com/a7542e84de7362762c5d59b3e5e77604

変数宣言と同時にデータを代入することも可能です。 この場合はデータ型 変数名=代入するデータ;と記述します。 下記を参考にコードを修正し、Runボタンをクリックしてください。 先程と同じ円が描かれていることを確認してください。

演算子

加算を表す「+」や減算を表す「-」などの記号を 演算子 と呼びます。 四則計算を行うための演算子を確認しておきましょう。 整数同士を対象とした「/」の演算結果は商となることに注意してください。 演算の優先順位を上げるための「()(丸括弧)」も記述可能です。

演算子 意味
+ 加算 5+2 -> 7
- 減算 5-2 -> 3
* 乗算 5*2 -> 10
/ 除算 5/2 -> 2
% 剰余 5%2 -> 1

ここでは、円の半径を表す int型 の変数rに 50 を代入し、半径50の円を描きます(直径は変数rの2倍)。 加えて、変数xから100を引いて位置を左方向にずらした円、100を足して位置を右方向にずらした円も描きましょう。 下記を参考にコードを修正し、Runボタンをクリックしてください。 指定した3つの円が描かれていることを確認してください。

https://gyazo.com/83939472f6b3f1b50e416836fcd99903

for文

同じ処理を繰り返して実行するには for文 を利用します。 for文は下記のように記述します。 「()」内には、 変数の初期化繰り返し条件変数の更新 を記述します。 例えば、int型の変数iを宣言し、iの値を1ずつ増やしながら、10回同じ命令を繰り返すには、 for(int i=0; i<10; i++)と記述します。 i<10は「変数iが10より小さいかどうか」を判定する条件文であり、 「 < 」のような演算子は 比較演算子 と呼ばれます(詳しくは次回に解説します)。 また、i++は値を1だけ増やすという演算子であり、i=i+1と同じ処理です。

for(変数の初期化;繰り返し条件;変数の更新){
    繰り返す命令
}

下記のコードを参考に、複数の半径10の円を横に並べて描きましょう。 for文を利用して、xを30ずつ増やすことで、位置を右方向にずらしながら10箇所に円を配置しています。 iは0から9まで変化するため、xは15、45、75、…、255、285と変化します。 コードを修正したら、Runボタンをクリックしてください。 指定した10箇所の円が描かれていることを確認してください。

https://gyazo.com/18ddbad0efcbf995e845b6f010fc3a4e

for文を利用して,変数redを20ずつ増やすことで,円に赤色のグラデーションで塗りつぶしの色を設定しましょう. 塗りつぶしの色は,fill()関数を利用し,引数に赤,緑,青の成分を0〜255で設定します. iは0から9まで変化するため,redは20,40,60,…,180と変化します.

Image from Gyazo

課題

前節で描いた円の半径を、左から順に5ずつ増やしてください(右の円ほど大きくなる)。 また,円に黄色のグラデーションで塗りつぶしの色を設定しなさい. 課題が完成したら、作成したスケッチを ZIPアーカイブ 形式で保存します。 ZIPアーカイブを作成するには、メニューから[ツール]-[スケッチをアーカイブ]をクリックして、「スケッチを名前を付けてアーカイブする」を開きます。 保存するファイル名を確認した上で、[保存]をクリックします。 保存先に「Project3-日付a.zip」というファイルが作成されていることを確認してください。

Image from Gyazo

参考書籍