コンピュータ基礎とプログラミング（第九回）

森 雅智morimori@ht.sfc.keio.ac.jp

2010年 秋学期

1

12010年12月3日金曜日

前回の復習＆課題回答

2

22010年12月3日金曜日

配列の宣言と初期化を同時に行う

• 通常の変数と同じように，配列も宣言と初期化を同時に行うことができる．

配列の要素数が増えてくると便利

3

32010年12月3日金曜日

二次元配列• 二次元配列とは，**を要素として持つ配列のこと（**の配列）

• 配列も変数だったことを思い出す

int[3] int[3] int[3] int[3] int[3]array2d

[0] [1] [2] [3] [4]

**の中に配列が入っている4

42010年12月3日金曜日

二次元配列• 二次元配列とは，配列を要素として持つ配列のこと（配列の配列）

• 配列も変数だったことを思い出す

int[3] int[3] int[3] int[3] int[3]array2d

[0] [1] [2] [3] [4]

配列の中に配列が入っている5

52010年12月3日金曜日

二次元配列の注意• 全ての要素は***である必要がある

• 特定の行や列だけ別の型にすることはできない

平均は***なので，全てのデータを同じ二次元配列に入れることはできない

6

62010年12月3日金曜日

二次元配列の注意• 全ての要素は同じ型である必要がある

• 特定の行や列だけ別の型にすることはできない

平均は小数型なので，全てのデータを同じ二次元配列に入れることはできない

7

72010年12月3日金曜日

二次元配列の宣言と初期化を同時に行う

• 二次元配列も配列と同様に初期化できる

8

82010年12月3日金曜日

二次元配列でドット絵をデータとして表現する• SFCLibで扱うドットの位置は(x, y)で表現できる

• 各点は色（カラーコード）を持っている

二次元配列に全ての点のデータを格納することができる

9

92010年12月3日金曜日

色を数値化

２１ ２４ ７３ ５ １０６

４１ ７０ ２ ０６ １５３

２ ３７ ０６１０ ５ ７４

３ ７０ ６６ ４ ５１７ ２

０ ６５５ ２ ４７６ ３１

２５ ７４ ４ ５６ １０ ３

６ １ ４２７ ３４ ０５３

５４２ １ ２７ ０ ３６３

５ ２４ ６３２ ７ １０１

１０７６５４３２１０

参考：第五回授業資料

10

102010年12月3日金曜日

canvasデータを二次元配列で持つ利点

• lib.sfcPoint()では，指定した位置のドットを描画することはできたが，指定した位置のドットの色は分からなかった

• 二次元配列canvasに一度データを格納することで，指定した位置のドットの色を取得することができるようになる

プログラムプログラム

before after

参照書き込み

描画描画

参照はできない11

112010年12月3日金曜日

先週の課題1

• キー入力のレスポンスを保ちつつドットを適度な速度で動かすにはどうすればよいか，考察せよ

• 考察した通りに実際にドットを動かすプログラムを改変し，プログラムを提出せよ

12

122010年12月3日金曜日

考察• フレームレートを下げると，移動速度は遅くなるが，レスポンスは悪くなる

• 毎フレーム移動させているのが原因

フレームレートは高いまま，数フレームに一回だけ移動させれば良さそう

13

132010年12月3日金曜日

イメージ

高フレームレート

低フレームレート

改良版

時間

キーON キーOFF14回移動

2回移動

2回移動

※ 10回に1回だけ移動させる

高レスポンス

低レスポンス

高レスポンス

14

142010年12月3日金曜日

戦略• フレームレート自体は下げない• 下げるとレスポンスが落ちる為• 毎フレーム移動する代わりに，一度移動したら数フレームは移動しないようにカウンタを設ける

• カウンタが0の時のみ移動でき，一度移動したらカウンタの値を更新（更新する値で速度が決まる）

• カウンタが1以上の時，毎フレームカウンタを引いていく

15

152010年12月3日金曜日

改造元（毎フレーム移動する）

60FPS

16

162010年12月3日金曜日

改良版

ballCounterを使って移動して良いかの判定を行う

17

172010年12月3日金曜日

先週の課題2

• クリックしたドットを塗るプログラムを改造し，0～7のキーを押すと塗りつぶす色を変えられるお絵かきプログラムを作成せよ

• e.g. 1キーを押してからクリックすると青で塗ることができる

18

182010年12月3日金曜日

戦略• 既にクリックした場所を黒で塗りつぶすプログラムはある

• 塗りつぶす色を変更できるようにすれば良い

• 色は数字キーで変更できるようにする

19

192010年12月3日金曜日

元にするプログラム

クリックした部分を黒で塗るプログラム

20

202010年12月3日金曜日

変更する点• 塗りつぶす色を可変に

• 塗りつぶす色を変数にする

• 数字キーで色を変更可能に

• 数字キーが押されたら色の変数を変更

21

212010年12月3日金曜日

変更差分塗りつぶす色を変数に

数字キーでdrawColorを変更22

222010年12月3日金曜日

今日の内容

23

232010年12月3日金曜日

Agenda

• ドキュメントの読み方

• ファイル入出力

• 並べ替え

• 最終課題企画書のチェック

24

242010年12月3日金曜日

ドキュメントの読み方• ProcessingのHPにはたくさんの関数と使い方が載っている

• http://www.processing.org/reference/

• ドキュメントを読めるようになればプログラムの幅が広がる

25

252010年12月3日金曜日

max()のマニュアル

26

262010年12月3日金曜日

最終課題に向けて

• ドキュメントを読んで，やりたいこと，やれることを調べることができる

• 授業で使っていない関数も自由に使って良いので，良いものを作ってください

27

272010年12月3日金曜日

ファイル入出力• ファイル出力• プログラムからファイルにデータを書きこむ

• ファイル入力• ファイルからプログラムにデータを読み込む

プログラム出力

入力28

282010年12月3日金曜日

これまでのプログラム• これまで全ての情報はソースコードの中に記述してきた• プログラムの実行結果は表示するだけで，結果を保存することはできなかった

29

292010年12月3日金曜日

こんな時はどうする？• プログラムの挙動を少しだけ変えたい

• ボールの移動速度を変えたい

• 表示されるドット絵を直したい修正

30

302010年12月3日金曜日

プログラミングの流れ

• プログラマはプログラミング言語でソースコードを記述し，コンパイラがソースコードを実行ファイルに変換し，コンピュータが実行ファイルを実行する

ソースコード（in プログラミング言語）

プログラマ

実行ファイル（in 機械語）

コンパイラ

変換 実行

ソースコードを修正したらコンパイルし直す必要がある31

312010年12月3日金曜日

ファイル出力でできること

• プログラムを終了してもプログラムの結果を残すことができる

• ゲームのハイスコアデータ

• お絵かきソフトの画像データ

• その他

32

322010年12月3日金曜日

ファイル入力でできること

• プログラムをコンパイルし直さなくてもプログラムの挙動を変えることができる

• セーブデータからの復帰

• 既存のファイルの編集

• プログラムの細かい設定パラメータの変更

33

332010年12月3日金曜日

演習：ファイル入力• 適当なテキストファイルを書いてプログラムと同じフォルダに保存

• String[] loadStrings()という関数を使ってファイルの内容を表示してみる

• 戻り値はString（文字列）型の配列

• http://www.processing.org/reference/loadStrings_.html

34

342010年12月3日金曜日

演習：ファイル出力• saveStrings()関数を使ってファイルに文字列を書きこんでみる

• 使い方はドキュメントを読みながらやってみること• http://www.processing.org/reference/saveStrings_.html

35

352010年12月3日金曜日

並べ替え（sort）• プログラムで並べ替えは良く使われる

• 大きい順に並べる

• 小さい順に並べる

• 配列とセットで使われる

8274 7163 9361 6363 6184

6184 6363 7163 8274 9361

Before

After

36

362010年12月3日金曜日

演習：並び替え• int型の要素数5の配列を作成し、以下の値で初期化せよ

8274 7163 9361 6363 6184

•配列の中身を小さい順に並べ替えよ

•完成したら、初期化値を変えても正しく動作するか確かめよ

37

372010年12月3日金曜日

他にも別解はあるので動作していれば問題ない38

382010年12月3日金曜日

最終課題企画書チェック

• 最終課題の企画書を一人ずつチェックします

• 他の人がチェックされている間は次ページ以降の課題をやる

• 課題が終わったら最終課題を進める

39

392010年12月3日金曜日

SFCLibのアップグレード• Processingの環境設定の「Sketchbook location」フォルダ内に「libraries」フォル

ダを作成

• libraries内に以下のURLからダウンロードしたsfclib.zipを解凍する

• http://www.ht.sfc.keio.ac.jp/~morimori/compro10f/sfclib.zip

40

402010年12月3日金曜日

SFCLib 0.4の更新点（1）• char lib.sfcCharAt(String s, int i)

• sのi文字目の文字を返す（0文字目から始まる）

• int lib.sfcStrLength(String s)

• sの文字数を返す

• char[] lib.sfcToCharArray(String s)

• sをchar型の配列に変換する

• int lib.sfcParseInt(String s)

• sの文字列を数値に変換する（“100”という文字列なら100という整数に変換する）

41

412010年12月3日金曜日

SFCLib 0.4の更新点（2）• float lib.sfcParseFloat(String s)

• sの文字列をfloat型に変換する（“10.4”ならfloat型の10.4を返す）

• String[] lib.sfcSplit(String s, String divider)

• sをdividerで分割した配列を返す（s =

“a,bc,cde,def,”, divider=”,”なら，s[0]=”a”, s[1]

=”bc”, s[2]=”cde”, s[3]=”def”のString配列を返す）

42

422010年12月3日金曜日

演習：続並び替え• 以下のデータを名前はStringの配列，点数はint型の二次元配列に格納し，以下の並べ替えを行え

• 数学の点数順に並び替えよ

• 合計点順に並び替えよ

43

432010年12月3日金曜日

演習：お絵かきツールを作る• 課題で作った任意の色のドットを描画するプログラムを改造し「s」キーを押すとデータを保存「l（Lの小文字）」キーを押すと保存したデータを読み込むようにせよ

sキーで保存

lキーで読み込み

44

442010年12月3日金曜日

今週の課題•最終課題を進める

•現時点で作り方が分からない機能を洗い出して，質問があればまとめる

•これまでの内容でよく分からなかった所があれば，同じくまとめる

45

452010年12月3日金曜日