Processingプログラミング

第
章
プログラミングと機械制御
プログラミング
授業進行の都合上，この手引きでは大幅に省略や言い換えを行っている．もしもっと詳
しく知りたい・もっと正確に知りたい・もっと他の機能を知りたいと思ったら，
の
や
（メニューの「
」からたどれる）や，
公式サイト
ただリファレンスは日本語のサイト「
入門
（
」の方が詳しい）や，紹介サイト
で調べてみる．本も何種類か出版されているので読んでみると良い．
や作品サイトを
（著者：
，出版社：
たとえば「
（
社））」は，網羅的・具体的で分かりやすくて良い（この手引き作成にあたって
沢山参考にした）．この本は簡単な英語で書いてあり，図やコードが多く気楽に読めるの
で，英語の練習にもなり一石二鳥である．どうしても日本語というなら，外れのなさそう
をはじめよう」
（著者：
と
な出版社（オライリー・ジャパン）の「
）．
インストールと
本体の起動
は
・
・
で使うことができる．
は，
で書
（
）の機能を使うので，まず自分の
かれたプログラムで，
の
にあった
（
の
以降．
ではだめ）をコンピューター
教室の
には，インストール済み）．
は
の
にインストールする（
用
（
）から入手できる．
の
にあった
のアーカイブファイルを
公式サイ
次に自分の
には
がインストール済みなので
トからダウンロードする（大学の
版）．適当なフォルダで，アーカイブを展開する．展開した
のフォルダを開く
の
（
）のアイコンがあるので，ダブルクリックする．
と，図
右の
（以下
と略する）のウインド
図
のプログラムは，図中の文字が書かれている背景の白い部分に入
ウが表れる．
左の「
ウインドウ」は，プログラム実行時にに表れる．
力する．図
を起動しただけでは表示されない．
第
章
プログラミングと機械制御
図
図
アイコン
のウインドウ
第
章
プログラミングと機械制御
の使い方
プログラム（
）の実行
のプログラムは
（スケッチ）と呼ぶこ
のプログラムは，
に表示した状態で，スタートボタン（左上
ともある．
にある円に囲まれた右横向き三角）をクリックすると実行される．プログラムを停止した
のストップボタンをクリックするか，
ウインドウのクローズボタ
いときは，
ンをクリックする．
のルールに従って名前を付けて保存する．
プログラムの保存プログラムは
のプログラムは，
をまたいで互いに流用できる．
拡張子は「
」（保存時に，自動でつく）
文字でファイル名はつける（漢字仮名でつけない）
ファイル名にスペースやハイフンは使えない
ファイル名は，数字で始まってはいけない
プログラムは同名のフォルダに入った状態で保存される（フォルダから出さない）
基本的なプログラムの形
のプログラムは，
を簡略化したものである（
や
・
の
）．また
には，
呼び出しが隠蔽されている．描画命令がどこにでも書ける
コードを書く位置によって実行タイミングや制御の流れが異なるなど，独特の性質がある
ので注意が必要である．
プログラムの骨格を下図に示す．
より前には，
定数などを書く．
文やプログラム全体から利用される変数（大域変数）や
の内部に書かれたコードと，地の部分（中括弧に囲まれていない部分）に書
かれた実行可能なコードは，プログラム実行開始時に一度だけ実行される．
の内部に書かれたコードは，プログラム実行の間中，定められた間隔で実行
として実行される）．
され続ける（別
ユーザーインタラクティブな操作（マウス操作やキーボード操作）は，地の部分（中
括弧に囲まれていない部分）に，定められた関数名（例えば，マウスクリックを読
」）で書く．
むには普通「
いくつかの行頭にある「
」は，返値と呼ばれるものであるが，しばらくは気に
についても今は気にしない）．
しない（
第
章
プログラミングと機械制御
図
プログラムの骨格
自分で定義したクラス（とりあえずプログラムの部品と考える）は，
から呼び出されたときだけ実行される．
や
の内部に書かれたコードは，
ウインドウが閉じられる時や停止ボタン
（スタートボタンの右のボタンをクリックしたときに一度だけ実行される．
プログラムは，同じグループ（中括弧で囲まれた各かたまりや地の部分ごと）では
行の順に実行される（繰り返しや条件分岐があるときは別）．
命令は，
文字（直接入力）で書く
「」は右から左への代入を示す（等しいは「
大文字と小文字は区別される（つまり，
は別のものを意味する）
」を使う）
と
は同時に成り立ち，
と
命令は，命令ごとにセミコロンで区切る（普通は一行に一つの命令）
命令が長いときは，途中で改行してもかまわない
ブロック（命令の固まり）は，中括弧「｛｝」で囲む
コメントは，
「
」と「
」で囲むか，
「
」から行末まで
ここから
と
の働きを説明するまでは，練習用のプログラム（コード）は，
地の部分に書くものとする．
第
章
プログラミングと機械制御
簡単なプログラム
プログラム練習１（座標と色と基本図形）
ここでは，
ウインドウに簡単な図形を描く練習をする．上記箇条書きの注意を参
に入力する．
考に，以下のプログラムを
書けたら，スタートボタンをクリックする．
ウインドウが表れて，赤地に水色
ウ
の縦長長方形がやや左下よりに描かれたら，正しくプログラムが書けている．
… 」などと表示されたら，プログラムに間違いがあるので，プ
インドウに「
ログラムをよく見て修正し，再度スタートボタンをクリックする．正しく図形が描かれる
まで，この作業（「デバッグ）という）を繰り返す．
上記のプログラムの意味を理解するには，コンピューター画面上の位置を指定する方法・
描画色指定方法・描画命令の三つを理解する必要がある．
のようにウインド
コンピューター画面上の位置指定には，独特の座標系を使う．図
，
とし，水平方向を軸（ｘ座標），垂直方向をｙ軸（ｙ座標）と
ウの左上隅を
呼ぶ．両軸ともウインドウ内は正の値だけである．つまりｘ軸は右方向へと数字が大きく
なり，ｙ軸は下方向へと数字が大きくなる．
図
ウインドウ上の位置
画面上での色指定は，基本的に
カラーで行う．
で色を指定するには，
指定の他に，いくつかの異なる方法が使える．どの方法を使うかは，色を指定する際の
数値の数で決まる．色を指定する数字が一つしかない場合は，グレースケールと
第
章
プログラミングと機械制御
は解釈し，は黒，
は白となる．指定する数字が３つの時は，
カラーと解釈さ
れ（数字が大きいほどその色が明るい光として描かれる）．引数の順番は
の各色に対応している．指定する数字が４つある時には，
に加えて最後の数字が透
）を示すことになる．透明度は，
で完全に不透明，で完全に透明（つ
明度（
まり色がない）になる．
以下に描画でよく使う命令（正しくは関数と言う）をあげておく．各命令の「」の中
身は引数（ひきすう）という．引数には，入れることのできる数字が，整数・小数のいず
れでもかまわないものと，どちらかでなければならないものがある（詳しくは
を見る．当面は
がエラーを訴えてきたら訂正するという方針で
）．
横幅
高さ
ウインドウの大きさを決める（
）
の明るさ
の明るさ
の明るさ
ウインドウの色（
）
色指定
描画する図形の線の色
線を無くす
線の太さ
色指定
描画する図形の塗りの色
塗りを無くす
座標
座標
縦横のサイズが
の点をうつ
開始点の座標開始点の座標終了点の座標終了点のｙ座標
指定された二点間に直線を引く
頂点１の座標頂点１の座標頂点の座標頂点の座標
頂点の座標頂点の座標
三角形を描く
アンチエリアスをかける．解除は
長方形と楕円形の描画指定には，
モード（左上角と幅・高さを指定），
モード（左上角と右下角指定）と
モード（重心座標と幅・高さを指定）の
）
３つの方法がある．楕円描画命令では，角の点は楕円に外接する長方形（
の角を考えて指定する．
や
など
モードを切り替えたいときは，
命令で切り替える．指定しないときは，各命令の
モードが選ばれる．
の
第
章
プログラミングと機械制御
左上角の座標左上角の座標幅高さ
長方形を描く．
モード（長方形描画の
）．
左上角の座標左上角の座標右下角の座標右下角のｙ座標
長方形を描く．
モード．
中心の座標中心の座標幅高さ
長方形を描く．
モード．
左上角の座標左上角の座標横直径縦直径
楕円形を描く．
モード．
左上角の座標左上角の座標右下角の座標右下角のｙ座標
楕円形を描く．
モード．
中心の座標中心の座標横直径縦直径
楕円形を描く．
モード（楕円描画の
）．
以上のことから，前にあげたプログラムの各行は，
縦横
のウインドウを用意する．
ウインドウの地の色を
（赤）にする
塗りの色を
（水色）にする
長方形を
モード（
）で，
（左から
，
左上角が
）で，幅
高さ
上から
の長方形を描く
という意味になる．描かれた長方形の周囲に黒い縁取りがあるのは，線の色を指定しなかっ
の色（黒）で輪郭が描かれたからである．輪郭線を無くすには，
たので，
命令を
命令の前に入れればよい．またあらかじめ
命令を実行しておくと，
図形描画の際に，アンチエイリアスを行ってくれる．
【復習】以下の図形を描いてみる
の白いウインドウ（色指定を
）で四つに分ける
十字線（太さ
でしてみる）を，中心を通る黒い
の青いウインドウに，赤い対角線（太さ
）を引く
の白いウインドウ（色指定を一つの数字でしてみる）の中心に，
の緑の正方形を描く（輪郭線は青色）
の明るい灰色（白から黒への約
分黒い）のウインドウに，各角か
ずつ内側に，一辺
の赤（左上）
・青（右上）
・緑（左下）
・
ら縦横とも
黄色（右下）の正方形を描く（輪郭線は黒色）
日章旗を描く．旗は縦横：，赤い円は直径が縦の
ある．
で，旗の中心に円の中心が
第
章
プログラミングと機械制御
適当な三色串団子を描く（ピンク，白，緑の円が中心を貫かれている．団子同士は
接する円．白の団子が見えるように背景色は選ぶ）
森永製菓のキョロちゃんの眼を描く（度斜めにずれて接する目玉．目線はさらに斜
め上度）．この後も使うので，この画像のプログラムには名前を付けて保存する．
図
復習回答例
最後の二つを正確に描くためには，三角関数の計算が必要である（後述の「デカルト座
では
標と極座標」を見る．比例でも計算できるが）．三角関数はプログラムによる
必須の基礎知識なので，高等学校の数学を思い出して使えるようにしておく．
プログラム練習２（変数・定数・型と
・
の使い分け）
マウスクリックに反応させたり，アニメーショさせたりするためには，
では，
モードでプログラムを書かなければならない．
モードでは，プログラム中に
」と「
」が無ければならない（たとえ中身にプログラムを書かな
「
くても，存在することが必要である）．
モードという）や
に書いたプログラムは，プ
地の部分（今までの書き方．
に処理される．
に書いたプログラムは，決
ログラム実行時に一度だけ
で指定）で永遠に繰り返し処理されることになる．マウスや
められた速度（
などイベント処
キーボードからの入力（イベント）に応えるためには，
理関数の部分にプログラムを書く．
アニメーションなどをプログラムに書くには，時間とともに変わっていく値（座標や数
や色）を入れておくために，変数という仕組みを使う．変数には名前が必要である．変
第
章
プログラミングと機械制御
数の名前は小文字で作る（意味が分かる名前にする．スペース・ハイフンは使えない．数
字で始めない）．
では，変数を使用する前（同時でも良い）に，変数の中に入れるデータの種
類（型）を指定して，次のように変数の宣言をしなければならない．変数は使う前に値を
モードでは，地の部分には
セットするが，宣言の時に一緒に代入しても良い．また
宣言（定数・変数・関数・クラスなどの宣言）だけしか書くことができない．
整数が入る変数
を宣言した
整数が入る変数
を宣言し，
に
を入力した
小数型（正確には
の精度の小数）が入る変数
を宣言した．
一方，画面の縦横の長さや円周率のようにプログラムで何度も使う値の変わらない数
」・「」・「
」などと書かないで，定数として「
」・
値は，
「
」・「」（π）と書いた方が人間に読み易いプログラムとなる．定数は，
「
大文字で適当な名前を付ける．定数をプログラムで使うには，次の例のように，行頭に
」をつける．その後に「」
「
」などその値の種類（型：（整数），
「
（小数のひとつ）など）を書き，
「定数の名前定数の値」と書く．
変数・定数とも型の異なる数値は，変数・定数に入れることができない（
に「」，
に「
」は入れられない）．どうしても型の異なる変数に数値を代入しなければな
らない時は，型変換を行う．型変換は数値や変数の直前に，型変換命令（キャスト演算
（小数の一種）なので，
子）を書くことによって行う．例えば，三角関数の引数の型は
」
（
の結果「」を小数「」とする型変換）のようにする（
「
の周りの小括弧は必要）．整数にしたいときは「
」，
にしたいときは「
」
・
・
など型変換の関数を適用
を直前に同様に付ける．また
しても良い．
と
に属する命令は，中括弧で囲んだ部分に書く．また中括弧に囲まれた
キー」を叩いて字下げして行頭をそろえる．この字下げの
部分は，見やすいように「
ことをインデントという．
に書いたプログラムは，繰り返しの際に前にどうだったかは考えずに，に書かれ
たとおりに処理されていく．このため，単純に何かが動いていくようなプログラムを書く
際には，次の二つが必ず必要である．
変わっていく動きを記録しておく大域変数を地の文で宣言する
画面をすべて消す処理（
と
で塗りつぶす）．後述の
ように，場合によってはいらないこともある．
を使うときの
第
章
プログラミングと機械制御
たとえば円が上方から下方へと動くプログラムを書くときに，これを忘れると以下のよう
なコードになるが，何が起きるか試してみる．
変化の記録を行う場所をまちがうと
ウインドウの中央から円を描き始める
，
座標を１ずつ増やして，描く場所を下へ移動
動かない．上記例中では，
「
と
」が
に書かれている点がまずい．
が繰り返されるたびにこの命令二つも毎
」しても，次の回の「
」で台無し
回実行されるので，いくら「
と
」のように以前の状態を保存しておく変数は，全ての
である．
「
中括弧の外に書くことが重要である．このような位置に書かれた変数を，大域変数
（グローバル変数）という．大域変数は，プログラム中のすべての位置から変数の中
身を操作できる．これに対して中括弧中で宣言された変数は，ほかの中括弧の中か
らは使うことも中身を変更することもできない（局所変数，ローカル変数という）．
塗りつぶしを怠ると
描く円の位置を覚えておく変数
第
章
プログラミングと機械制御
ウインドウの中央から円を描き始める
座標を１ずつ増やして，下へ移動
画面中央に縦線が描かれる前の画像が消されていないので，円が少しずれた位置
に何度も描かれるからである．
正しいコードは，
描く円の位置を覚えておく大域変数
ウインドウの中央から円を描き始める
背景色と同じ色でウインドウ全体を塗りつぶす
第
章
プログラミングと機械制御
座標を１ずつ増やして，描く場所を下へ移動
なお「
」は，今ある変数の中身にを加えて，変数に戻すという意味（つまり
ということ．
とも書ける）を持つ演算記号である
（「－－」なら１減らすという命令になる）．
このコードでは，円が画面下端から出て行ってしまう．これを永遠に動き続けるアニメー
ションにするには，ウインドウ下端で方向を変えて跳ね返るようにする必要がある．当然
上端でも突き抜けるといけないので，上端でも方向を変える必要がある．このように，何
か特別なとき（条件）にだけ今までとは異なる処理をさせたいときには，次に説明する条
件文を使う．
プログラム練習３（文と条件判断）
の条件文には，文と
文と三項演算子がある．授業では授業回数の都
合からのみを使う．シチュエーションによっては，残りも使えるとプログラムがもっと
書きやすくなるので，必要に応じて自分で勉強しておく．
文は，条件が成り立つときだけ直後の中括弧内を実行する．複数の条件がある場合に
を使って下のように書くことができる．
は，と
（条件１）｛
別の条件２
←「条件１」が成り立つとき中括弧内を実行
←「条件２」が成り立つとき実行（省略・増が可能）
←上記の全てが成り立たなかった時実行（省略可能）
判断したい条件によっては，
「
」や「
」は省略・追加が可能である（一個でも良
がたくさん続いてもよい）．
いし，
「」の他に，
「≦」
「≧に相当する「」
「条件」の部分では，数値を比べるために，
「」
「≠」の代わりに「」が使える．注意しなければならないのは，等しいことを
「」や，
「
」を使うことである．また条件の否定を行うには「」を条
示すには「」ではなく，
件の前に付ける．
由来の事情があるので，
まちがいを冒しやすい条件判断に文字列の比較がある．
の文字（文字列）比較は「
」ではできないと思っておく（詳しくは自分で
調べる）．
第
章
プログラミングと機械制御
また条件は，小中学校の「集合」で習ったように「（∩：かつ，
）」
「｜
｜
（∪：または，
）」「（：ではない，）」を使って，複数の条件を組み合わせることができる．例え
」が「１からのとき」という条件は「
」と
ば「
」が「１からではないとき」は，
（
書く．
「
となる（ド・モルガンの定理を使って，
「
｜
｜
」と書き換え
ても同じ意味になる）．
「集合」の考え方は，条件判断に不可欠である．
「ド・モルガンの定
理」まで，集合を必ず復習しておく（条件の書き替えに不可欠）．
壁で円が跳ね返るようにするためには，上下左右の四つの壁に円の端が重なったら，移
動方向を今までと逆にしてやればよい．上下端では軸方向の移動を逆にし，左右端では
軸方向を逆にする．このためには，移動量に「」をかけてやればよい．
ずつである場合以外では，得られた値の判断を「等
今回の例のように移動量が
しいか？」で行ってはならない．移動量が使っている数値の最小刻み以外の場合，計算し
た円の位置が狙った値（）になることが保証できないからである（つまり狙った値を跨
」
いでしまうことがある）．確実に処理をおこなうためには，等しいかどうか「
」や「
」で判断すべきである．
ではなく，通過したか「
また反射の際に起きるまたぎ越しを考慮し，反射後の位置を正しい位置に指定し直して
おくことが必要である．これを怠るとまたぎ越した後，移動方向を変えてもまだ反射の条
件が成り立つ位置に円が存在し，もう一度正しくない方向へ移動方向が変更され，さらに
正しい方向に反射されと反射するべき場所で，引っかかったような振動を繰り返すこと
になる．
移動量の場合，上下の壁で跳ね返るプログラム例（位置修正手抜き版）は，次のよう
になる．
描く円の位置を覚えておく変数
移動速度を変数にする（＋－と値が変わるから変数にする）
ウインドウの中央から円を描き始める
第
章
プログラミングと機械制御
背景色と同じ色でウインドウ全体を塗りつぶす
壁に当たったか調べる
符号をひっくり返して，移動方向を逆にする
円を描く
次の回の円の
座標を作る
座標を
なお
ずつ増やして移動
は，
は，
の省略した書き方
上のコードで移動量がより大きい場合，文の中は，反射後の正しい位置へ円を動か
す命令を書き足した次のようなものになる．
符号をひっくり返して，移動方向を逆にする
上の壁では，
の壁ぎりぎりに
下の壁では，
の壁ぎりぎりに移動
【復習】
」を
・左右の壁での反射を考慮に入れたプログラムに直してみる．なお円の速度「
適当に変化するように書くことを忘れない．
・，とも移動速度をにしたプログラムを書いてみる（手抜きでない突き抜け対策が
必要）．
第
章
プログラミングと機械制御
プログラム練習４（静止画像と座標変換）
すでに描かれて画像ファイルに保存されているデータを
ウインドウに表示する
クラスを使う．
クラスでは，
や
，
，
などの
には，
関係の命令を次にあげておく．
ファイル形式を扱える．授業で使う
画像ファイルの名前
：画像を読み込んで，
オブジェクトに入れる．
オブジェクト表示する右上隅の座標表示する右上隅の座標
：指定した
内の画像データを，指定した位置に表示する
画像を描く位置を系統立って変更するには，以下の座標変換の命令を使う．
水平距離垂直距離
：画像描く原点座標を平行移動させる（画像の移動でないことに注意）
角度
：画像を描く座標系を指定された角度だけ右に回転させる
（画像の回転ではないことに注意）
型の変数
ソースファイル名
ソースから取り出す左上座標ソースから取り出す左上座標
ソースから取り出す画像の幅ソースから取り出す画像の高さ
コピー先の右上の座標コピー先の右上の座標
コピー先の範囲幅コピー先の範囲高さ
図
使う手順は図
のように，
の使い方
第
章
プログラミングと機械制御
というクラス名で，
というインスタンスを作る（
命令を使って画像を
回転・平行移動をさせたいときは，
しない）．
に読み込む．
と
を使う．
命令で画像を表示する．
図
画面内の斜線に注意する．プログラムは
と，引数だけを見る
ウインドウ左上隅から少し離れたところから水平な線を引く命令のよう
と，一見
と
に見える．しかしこの例では，座標系（軸・軸の方向と傾き）が
で変えられているので，中央付近から斜めに線が引かれることになる．一旦座標系を変更
したら，次に座標系を指定し直すまで，変更した座標系を使って画像を描くことになる．
する）命令はない．もしあとで座標系を元
座標系の変更をなかったことにする（
命令をつかって，座
に戻したと考えているならば，座標系を変更する前に
に記憶させておく．記憶させておいた座標系は，
命令で呼
標系を
び出せる．
【復習】
ギター奏者の画像（
：縦横
）を
のように上下左右につ描くプログラムを書く．
図
ギター奏者を，下図
度ずつ回転させて，下図
回答例
の絵のように頭が向かい合う形に並べてみる．
プログラム例の斜め線が水平に引けるように，
てプログラムを直してみる．
，
を使っ
プログラム練習５（配列・繰り返し）
プログラムにおいては，同じ操作を何度も繰り返すことがよくある．これを効率よく行
うために，プログラミング言語には，次の２つの仕組みが備わっている．
第
章
プログラミングと機械制御
図
回答例
配列：同じ種類のオブジェクトを入れる変数の集まり（一連の整数とか，一連の
とか，幾つかの
とか，複数の画像とか…）．配列では，配列を示す名前に順番
などとなる）をつけて，個々
を示す番号（数字をカギ括弧で囲む．つまり
の要素（変数）を指定する．配列の番号は「」から始まるので注意が必要である．
繰り返し文：ある条件が成り立つ間，特定範囲のプログラムのブロックを繰り返し
文（文）がある．
実行するようにする制御命令．文と
配列とは，図
のように，一組になった変数のことである．配列では全体の名前（配
図
配列
第
章
プログラミングと機械制御
列名．例では「」）と番号（添字）を使って，配列内のどの要素の中身でも操作できる．
このおかげで，配列は配列全体をまとめて操作（配列の中身を配列にコピーなど）し
たり，配列要素を順繰りに操作（偶数番目の全ての要素を２で割るなど）することが容易
にできる．一方，変数には順番・組みという概念がないので，順繰りに一連の変数の中身
（例では，
を操作する簡単な方法がない．配列の要素数は，その配列のメンバ変数
）で調べることができる．配列は，添え字（で囲んだ数字）を複数に増やすこ
図
一次元と二次元の配列
とができる．添え字が一つの配列を一次元配列，添え字が二つの配列を二次元配列と呼ぶ
（もっと増やすこともできる）．一次元と二次元の配列のイメージと添え字の関係は，図
のようになる．
文を使う時は，
配列の操作には，繰り返し文を使うことが多い．
繰り返しを実行し続ける条件
の変化させ方
という形式でプログラムを書くことになる．普通
は整数（たとえば
）にして
を順に増やし（たとえば，
）して，繰り返し
おき，ループ繰り返すたびに
「
」から始めて「
」か
続ける条件が成り立つ間（たとえば回繰り返しなら，
」まで）繰り返させる．
は減らしてもよいし，整数でなくてもよいので，
「
わかりやすく書く．
の
以上の二つを組み合わせると，配列の中身を順に操作するためのコードは，図
ようになる．二次元の配列をすべて処理するには，一行分の繰り返しと，行数分の繰り返
ループを書くことになる．
しが必要なので，二重に重なった
ループを使って入力してもよいが，最初から入れるもの
配列に何かを入れるには，
がわかっている場合は，以下のように配列を宣言する際に，各要素の中身をコンマで区切
りながら中括弧の中に書いて「＝」で代入してしまう．このとき数字はコンマで区切るだ
けでよいが，文字列はダブルクオート「」で囲む必要がある．
配列の初期化
第
章
プログラミングと機械制御
図
配列の扱い方
第
章
プログラミングと機械制御
一次元　二次元
の場合
二次元配列の場合，添え字と並び方に注意！ループ処理で，第一添え字をＸ方向（行）
として使いたくなるが，それをやると例の左のように妙な並びで初期化をしなければなら
なくなる．行と列の添え字と要素の並び方向が，直感と逆になっていることに注意（右に
ある添え字ほど内側の中括弧になる．あるいはループの外側ほど左の添え字になる）．
のように
配列を使う際に，添え字の指定によく使う考え方がある．一つ目は，図
整数の配列から取り出した数字を別の配列の添え字に使うというものである．もう一つは，
図
配列要素の間接的な指定方法
図
のように一次元配列をあたかも二次元配列であるかのように扱う方法であるこの
場合すべての要素にアクセスするには，次のようなコードを書く．
結果，
が
のときに
がの
がのときに
が１の
が
の
第
章
プログラミングと機械制御
図
がの
がのときに
がの
が出力される．
一次元配列要素の二次元配列的な指定方法
が１の
が
の
が１の
が
の
【復習】
の数字画像と穴の画像）から
・十五並べゲームの完成画像を，配布画像（
使って作ってみる（画像を読み込んで，文を使って数字順に並べてみる）．
文を
プログラム練習６（マウスによるイベント駆動）
ユーザによる操作とプログラムの間をつなぐには，マウスやキーボードなどからの信号
には，この目的のために用意され
（イベント）を捕らえるプログラムを書く．
た関数があるのでこれを利用する．
」関数（マ
マウスボタンをクリックした位置が知りたい場合は，「
ウスボタンを放したときに実行される）の中身を書いてやればよい．マウスボタンを押し
」もあるが，操作感が通常のソフトと同じにな
たときに実行される関数「
」を使う．
るように，普通は「
があらかじめ用意した変数「
」と「
」
マウスカーソルの座標は，
」関数の中でこれらを取り出すと，マウスボ
に常時取り込まれている．
「
タンを放した瞬間のウインドウ中のマウスカーソルの位置座標がわかる．マウスが動くと
」と「
」に格納されている値が変わってしまうので，取り出した値はす
「
ぐに使うか，別の変数にコピーしておく．
や
は，イベント処理を行う関数であるが
では入力関数の仲間に分類されている．この仲間には他にキーボード入力を調べる命令や，
を調べてみる．
日時を調べる命令がある．興味があれば
【復習】
第
章
プログラミングと機械制御
図
マウス位置の利用の仕方
マウスでウインドウをクリックする度に，ピンクと黄色に色を交代させながら，ク
で描く．クリックイ
リックした場所に円を描くプログラムを作る（注：円は
ベント処理部に直接書かない．つまり色（または色のフラグ）は大域変数）．
マウスでクリックしたところに，画像を表示するプログラムを作る．
プログラム練習７（マウスによるイベント駆動．
「
並べゲーム」を動かす）
マウスカーソル座標は，ウインドウ画面をピクセル単位測った水平方向と垂直方向（下
向きに数字が大きくなる）の距離である．このままでは，ウインドウ内に表示された特定
の画像（たとえば，数字の３の部分）をクリックしても，コンピューターからは座標と画
像の関係がわからない．表示されている画像と画面上の座標を関連づけることは，人間が
プログラムしなければならない．並べゲームの場合，マウスでクリックしたのがどの数
のように，マウスクリックの座標を表す式を行
字パネルかがわかればよいので，図
と列について解けばよい．
の整数の割り算では，答えも整数になる（小数は切り捨
都合のよいことに
てられる）ので，各マウス座標から余白を引いた残りを数字パネルの大きさで割れば，何
列目（または何行目）かが求まる．また一列（１行目）にあるマウスの位置を計算すると
「」が得られ，配列の添え字と相性がよい．
パネルの列と行に読み替えたマウスの位置がわかれば，条件式にそれぞれの位置にある
画像を操作するプログラムを書けば，並べゲームは動くようになる．
ゲームの数字パネルを動かすパターンは，図
のように簡単である．がクリッ
クされた場合，四方向を調べて（端の時は端側は調べない），穴のあいているマスがあれ
ば，クリックした数字パネルと交換する．
に読み込み，
型の配列「
」に
数字パネルの画像を一枚ずつ
のどの要素に穴
読み込んだとする．直接，画像を入れ替えてしまうと，配列
第
章
プログラミングと機械制御
図
十五並べの駒の動き
の描かれた画像があるか，コンピューターには分からなくなってしまう（画像の比較は手
間がかかる上，このプログラムでは意味がない）．これを解決するにはいくつかの方法が
の方法を使う．画像を格納して
あるが，ここでは配列・・の復習のために，図
」と，
の添え字を指定する数字を格納してある整数の
いる配列「
」を使うことにする．
配列「
には，先頭から順に「１」
「２」
「３」「１４」
「１５」
「穴」の画像を入れ
には，ウインドウ画面右上から順に横へ表示されている数字の画像
ておく．
の添え字の数字を入れる．つまり画面の上の特定の位置にどの
の入っている
のようになる．
画像を表示するかは，図
のようにすればよい．並べゲー
一次元配列と二次元配列を関連づける方法は図
ムの場合行列はともに４つなので，画面上の数字パネルの位置（）から，一次元配列
の要素の位置は，
「ｊ×４＋ｉ」で求まる．ゲームの進行は，
の要素を交換することによって行える．
のクリックされたパネル（位置が）の下を調べる場合では，
，四個添
例えば図
）では，下の画像は調べら
え字が進んだ場所を調べればよい．ただし一番下の行（
れない．従って，下を調べて穴（添え字が）だったら，穴を示す数字とその位置の数字
を入れ替えるコードは，
クリックされた位置の数字を一時保管
クリックしたところに穴を示す数字を入れる
保管しておいた数字を元穴に入れる
となる．いきなり「」と書いてあるが，これでは後々意味がわからなくなるので，ここ
は定数にしておくとよい．
【復習】
第
章
プログラミングと機械制御
図
画像を添え字の配列を関連づける
・上下左右の穴に対応したプログラムを完成してみる．・十五並べが完成したかどうか
を調べるには，どうしたらよいか考えてみる．
プログラム練習８（関数）
十五並べゲームのプログラムの長さが長くなってきたため，どこで何をしているかの見
通しが悪くなってきた．ここにさらに勝敗判定や音を鳴らす仕組みを入れると，後からプ
ログラムを見直したり，他人に説明することが困難になることは明白である．
この問題への正しい解決策の一つは，プログラムを機能ごとに独立した部品に分けるこ
とである．この部品の作り方の一つとして，関数化がある．関数は実際に使う所とは別に
中身を書いておき，プログラムで必要になったら関数の名前で呼び出して使う．今まで描
や
は関数の例である．
画に使ってきた
では，関数の定義は
自分で関数の中身を書くことを関数の定義という．
や
などよりも後に書く習慣になっている．
」のように，関数に与えるデータ（引数：例では「
」）
関数には，
「
と，計算結果（返値：例では「１」）がある．関数の定義では，変数を仮引数（関数の中
で使う変数名．型を前に付けておく）として書き，返値の型を定義の頭に書く．例に挙げ
の定義ならば，小数の角度を引数とし小数の長さを返すので，
た
第
章
プログラミングと機械制御
…
となる．
十五並べゲームのプログラムを関数を使って書き換えてみる．このためには，あらため
て十五並べゲームのプログラムがどのように動いているか整理してみるとよい．
整理の例：
十五並べの始まりのパターンを作る
始まりのパターンで画面に数字パネルを描く
ゲームが終わってないか調べる（終わっていたら，別のプログラム（ボーナス画
面表示とか，続ける可動化の質問）へ）
マウスがクリックされたら，その数字パネルが移動可能か調べる
移動可能なら，画像の配列の添え字が入っている配列
える
の要素を置き換
が変化したら，画面に数字パネルを描き直す．
に戻る
この分析から，
開始パターンを作る
繰り返す（
がやってくれるはず）
マウスのクリックを調べる（
でできるはず）
完成したか調べる
画面に数字パネルを描く
パネルが移動可能か調べる
完成後の何かを行う
の部品が別々の仕事をしているように見える．これを踏まえて関数を定義し，使ってみる．
たとえば，
「画面を描く」は画面に書くだけで，計算結果や判断を調べる必要はないので，
）．描くためには，画像と今のパターンを知らないといけないが，こ
返値はいらない（
」と
れはプログラム全体で使うので，引数も特に必要ではない．従って「
いう名前の関数にすると，定義：
第
章
プログラミングと機械制御
また完成したかどうかは，
か
かで答えればよい．このようなときプログラミン
という型を使う．この型の値は，
と
しかない．関数が値を返
グでは
」という命令を使う．従って，完成かどうかを調べる関
す場合，プログラム中で「
」は，
の中身が完成したものと同じになっていればよい
数「
に納められているとすると，
ので，完成品のパターンが
違っているところがあったら未完成
全部一致したら完成
などと書く．
【復習】
・関数を使って十五並べを動く形に仕上げてみる．
プログラム練習９（
とフィルタ画像処理）
には，
ウインドウの画素（
）や
の画素を直接操作する
機能がある．自前のプログラムで画面の全画素を操作するには，画面全体にわたって画素
）
に入っている色の情報を一つずつ取りだし書き替えることになる．このために画素（
）を使う．これを使うと画像に様々なフィルターエフェクトをかけること
の配列（
にはあるので，必要なら自分で調べて
ができる（できあいのフィルター命令も
みる）．
のように
では，
命令を実行すると，画像が左上から右
図
ウインドウ画像
下に向かって一画素ずつに分解されて決まった配列に入れられる．
を実行すると画素が
に格納される．
の場合，オブジェ
では，
とする）に「
」を付けて実行すると，その
クトの名前（仮に
の画像が
に格納される．
第
章
プログラミングと機械制御
図
配列を使ったピクセル処理
は配列なので，要素数は
として知ることができる．しかし
は画像処理ではあまり使わない．なぜなら普通は，画像の幅・高さは分かって
いるので，これを使ったほうが人間に分かりやすく，色々な操作をプログラムしやすいか
らである．
の全画素を処理するには，文を使う．流れとしては，
画面の一行目を横方向に一列処理する（例では，
素分）
次の行を処理する（
＋（行数×
）から
から
の十個の画
＋（行数×
））
行数を増やして，
「」を繰り返す
最後の行を処理し終えたら，表示画像を更新（
となる．
この手順を使うと，図
と
きる．
「
のように画像全体を時間とともに暗くするプログラムがで
があるが，後者は
の画素の配列」
画像を読み込む
画像サイズの
変化する速さを
）し，終わる
ウインドウを作る
で決める
ウインドウと画像の画素配列を作る．
第
章
プログラミングと機械制御
図
配列を使ったピクセル処理例
第
章
プログラミングと機械制御
画像の
から，一つずつ画素の色を取り出す
取り出した色の
の各数値に
作った色を，元の画像と
画像を確定する（
をかけて，次の画像用の
の色を作る
ウインドウの画素配列に書き込む
命令を実行する）
となる．このうち，５からを
文による繰り返しのブロック（ループ）内に書けば
よい．
は無条件に繰り返されるので，
ウインドウに描いたものと同じ画像を元
型の
）にも書いておかないと変化が進まないので注
の画像（この例では，
意する．
【復習】
画像の色が，三色分解の「緑版」だけになるように，上のプログラムを改造してみる
画像の上に，古い映像にあるような黒い縦線がだんだん増えるプログラムを書いて
命令を使って乱数を使って決めるとす
みる．どこに黒線を引くかは，次の
る．
（と
の間でランダムな小数（
）を発生させ，に型変換する）
二枚の画像（
と
）から，二重露光写真を作る．透過度％で枚
目の画像を描くというのでは，うまくいかない（理由を考えてみる）．各画像の画素
に書いても
に
の値を取りだして（変化しないプログラムなので，
書いても同じ結果が得られる）．
荒い画像が，だんだんはっきり見えてくるプログラムを作る．元の画像から
な座標で画素を取りだし，
ウインドウに同色の円を描く．これを一度に数百
座標について行う．適当な時間間隔（繰り返し回数）で円の直径をだんだんと小さ
くして，この動作を繰り返す（ランダムな点を打つ数，初めの円の大きさ，円を小
さくする速度は，実際に実行して調整する）．
次ページに最後の復習問題の解答例（やる前に見ない）
第
章
プログラミングと機械制御
図
点描の解像度を変える
画像の横サイズ
画像の縦サイ
描画円の直径初期値
描画円の直径を小さくするタイミング
サイクルで打つ点の数
円の直径を小さくする比率
第
章
プログラミングと機械制御
回繰り返したら
円の直径を縮める
点が小さくなりすぎないように
プログラム練習１０（文字を表示．
の
でビットマップフォントを作る）
ここでは，
のウインドウに文字を描く方法について学ぶ．文字を表示するに
は，２つの方法がある．
画像として文字列を用意しておき，
や
命令でウインドウに貼り付ける．
・書体）でも使えることが利点であるが，プログラム中で文字
どのような文字（
列を自由に変更することは著しく困難である．
の
である「
」を使ってビットマップフォントを作り，
中の文字列処理と連繋させる．どのような文字列でもプログラム中で作れる
」でビットマップ化できないフォントや
ことが利点であるが，
「
で扱えないコード体系はお手上げである（日本語は事実上不可能）
以下，後者の方法について手順を示す．まず
作るには，
で使うビットマップフォントを
ビットマップフォントを出力する場所が必要なので，
をつけて保存する．
図
のように，
択する．
のメニュー「
でスケッチに名前
」をクリックし，
「
」を選
表れたウインドウで，ビットマップ化したいフォントを選択し，フォントのサイズ
横のボタンでオプション（追加の文字群）を設定する．
や
「
」ボタンをクリックし，待つ．
スケッチのあるフォルダに「
」フォルダが作成され，その中に
子のついたビットマップフォントのフォルダができる．
作成したフォントは以下のようにして使う．
という拡張
第
章
プログラミングと機械制御
図
用ビットマップフォントの作成
型のフォントを入れる変数（インスタンス）を用意する．たとえば「
」
で，上の変数にビットマップフォントを格納する．
描画したいところで，描画の手順を実行する．
フォント色を指定する
描画に使うフォントを指定する
描画のフォントサイズを指定する
文字列と位置を引数に，文字を描く命令
角が基準なので注意する
を実行する．文字の位置は左下
←直接文字列を指定する
←文字列変数を指定する
←数字を文字列に変換して指定する
数字
描画する文字列の幅は，
を使って調べることができる．つまり文字列「
」を画面中央に描きたいときは，以下のようにする．
－
…
第
章
プログラミングと機械制御
少し頭を使うプログラム
プログラム練習１１（横スクロール・縦スクロール）
画素配列（
）の操作を応用すると画面スクロールができる．スクロールプログ
のように
が背景からはみ出す場合と，はみ出さない場合
ラムの基本は，図
に分けて考えるところにある．まずは，はみ出しが始まる条件を確定し，これを判断文に
反映させる．注意点は配列の添え字がから始まる点である．背景やウインドウのサイズ
から１を引いた数が右端の添え字になることを忘れてはいけない．
左端位置（
）が「」から，
「
」
横スクロールの場合，背景画像上の
が背
まで一ずつ増加し続けると考える．連続したスクロールを継続させるためには，
景の範囲を超え多場合に自動的にリセットされるように背景画像の横幅で除余を取るとよ
は，
％
としてから使用するようにする．
い．つまり，
図
横スクロール処理
の
の位置の画素には，背景の座標「
」の位置の画素が入る．
の
には，背景の「
」の画素が，
の
には，背景の「
」の画素が．
．
．
．
．
の
には，背景の「
」の画素が入る．
右端は，
「
」なので，背景の座標
第
章
プログラミングと機械制御
「
」の画素が入る．
のように行ごとに考えればよいので，ずらしはじめを背景画像
縦スクロールは図
下端の外（実際には背景画像上端）からとると処理の考え方が簡単に理解できる．
図
縦スクロール処理
とする．
は常に
の
プログラムの開始時点では，
」となり，ウインドウには背景画像の上端か
除余をとって使うので，実際には「
らウインドウの高さ分を表示することになる．
の値を一ずつ減じて，
になるまで
ここから
は「」まで減じ，
「」になった
は，はみ出た分を背景上端から取り出して表示する．
」にセットしなおす．
ら「
の範囲のとり方が違っている点である．
前述の横スクロールと比べて注意すべきは，
のとり方を同じ（「」から「
」）ようにする
無理に横スクロールと
と，かえって場合分けが面倒になる．
を使わずに，
処理で行うこともできる．つまり，はみ出し
いずれの例も
処理
ていないときは，スクロール画像から左上隅を指定してゲームウインドウへの
処理と，はみ出し部分に
をする．はみ出しが始まったら，はみ出していない部分の
する処理を別々に行う．
相当する範囲をスクロール画像の反対側から
に背景画像が入っている．
は背景画像
次のコード例では，
は
ごとに画像をずらす大きさ，
は背景画像
の左上隅，
はウインドウの横幅，
はウインドウの高さ（背景画像の高さ
の横幅，
でもある）．
コード例，
画像から取り出す左上隅座標をずらす
第
章
プログラミングと機械制御
＞
－
＞
はみ出している
はみ出しきった時の処理
画像の取り出し位置を左端に戻す
一部はみ出している時の処理
はみ出していない部分を部分コピー
－
－
；
はみ出した範囲と同じ大きさを，元画像の左端から部分コピー
－
－
－
－
－
－
－
；
はみ出しがまったくないときの処理
プログラム練習１２（デカルト座標と極座標系）
復習問題のキョロちゃんの目を何も考えずに単純にプログラムすると以下のようになる
（三角関数を
に解かせているところは，復習問題の答えとは違う．前記では三
角関数命令を教えていなかったので，復習問題に答えるためには，手計算で三角関数を解
いた値を書いたはずである）．
第
章
プログラミングと機械制御
図
三角関数の使い方（極座標とデカルト座標）
では，三角関数は小文字で数学記号と同じ書き方をする．ただし角度はラジ
は円周率を示す
アンである（数学とは異なり，角度は右回りが正）．大文字で書いた
のようにして計算し指定する．
（
）
定数である．黒目・白眼の位置は，次の図
）は描くべき円の中心座標．
は回転の基準位置座標，
（
例のままでは描画する位置が全て決定済みの値なので，瞳でものを追跡するようなアニ
メーションをさせることはできない．プログラムの適切な部分を変数に置き換え，適当な
位置で変数を初期化する必要がある．
例えば上記プログラムの目玉の黒眼の色を自動で変えてみる．二度目に出てくる（）
の引数が決
の引数を変えれば良いことが分かると思うが，自動で変えるためには，
まった値では，まずいことも自明であろう．色々変わる値をプログラムの中で使うために
と
の働きと変数のスコープ・初期化について理解する必要がある．
は，
さて，黒眼の色を白まで連続で変えるプログラムは次のようになる．
←黒眼の色を入れる大域変数
←はじめに一度しか実行する必要がない命令
第
章
プログラミングと機械制御
←
の部分を一秒間に何回実行するか指定
←何度も繰り返し続ける命令
←前回の絵が邪魔にならないように，背景色で
←四角を描いて前の絵を消す命令
↓ここから白目を描く
↓ここから黒目を描く
←黒眼の色を変数で指定
←黒眼の色をだんだん白色（数字が大きい）
このままでは，数字が大きくなりすぎるが
今は気にしない．
ここに「
」が出てきている．
は，
｛｝を一秒間に何
の処理能力，表現上の必要に
回繰り返すかという命令である．プログラムの複雑さや
応じて，適当に引数の値を変える．
」が全ての中括弧の外に書かれていることは，重
上記の中で，
「
要である．このような位置に書かれた変数を，大域変数（グローバル変数）といいプログ
ラム中のすべての位置から，変数の中身を操作できる．これに対して中括弧中で宣言され
た変数は，ほかの中括弧の中からは使うことも中身を変更することもできない（局所変数，
ローカル変数）．
は
でしか使われないが，
の中括弧の内部にこ
今回の例では
実行の度に
の値が「」になるので，いつ
の宣言を書いてしまうと，
までたっても黒眼のままということになる．
第
章
プログラミングと機械制御
このプログラムを実行すると，黒眼がだんだん白くなって，最後は白いままになる．こ
れをもう一度黒眼に戻すには，白眼になった後ではそれまでになかった黒目に戻すという
操作をプログラムに行わせなければならない．
文をつかって，白眼になったらだんだんと黒眼に戻るようにするには，
大域変数を一つ「
「
」追加して，
」の部分を以下のように書き換える．
←白眼（
）になったら
←「」を後で足すために用意
（つまり１ずつ減算）
←黒眼（）になったら
←「」を後で足すために用意
↓毎回，次の
を作る
【復習】
のウインドウの中で，半径
赤い小さな円の動きを作る．
の円軌道を運動する直径
の
マウスカーソルを目線で追い続けるプログラムを書く．瞳の位置を求める理屈は図
の通りである．マウスを追い続けるので，
の中に必要な部分を
の中に書いても同じであるが，とりあえず
書く（この例では
に書く）．
できたプログラムを定数・変数を使って整理し読みやすくしてみる．ウインドウの
サイズ・白眼と黒眼の直径（あるいは半径）を定数に置き換える．左右の白眼・黒
眼の中心を変数（計算式を変数に代入する）で表現する．
マウスではなく，画面上を円運動（軌道の中心は
のウインドウの中央，軌
）する直径
の赤い円を見続けるようにしてみる（
道半径
ではなく，
にプログラムを書くことになる）．
・
の代わりに…
マウスを追いかける目線の解答例（自分でやる前に読まない）
第
章
プログラミングと機械制御
図
目線の数学
第
章
プログラミングと機械制御
瞳の位置を計算する
実際に描く
プログラム練習１３（自然な動作．加速度と力）
物体を移動させるプログラムを組むときにリアリティーを与えたいと考えるならば，中
学校・高等学校で習った物理学を活用する．
物体の落下垂直方向の位置
を計算する場合は，＝直前の
＋加速度×時間
外部からの力（含む反作用）で移動空間の次元数ごとに上と同じ形の式で計算する．た
第
章
プログラミングと機械制御
だし加わった力の大きさ
成分÷物体の質量）
を各軸に分けて計算する（
．軸の加速度＝
の
軸
これらがどのような場面で必要かというと，たとえばボールのバウンドしている様子を
プログラムする場合，上記の落下の例を使ってボールの高さを常に計算する．
の場合，時間は，
モードで
が繰り返される時間を基準に，何回繰り返
したかを使う．加速度に関しては，適当に数値を変えて自然な感じになる値を使ってよい．
また，風に舞う木の葉や雪，蛍の乱舞を描画する場合には，外部からの力（含む反作用）
で移動の例を使う．乱数を使って加速度を変えて移動速度を変更し，左右上下にランダム
に移動させる．このとき安易に速度をランダムに変え，
次の位置＝直前の位置＋ランダムな数（正負の数）×時間
などとしてはいけない．これでは慣性が存在しない世界を作ったことになり，カクカク
とジャンプするような動作（ブラウン運動？）になってしまう．正しくは次のように加速
度（力と質量に関係する値）を考慮する．
次の速度＝直前の速度＋（加速度＋ランダムな数）
次の位置＝直前の位置＋次の速度×時間
の繰り返し回数
実際のプログラムでは，時間を実際にかけるのではなく，
を時間経過の代わりに使ってに計算する（積は和の繰り返しだから）ので，
次の速度＝直前の速度＋（加速度＋ランダムな数）
次の位置＝直前の位置＋次の速度
の式になる．
「加速度」と「ランダムな数」の比率は目的に合わせて試行錯誤で決める．
加速度が相対的に大きいと動きが変化しにくいものになり，小さいとよく動きを変えるも
のになる．
関数を以下の例のように使う．この関数は，作り出したい乱
乱数の作り方は，
型）を返す．気をつけなければ
数の範囲を引数に与えておくと，ランダムな小数（
いけない点は，
「以上，未満」の範囲になる点である．
例：
からの間でランダムな小数を作る（は含まない）
から
の間でランダムな小数を作る（
は含まない）
からの間でランダムな小数を作る（は含まない）
整数の乱数がほしいときは，得られた値を
で整数にする．なお
の乱数
は設定しなくてい
は毎回異なる結果を返すようになっているので，いわゆる乱数の
よい．
【練習】
以前の「プログラム練習」で作ったボールの動きは，現実的ではない．上下方向の
動きには重力加速度のため下向きにはだんだん早く，上向きではだんだん遅くなる
べきである．そのように書き換えてみる．
第
章
プログラミングと機械制御
またボールのバウンドは減衰するはずである．運動には摩擦を組み込む必要がある．
下面でバウンドするたびに，少しずつ跳ね返りが小さくなるようにプログラムを書
き換えてみる．
画面上をふらふらと移動する蛍プログラムを書いてみる（ブラウン運動にならない
ように書く）．
プログラム練習１４（異なる動作タイミングの管理，簡易キャラクターアニメーション）
が
回回る度に
ゲーム画面などで，速度の異なるキャラを動かしたり，
敵キャラを出すなど，異なるタイミングでプログラム中にイベントを発生させたい時には，
自前のカウンター（ストップウォッチのようなもの）を作る．
の実行回数を数えるようにする．カウンターの数値が，特定
カウンターは
の値（イベントのタイミング）で割り切れる度に，それぞれのタイミングで必要な処理を
行うようにすれば，上記の目的は達成できる．割り算のあまりを調べるには，演算子「％」
を使う．カウンターは普通整数（）を用いる．無限に大きくならないように，必要なタ
イミングの公倍数（最小でなくても良い）まできたら，に戻すようにする（こうしない
の最大値を超えた場合にプログラムが止まってしまう）．
と
％
％
％
の回に一回すること
回に一回すること
回に一回すること
が大きくなりすぎない工夫
例えば，モグラ穴からモグラが頭を出しては引っ込めるというキャラアニメーションを
表示させるには，
背景画像を描く
フレームの異なる
画像を順に表示する
第
章
プログラミングと機械制御
を繰り返せばよい．具体的なコードは，キャラの画像番号を大域変数に保存しておき，こ
れを順次増やしながら，ウィンドウに描けばよい．
背景画像
画像あるアニメーション
アニメ用の画像の入る配列
表示中の画像ナンバー
秒８コマ
コマ目の画像からスタート
背景画像の画像読み込み
アニメ用モグラ画像読み込み
次の表示用に画像の番号を進める
画像の数を超えたらはじめからやり直し
第
章
プログラミングと機械制御
プログラム練習１５（衝突判定～三角関数とマップ）
ゲームなどで，２つのキャラクター（自機と敵機や，ミサイル
）が衝突しているか
のように物体間の距離と２つの物体サイズ
どうかをおおざっぱに判断するには，図
を比較することによって行うことが最も簡単である．円や球では，この判定は中心間の距
離と二つの半径合計との比較となるので計算が簡単である．実際のプログラムでは，各図
形中心座標の座標の差の二乗と座標の差の二乗を加えたものと，あらかじめ計算して
おいた衝突距離の二乗とを比べる（ピタゴラスの定理）それ以外の形状では，円に近似し
図
距離による衝突判定の考え方
て考えるとよい．判定が多少甘くなるが，ゲームに大きな影響がなければ気にしない．ど
うしても気になるときは，キャラの輪郭上でピクセルごとに色を調べればよい．
迷路やドライブゲームでの道路をゲームに持ち込むには，二つの考え方がある．
より一般的な方法としては，通行可能な部分を特定の色で塗っておき，キャラクターが
移動した際にキャラクター外周直下にある背景の色を調べるという方法がある．計算量を
減らすためには，キャラクター外周の上下左右とその間の方向について調べる．計算量
が次に述べる方法に比べて多くなるが，キャラクタの移動量と方向に制限を加える必要が
無いので，キャラクター操作について自由度が高い．
通路の形状が同型タイルを敷き詰めたもので表現できる場合には，マップを使うと計算
が簡単になる．この方法では，画面を同型のタイルが敷き詰められたものと考える．各タ
イルを二次元配列で管理し，通過可能な部分を表す配列要素には「通行可能を示すフラグ」
を格納しておき，キャラクターが通過する際に進入可能かどうかを判定すればよい．この
方法をとる場合キャラクターに自由な方向への移動を許すと，斜め移動の際に通過不可能
な場所の角をなめるように移動してしまう可能性がある．このためたいていは移動方向を
四方向に制限しプログラムを簡素化している．迷路ゲームなどでは，キャラクターの大き
さとタイルの大きさ（迷路の幅）を同じにして，一タイルごとの移動しかできないように
なっていることが多い．この場合には，移動中のキャラクターをアニメーションさせて移
動の自然さを演出する．
第
章
プログラミングと機械制御
プログラム練習１６（時間を決めて実行させる）
プログラム中で，決まった経過時間後に何かを行わせたいときには，単純に
数
を実行した数）を数えればよい．秒フレームで実行中に秒後に何かをさせた
（
になったことを文な
ければ，フレーム数を大域変数として保存しておき，その値が
どで検出すればよい．
関数を使う．
は呼
この方法はあまり見た目がよろしくないので，普通は
び出される度に，プログラム開始時からの時間をミリ秒単位の整数で返してくる．そこで，
特定の時間が経過したら実行するプログラムは，
初めの時間を大域変数（例えば
）に記録する
を適当な間隔で繰り返し実行し，得られた値から
を手に入れる．
を引いた値
得られた値（
）をあらかじめ決めておいた時間と比較し，時間になったらその
とき行うべき命令を実行する．
この方法を使う時には，得られた値の判断を「等しいか？」で行ってはならない．
にかかる時間が一定とは限らないので，
「
」が狙った値（）になる
ことが保証できないからである（つまり狙った値を跨いでしまうことがある）．まえにも
」ではなく，通
述べたが，確実に処理をおこなうためには，等しいかどうか「
」で判断すべきである．
過したか「
プログラム練習１７（クラス）
関数化するとプログラムが整理でき，機能の使い回しが容易になる．これを一歩進めて，
（
：オブジェクト指向プログラミン
クラス化すると，
によって，プログラムの可読性・汎用性をさらに高めることができる．
グ）となる．
例えば関数を使った目玉プログラムで，目玉の瞳の色を指定できるようにし，目玉の大
きさを指定できるようにし，目玉がウインドウ内を移動し続けるようにプログラムを書き
替えようとしたとする．このとき，各瞳の色・目玉の大きさ・各目玉の直前の位置を記録
しておくために，変数を多数（×目玉の数）宣言しなければならなくなる．また目玉を書
く関数の引数も，
「目玉の位置目線の先瞳の色目玉の大きさ…」とどんどん数が増えて
しまう．
第
章
プログラミングと機械制御
さらにマウスクリックに瞳の色や大きさを反応させようとしたりすると，これらの変数
はグローバル変数にしなければならなくなる．多くの変数をグローバル変数にすると，プ
ログラム中で変数を使う場所と変数の宣言が離れたものが増え，読みにくい間違いの起こ
りやすいプログラムになる．また実行コードが，複数の離れた場所に書かれることになり
見通しの悪いプログラムになる．
では，目玉をプログラムが操作するひとかたまりの対象（オブジェクト）
そこで
と考える．そのオブジェクトにだけ関係のある変数（メンバ変数：目玉の例では，瞳の色・
）をオブジェクトに内蔵させ，これら変数を変える専用の関
位置・大きさ・移動速度
数（メソッド，メンバ関数）もオブジェクトに内蔵させる．こうすると，オブジェクトに
関係した変数を一箇所にまとめることができ，オブジェクトの性質に関するグローバル変
数を使う必要がなくなる．また関数を呼び出す側では，オブジェクトの変数について毎回
知る必要がなくなる（初期化だけしておけば，あとは呼び出し側は知らなくて良い）．メ
などを用意し，どっちにどれだけ移動するかは，オブジェクトに
ンバ関数に
任せる（オブジェクト内部で計算させる）ことができるようになる．つまりオブジェクト
して，こっちの目玉は左に移
を使う際に，
「この目玉は右に移動中だから，表示座標を
動中だから…」と文を多用する必要がなくなる．
図
似たものがたくさん
の
では，オブジェクトの設計図であるクラスを定義し，クラス名を変
数のように使って，実際に働くオブジェクト（インスタンス）を宣言する．クラスの定義
」とし，その後にクラス名を書き，その後に中括弧で囲んだ中にクラ
は，出だしを「
スの内容を書く．
のような色の異なる瞳がと目玉全体が動く画像をプログラムするには，例えば
図
」というクラス定義し，その中に目玉を自動で動かすメソッド「
」を用
「
意する．
黒い瞳の目や青い瞳の目の移動を扱うときは，
第
章
プログラミングと機械制御
として，クラス「
」の瞳の色の異なるインスタンス「
」
「
」を宣言
する．
」というのは，新しくインスタンスを作ると言う命令のキーワードである．イン
「
スタンスを作る実際の方法を指定しているのは，クラス名と同じ名前の特別なメンバ関数
」
（コンストラクター）である．コンストラクターは，一つのクラスに引数の種類
「
オブ
や数が異なる複数のものを用意することができる（例では，引数無しと，色を
ジェクトで指定できるものが書いてある）．
各目玉を動かすには，そのために作ったメソッド（メンバ関数）を使う．メソッドを呼
び出すには，インスタンスに「メソッド名」を付けて命令を書く（ドットでつなぐこ
」を使うとすると，
とに注意）．メソッド「
とする．これによって，どの方向に目玉が動くかは，オブジェクトの内部の計算に任せる
ことができる．
移動する目玉のクラス定義例は，下のようになる．
引数なしコンストラクター（変数は初期値．瞳は黒）
引数つきコンストラクター（瞳の色を指定）
目玉の初めの位置を決めるメソッド
第
章
プログラミングと機械制御
目玉の位置を動かすメソッド
軸方向の位置変更
軸方向の運動方向切り替え
軸方向の運動方向切り替え
目線の先の位置を引数に取り，目玉を描くメソッド
目玉の位置を計算する
瞳の位置計算
第
章
プログラミングと機械制御
実際に目玉を描く
白目
瞳
を使う側のプログラムは，下のようになる
←目玉インスタンスの作成
←目玉の位置の初期化
第
章
プログラミングと機械制御
の位置を計算する
目を描く
←黒目玉を動かし
←黒目玉を描く
を描く
【復習】
円軌道を描く小さな円のクラスを作り，これで惑星系モドキを作って見る．中心に
動かない円，周りに大きさの異なるつの惑星，各惑星に衛星を１つずつ付けてみ
る（ケプラーの三法則は無視して良い．あくまでもモドキ）．
に無い機能をつかう（ライブラリと
）
プログラムで音を鳴らしたり，外部の機器を操作したりすることは，
の標準
的な機能ではできない．その目的のために別に作られたプログラム（ライブラリという）
や関数を使う必要がある．
を，自分のプログラムに取り込んでから，ライブラリ中の
手順は，
第
章
プログラミングと機械制御
必要な機能のあるライブラリを見つけて，手に入れる．
そのライブラリの説明をよく読んで，正しい方法でライブラリをインストールする．
フォルダ（
本体のフォルダ内）
大抵は，配布ファイルを展開して
フォルダを作ってその中に置く．
か，自分のプログラムのフォルダに
プログラムの頭の部分（地の部分）で，
に教える（宣言する）．
ことを
命令を使って，ライブラリを使う
ライブラリの説明に従って，クラスのインスタンスを作って（
ら，インスタンスを作らずに）実行する．
なメソッドな
となる．
サウンド
ライブラリを使うことにする．詳しくは
ここでは
ライブラリは，配布時に
の
る．
ルされているので，新たにインストールする必要はない．
で音声を操作するには
クラスを使う．
うには，さらに目的に合わせていくつかの異なるクラス（
など）を使う．
「
クラスで音声を扱
，
，
」は，普通比較的短い音声再生だけに使う．音声は再生命令（
）によって再生され，止める必要はない（止める命令がない）．
「
時停止．
「
を参考にす
フォルダにインストー
」は，再生・停止を行う場合に使う．
」は，
で再生し，
で一
への入力（ライン・マイク）を扱う．
で扱うサンプリング音声のファイルは，
なお，
だけである．
一番簡単な音を出すプログラムは次のようになる（マウスイベントで音声再生を実行さ
せる）
ライブラリを使えるようにする
ライブラリのサウンドエンジン
を用意（宣言）
ライブラリのサンプリングデータ用
用意（宣言）
クラスを
第
章
プログラミングと機械制御
サウンドエンジンを初期化
サンプリングデーターを読み込む（初期化）
２つめの引数は音声出力のための
サイズ
に納めたデーターを再生
後片付け
クラスを使う場合は次のコードのようになる．注意すべき点は，長い音声
だと音声の再生中に，間違えてさらに再生してしまう可能性があるということである．こ
の様なトラブルを回避したい場合は，今再生しているかどうかをまずチェックして，再生
していないときに限り新たに再生するようにプログラムを書く．つまり再生前に
（再生中に
，停止中に
を返すクラスメソッド）を実行し，
が返った時のみ再
生するようにプログラムを書く．
第
章
プログラミングと機械制御
サンプリングデータ用
クラスを用意（宣言）
サンプリングデーターを読み込む
フラグをチェックして，再生か停止を行う
で音の再生に関するメソッドは他にもいろいろあるが，とりあえず次のも
のを使ってプログラムしてみる．
巻き戻しは，
再生位置を調べるには，
途中からの再生は，
ループ再生は，
を実行して返値（スタートからのミリ秒）を得る．
再生場所の時間をミリ秒で，
の代わりに
の型で指定
を使う．
とすると，ｎ回繰り返す．
指定位置を繰り返すには，
のミリ秒とあらかじめ指定しておく．
スターと位置のミリ秒，終了位置
第
章
プログラミングと機械制御
再生音量は，
音量を使って変える（引数は
再生音声の位置は，
が左側，正が右側．
から
左右位置で変える．引数は
から
の小数
の
）．
で，負
【復習】
ウインドウを最初にクリックすると
を再生開始し，再生
中にマウスをクリックすると，２秒以上再生しているときには２秒戻ったところか
ら，それ以外のときはファイルの頭から再生するプログラム
を再生中に，
ウインドウ内でマウスカーソルを左右に動
かすと音源位置（パンポッド）が変わり，マウスカーソルを上下に動かすと音量が
にコードを書き，
，
を使うように
変わるプログラムを書く（
する）．
と
を使って，目の前を左から右に歩く足音のような演出をしてみる（
で…）．
音声入力を行うには，
クラスを使う．ただし
いで使う．使う手順は，再生とほぼ同じである．
ライブラリを
「
は「
」しな
する．
」でサウンドエンジンを初期化する．
「
」で
のインスタンスに入力を割り当てる（このと
か
」を，
き一つ目の引数でモノラル・ステレオの別「
サイズを指定する）
二つ目で
の各メソッドを使って，データを取り出す．
から音の強度を得るには，
「
」する．
型の小数（から１）として得
ではステレオが基本となっているので，実際には「
」
ることができる．
」というように使う．モノラルの場合は
側を使う．
「
音の強さに応じて，円が上下するプログラムを書いてみると下のようになる．
を
を用意
の入力を用意
第
章
プログラミングと機械制御
を監視
のインスタンスを作成．
モノラルで，最小の
サイズ（なるべくリアルタイムで動かすため）
モノラルなので左から強度を得る
強度をウィンドウの高さに割り当てる（最大値をウインドウ縦方向の長さに）
周波数ごとに強さを調べるには，入力をフーリエ変換する必要があるので，
の
の
クラスを使う．
で
する
で入力を受ける
を引数に，決まったサンプルレートで
のインスタンスで「
数で入力の左右を指定できる（
）」を実行し，
で左，
で右，
型のインスタンスを作る
から音を取り込む．引
で両方混ぜて）
第
章
プログラミングと機械制御
から「
取り出す
指定バンド」で，
（周波数のある区切り）ごとに強度を
型の中では，音声データの強度スペクトルが配列に入れられている．
「
」
を使って配列から，配列の位置を指定して強度を取り出すことができる．配列の大きさは
」で調べることができる．
「
入力音声の強度スペクトル（モノラル）を表示するプログラムは次のようになる．
を使うので
の用意
の入力を用意
型を用意
強度表示の拡大率（つまり感度）
入力をステレオで，
サイズ
を初期化
で用意．
のインスタンスを用意する．
引数は
サイズとサンプリングレートを入力にそろえるという意味
音声を左右をまとめてモノラルとし，一回の分析用に
に取り込む．
第
章
プログラミングと機械制御
中のスペクトルの
数を調べ，端から強度を取り出し，
強度に比例した高さに円を描く
【復習】
音の強さが一定値になったら，
いてみる．
ウインドウの背景色を変えるプログラムを書
オーディオについているイコライザ画面のモニタ画面の様なものを作る（横向きで
も良い）．ただし一カ所に丸を表示するのではなく，棒グラフのようにインジケー
ターを大小する．できれば左右の音量を別々に表示できるようにする．
で機械を動かす（
）
授業では，外部の電気回路を
する方法，外部のスイッチを読む方法を解説する．
」が一般的だが，
「テクノキット
インターフェース」を授
この目的には，
「
インターフェー
業では使う．価格が倍ほど違うことと昔から授業で使っている
スが沢山あるからである．
からは直接
ポートや
ユニットを操作する命令はない．モ
無論
用に
で書かれたライブラリ（
広場（
さ
ルフィーの
）
から入手可能）
んの
で使える様に，デベロッパー
があるので，これを改造して使う（テクノキットの
を修正して，再コンパイルしたものを授業では使う）．改造したファイルを含むライブ
フォルダとする．
ラリをインストールする場所は，各スケッチの
を使う手順は，
プログラムの中で
「
」でライブラリを
クラスのオブジェクト（例えば
作る．
する．
なら，
）を
第
章
プログラミングと機械制御
「
」でデバイスを
につなぐ．
出力・入力をメソッドで行う．
使い終わったら，
で「
」を実行する．
「」の実際の命令を出力するときは，
の値
の値
へ出力
へ出力
とする．
入力では，
の変数
の変数
から入力
から入力
となる．
が実際に繋がっているかどうか，正常に動いているかどうかは，必ずしも確かで
はない（つなぎ忘れなどは良くあること）．入出力で何かトラブルがあると命令からエラー
構文を使う．エラーが出たら
で
が返されるので，これらの命令を書くときには
受け対処するようにプログラムを書く．次の出力の例のように関数化して使うと分かりや
すい．
ゲームを作る流れ１（横スクロールゲームの場合）
ここまでに説明したことを使って，単純な横スクロールゲーム作成の流れを追ってみる．
キーボードイベントの取得・背景スクロールのアルゴリズム・速度の異なるキャラアニメー
ションの実現について復習できる．
第
章
プログラミングと機械制御
図
横スクロールゲーム
ゲームを作る流れ
どのようなゲームか，ルール・ゲーム進行などについて大まかな構想を練る．今回
のように，横方向に移動するキャラをキーボードで操作して障害物を
は，図
よけるゲームとする．
どのように画面上にゲームを表現するか，ユーザーインターフェースをどうするか
）．今回は
で三人称視点．キー
考える（，，一人称視点，三人称視点
ボード操作のみでゲームする．
ウインドウサイズ（
×
）を決める
ウインドウ背景画像（両端が繋がったもの．スクロール速度を調整できるよう
×
），キャラアニメーション画
約数の多い大きさを幅に使う．今回は
像，障害物画像，得点用文字・数字画像などを用意する
や効果音を用意する
ルール・ゲーム進行（ライフ，時間，フラグやハイスコアなど）をどう管理するか
考える．
異なる速度の複数アニメーションをどう管理するか？
（アニメーションカウンター）
衝突したかどうかの判定は？中心間距離？
壁の扱いをどうするか？反射させるか・ダメージを与えるか？
操作感をどうするか？慣性系か？非現実か？移動速度制限するか？
生存時間やライフ数計算
プログラムを機能別に分けて，部分ごとにプログラムを作成する．
ウインドウにゲーム背景画面を描く（スクロール画像）
ゲーム画面にキャラをアニメーションさせる
第
章
プログラミングと機械制御
キーボードを読み取る（キーボードイベント処理）
衝突判定
ゲーム終了を実現する
・効果音を鳴らす
難易度・ユーザビリティを調整する
プログラムの整理
・
・
と自前の関数内部と関数外部に何を記述するか決める．大域変
数の名前や各機能の関数名決める．
欄外に
する機能や大域変数を記述する
音声を使うので，
ミニオーディオライブラリを
し，音声用の大域変数を宣言する
を
という名前の
（エンドレスで鳴らす必要があるから）
壁にぶつかった時の音を
ンスタンスにする
という名前の
障害物にぶつかった音を
インスタンスにする
ゲーム終了の
タンスにする
を
クラスのインスタンスにする
クラスのイ
という名前の
クラスの
という名前の
クラスのインス
ゲーム画面サイズを定数で記述する
ゲーム終了判定フラグを大域変数
ゲームの経過時間（秒：
する
として宣言する
）やライフポイントを大域変数として宣言
今回は
画像をアニメーションに使うので，
とその配列を用意す
として宣言する）
る（アニメーション画像数を定数
背景用，文字・得点用画像用
を宣言（
枚の画像からのなるアニメーション用に要素数の
，
）
配列を用意する
のなかに初期化作業を記述する
ウインドウを作る
フレームレートを設定する
背景画像を
に読み込む．画像縦横サイズを変数に格納する．
第
章
プログラミングと機械制御
アニメーション画像を順番に
に格納する．
配列に読み込む．画像縦横サイズを変数
サウンドを初期化し，サウンドファイルを読み込む．
をループ再生する
に，実行順に注意して繰り返し処理を記述する
ゲーム終了フラグを調べ，
「終わってなかったらゲームを更新，そうでなかった
らゲームを停止し終了画面を表示する」と書く．
ゲーム更新部分には，
スクロール背景を描く（今回は関数
として書く）
経過時間・ライフ数など文字情報を描く
キャラを描く（関数
として，見通しをよくする）
キー操作処理を行う
衝突判定を行う
ゲーム終了条件を調べる．もし終わっていたらゲーム終了フラグを立てる
ゲーム終了部分では，
ゲーム進行を止める操作（
を止める．終了効果音を流す）を行う
終了画面や終了メッセージを描く
に終了操作を書く（サウンド系の消去）
コーディング
キーボードイベントを扱うには，以下のカーソルキーを扱ったコード例のように決まり
文句がある．
キーが押されたか？
そのキーは予約されたキーか？
；
キーは「上向きカーソル」キーか？
；
；
；
は
型の特別な変数で，キーボードのキーが押されると
に
（キーの種類）と
（キーのコード番号）
なる．押されたキーの状態は，変数
などの定数を使いたくないときは，キーボードのキーコード
に格納される．・
を実行環境ごとに調べて，そのコードを使う必要がある．
第
章
プログラミングと機械制御
注意点は
に上記コードを書くと，キーが押されている間はずっと三重目の文が
実行され続けるという点である．キーを一度叩くたびに一つ何かをさせる場合は，工夫が
必要である．たとえば，一つ前のキーコードを保存しておき，新たに入力されたキーコー
ドが変化した場合のみ処理を行うようにする．
ゲームを作る流れ２（モグラ叩きゲームの場合）
図
のようなモグラ叩きゲームを作り，ゲーム情報（得点やゲーム進行）の管理（フ
ラグ，テーブル）について練習してみる．
図
モグラ叩きゲーム
ゲームを作る流れ
どのようなゲームか，ルール・ゲーム進行などについて大まかな構想を練る．今回
は，現実のモグラ叩きゲームをそのまま参考にする．
どのように画面上にゲームを表現するか，ユーザーインターフェースをどうするか
）．今回は
で一人称視点．マ
など考える（，，一人称視点，三人称視点
ウスのみで操作する．
ウインドウサイズを決める
モグラの穴の数・配置・大きさを決める
ウインドウ背景画像，モグラアニメーション画像，ハンマーアイコン画像，得
点用文字・数字画像などを用意する
や効果音を用意する
ルール・ゲーム進行（得点，時間，フラグやハイスコアなど）をどう管理するか考
える．
第
章
プログラミングと機械制御
モグラごとのアニメーションフレームナンバーをどう管理するか？
叩かれたかどうかの判定は（フラグ）？
全モグラ出現数（ゲーム終了条件）
・モグラを叩けた数（得点）
・率を計算
今回は上記の変数やインスタンスを「大域変数」として管理する．モグラ穴ごとの
状態は，下のような行列の次元配列（一列目がモグラ穴座標，二列目がモ
グラ穴座標，三列目がモグラアニメーションのフレームナンバー，四列目が殴ら
れたかどうかのフラグ．
「テーブル」という）にまとめる．
モグラアニメ状態
：
：
プログラムを機能別に分けて，部分ごとにプログラムを作成する．
ウインドウにゲーム画面を描く
ゲーム画面にモグラをアニメーションさせる（叩かれていないバージョン）
マウスでモグラを叩けるようにする（マウスイベント判定）
モグラ出現数・得点を表示できるようにする
ゲーム終了を実現する
叩かれたモグラのアニメーション（叩かれたアニメーションとエフェクト）を
通常のアニメーションと入れ替えられるようにする
・効果音を鳴らす
難易度・ユーザビリティを調整する
プログラミングの整理
・
・
・
・
の関数内部と関数外部に何
を記述するか決める．大域変数の名前や各機能の関数名決める．
第
章
プログラミングと機械制御
欄外に
する機能や大域変数を記述する
音声を使うので，
ミニオーディオライブラリを
し，音声用の大域変数を宣言する
を
という名前の
（エンドレスで鳴らす必要があるから）
クラスのインスタンスにする
モグラ叩きハンマーを降ったとき（クリックしたとき）の音を
クラスのインスタンスにする
いう名前の
叩かれたモグラの音を
スタンスにする
という名前の
と
クラスのイン
ゲーム終了の
を
という名前の
タンスにする（エンドレスで鳴らす必要があるから）
クラスのインス
ゲーム画面サイズを定数で記述する
ゲーム終了判定フラグを大域変数
総モグラ出現数（
する
として宣言する
）
・得点（
）を大域変数として宣言
今回は
画像を使うので，
とその配列を用意する（モグラの出入
フレーム使うものとする．このフレーム数はプログ
りアニメーションには
として宣言する）
ラム中で使うので定数
背景用，文字・得点用画像用
を宣言（
ゲーム用カーソル画像を入れる２つの
，
を宣言（
）
，
枚の画像（往復でフレーム）からのなるアニメーション用に要素数
の
配列を２つ用意する（普通のモグラ用
と，叩か
）．
れたモグラ用
叩かれたエフェクト用に要素数（このフレーム数は定数
として宣言する）の
配列
を用意する
モグラの状態を記録する配列を用意し，初期化する．
のなかに初期化作業を記述する
ウインドウを作る（
は無くて良い）
フレームレートを設定する（
画像を
）
に読み込む．たとえば，
アニメーション画像を順番に
配列に読み込む．
サウンドを初期化し，サウンドファイルを読み込む
）
第
章
プログラミングと機械制御
サウンドエンジンを用意
をループ再生する
カーソルをゲームカーソル画像（トンカチ）に換える（
）
に実行順に注意して，繰り返し処理を記述する
ゲーム終了フラグを調べ，
「終わってなかったらゲームを進行，そうでなかった
らゲームを停止し終了画面を表示する」と書く．
ゲーム進行の部分には，
背景を描く
モグラ総数や得点など文字情報を描く
モグラを描く（外部関数
にして，見通しをよくする）
ゲーム終了条件を調べる．もし終わっていたらゲーム終了フラグを立て，
を止める．終了効果音を流す）を行う
ゲーム進行を止める操作（
ゲーム終了時には，終了画面や終了メッセージを描く
に終了操作を書く（サウンド系の消去）
で，マウスカーソルを叩いているハンマー画像に換える
で，マウスカーソルの位置を調べて，モグラを叩けたかどうかを調
べる．叩けていたら，
マウスボタンを放したウインドウ内の座標を局所変数に保存する
ハンマーを叩いた効果音を出す
カーソルを普通のハンマー画像に戻す
モグラ穴とマウスカーソルの座標を順番に調べる
すでに叩かれたモグラは無視し，初めて叩けたときには，
当該行の「叩かれたフラグ」にフラグを立てる
叩かれたモグラ数を増やす
モグラの悲鳴を鳴らす
アニメーションフレームを少し戻して，叩かれたアニメーションを見やす
くする
で，モグラ穴ごとにモグラを描く．
第
章
プログラミングと機械制御
モグラが隠れきったら，
アニメーションフレームナンバーをいない状態にする
「叩かれたフラグ」を
にする
モグラのいない穴では，ランダムにモグラを出現させる（
使う）
を
コーディングのためのアイデア
に格納した画像を画面に表示する（正
簡易アニメーションのための画像表示命令
」「
」の２つがある（
配列
確には，別の画像に書き込む）命令には，
「
は，もとの画像全体を画面に表示する．
への命令はここでは扱わない）．
は元の画像から一部（全体でもよい）を指定して画面に表示することができる．下の図の
で部分的に取り出すことはよく行う技法である．
ようにリソースをまとめておいて，
として画像を作り，
輪郭が四角くない画像を表示するには，背景が透明な
図
ゲームの文字画像リソース
は
の透過効果をそのまま反映するので，マスク
で表示すれば簡単である．
処理など煩雑な操作をしないですむからである．しかしながら，一枚の画像から一部だけ
を単独で一度使うだけではできない．一方
を取り出して描画することは，
は画像の一部を取り出して表示できるが，
の透過効果に対応していないので，マス
ク処理を自前で記述する必要がある．
・
を単独で一度だけ使って，一枚の画像から少しずつ
以上のことから，
取り出してアニメーションするプログラムにすることはではできない．この問題を簡単に
画像を，図
のように同じサイズで
解決するには，あらかじめ異なった複数の
命令で表示するようにすればよい．
用意しておき，順に
イベント取り出し「
：左ボタンを押した」をハンマー振り下ろし
：左ボタンをはなした」を叩いた後の処理に使う．
た表現に，
「
第
章
プログラミングと機械制御
図
モグラアニメのもと
マウス座標の利用各モグラ穴の・座標から，
のようにする．
るには，図
図
の基準になる左上の座標を求め
モグラの画面上での位置決定
の基準からキャラ幅とキャラ高の間で，
判定モグラを叩けたと判断する条件は，
マウスボタンをリリースしたときとする．この判定条件では，モグラアニメーションの始
まりと終わりでは，画像に比べて叩ける範囲が甘くなる．しかし今回程度の大きさの画面
で適当な早さのゲームであれば，判定の甘さにはほとんど気がつかないので気にしない．
もし厳密に判定を行いたいならば，アニメーション画像に合わせて判定用キャラ高を変え
て，画像ごとに計算するようにすればよい．
コーディング
枚の画像を
フレームに往復分として読み込むには前半分をファイルに仕込んでお
がなので三項
いた連番の番号順に読み．後半を逆順で読み込めばよい．
演算子を使って書くと，下のようなコードになる．
第
章
プログラミングと機械制御
モグラアニメーション描画モグラの動作をインタラクティブなアニメーションの例とし
のようになる．
て，分析すると図
図
モグラアニメーションの遷移
モグラが出現（フレームナンバーが
以外）しているか調べ
もし出現していれば，つぎに叩かれているか調べて，叩かれているアニメと叩かれ
ていないアニメを描き分ける
叩かれていたら，叩かれた画像とエフェクトを描く
モグラ本体
エフェクトの星
そうでなければ普通のモグラを描く
第
章
プログラミングと機械制御
キャラアニメーション管理ランダムな動作をさせたいので「
」命令を使う．こ
の関数は，引数の範囲（引数が一つならと引数の範囲．二つなら引数の間）でランダム
型の小数を返す．今回のような場合は，小数を整数に直して使う．
な
各モグラ穴を調べ，モグラのいる穴（アニメーションフレームナンバーが
以外）では，フレームナンバーを１フレーム進め，モグラの状態を変える．
フェイント（出かけて引っ込むモグラ）用にアニメーションカウンターをランダム
に操作する
出かけてやめるモグラを作る（カウンターを戻す）
モグラのいない穴で，ランダムにモグラを出現させる（下の例では
で出現する）には，
分のの確率

Download Report