変数と繰り返し

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

参考書籍

愛知県名古屋市にある椙山女学園大学 文化情報学部 向研究室の公式サイトです. 専門は情報科学であり,人工知能やデータベースなどの技術要素を指導しています. この公式サイトでは,授業で使用している教材を公開すると共に, ベールに包まれた女子大教員のミステリアスな日常を4コマ漫画でお伝えしていきます. サイトに関するご意見やご質問はFacebookまたはTwitterでお問い合わせください.

スポンサーリンク