e-Gadget - プログラム関数電卓　Casio Basic入門G02

Casio Basic入門G02

Casio Basic入門

誤字脱字・記載ミスや分かりにくい表現は随時追記・修正します

訂正 2015/07/29
訂正 2017/09/25

5. Casio Basic でグラフィックス

前回： Casio Basic入門G01

Chapter G02
グラフィックス画面の設定と描画

Casio Basic でグラフィックスを描画するには、グラフ描画を主目的に考えられている fx-9860GII の特徴を理解しておくと、その後の理解が楽になるので、前回は Casio Basic でのグラフィックス描画エリアがLCDの全エリアでないこと、３種類の座標系（デフォルトの論理座標系、ViewWindow 座標系、物理座標系）を使えることを紹介しました。

今回は、fx-9860GII の特徴をさらに調べながら、グラフィックスコマンドを使ってみます。

グラフィックス画面とテキスト画面

fx-9860GII の Casio Basic では、グラフィックスコマンドで描画を行うグラフィックス画面と、テキスト出力コマンドで表示されるテキスト画面があって、グラフィックスコマンドとテキスト出力コマンドは、１つの画面に一緒に出力できないようになっています。また、グラフィックス画面やテキスト画面は、それぞれ１枚づつしかなく、全てのCasio Basic プログラムで共用されます。

fx-5800P では、出力命令 " " と Locate コマンドで画面出力しますが、これらはテキスト画面へ出力します。fx-9860GII でもこれらの命令・コマンドが使えますが、同様にテキスト画面へ出力します。
グラフィックスコマンドとテキスト出力は、これら２つの画面を切り替えて表示が行われます。詳しくは次回以降で紹介します。

グラフィックス消去コマンド

グラフィックス画面の消去は、ClrGraph か Cls コマンドで行います。

fx-5800P と fx-9860GII の画面消去コマンドをを整理しておきます。共通して使える Cls は、画面消去コマンドです。

Casio Basic の画面消去コマンド [2015/07/29 訂正]

コマンド	fx-5800P	fx-9860GII
Cls	画面消去（テキスト画面のみ）	グラフィックス画面の消去 (座標系の変更は行わない)
ClrText	なし	テキスト画面の消去
ClrGraph	なし	グラフィックス画面の消去と座標系をクリアして論理座標系へ戻す

fx-9860GII では、グラフィックス描画のためには、専用のグラフィックス画面が使われます。
fx-5800P と共通して使える出力命令 " " や Locate コマンドは、テキスト画面に表示され、グラフィックス画面への表示はできません。
fx-5800P の Cls コマンドは、fx-9860GII の ClrText と同じ動作です。

グラフィックス画面に描画された状態は、ClrGraph を実行しない限り残っています。１つのプログラムでグラフィックス描画を行い、ClrGraph で消去しないでおくと、プログラムで ClrGraph しないと、その残った画面の上にグラフィックス描画が行われる仕様です。

従って、プログラムの最初か最後に ClrGraph を実行しておくのが望ましいでしょう。

fx-9860GII での Cls 入力方法
[SHIFT] [F1] (Cls)

fx-9860GII での ClrText 入力方法
[SHIFT] [VARS] (PRGM) [F6] (▷) [F1] (CLR) [F1] (Text)

fx-9860GII での ClrGraph 入力方法
[SHIFT] [VARS] (PRGM) [F6] (▷) [F1] (CLR) [F2] (Grph)

サンプルプログラム１

ちょっと実験してみます。以下の２つのプログラムを入力して、先にプログラム H を実行し、その後プログラム V を実行してください。

ファイル名： H (水平線を描く)
ClrGraph
CoordOff
GridOff
AxesOff
LabelOff
Horizontal 0

ファイル名： V (垂直線を描く)
Vertical 0

※ プログラム H の CoordOff、GrifOff、AxesOff、LablelOff を入力する方法は、下のグラフ設定コマンドにあります。
※ Horizontal の入力方法
　　[SHIFT] [F4] (Sketch) [F6] (▷) [F5] (Hztl)
※ Vertical の入力方法
　　[SHIFT] [F4] (Sketch) [F6] (▷) [F4] (Vert)

プログラム H を実行すると、グラフィックス画面に水平線が描かれますが、最後に ClrGraph が実行されていないので、グラフィックス画面には水平線が残ったままです。次に、プログラム V を実行すると、垂直前のみを描くにもかかわらず、画面には水平線と垂直線の両方が描かれています。グラフィックス画面上の描画は、ClirGraph や Cls が実行されない限り、残っていることが確かめられました。

さらに、グラフィックス画面はプログラムごとに別に用意されるのではなく、共通して全てのプログラムで使われることも確認できました。

ところで、プログラム H と V では、座標系の指定を行っていませんが、ClrGraph を実行しています。ClrGraph により座標系がクリアされて論理座標系に設定されていることが、分かると思います。[2015/07/08 修正] 座標系については、Casio Basic入門G01 を参照してください。

グラフ設定コマンド

fx-9860GII には、４種類のグラフ設定コマンドがあります。

1) CoordOn / CoordOff ：カーソル位置の座標値出力を On / Off する
この設定コマンドは、Plot コマンドで入力待ちになっている時に有効となる。座標値出力領域にはグラフィックス描画されない。詳しくは次回以降で紹介する。

この設定は、プログラムとは関係無く保存され、１つのプログラムで On にすると、それ以降実行するプログラムでも On の設定が生きている。従って、プログラムごとに設定するのが望ましい。

fx-9860GII での CoordOn 入力方法
[SHIFT] [MENU] (SET UP) [F2] (COOR) [F1] (On)

fx-9860GII での CoordOff 入力方法
[SHIFT] [MENU] (SET UP) [F2] (COOR) [F2] (Off)

2) GridOn / GridOff ：グリッドの表示を On / Off する
この設定コマンドは、グリッド表示を On / Off する。グリッド表示の上にグラフィックスが描画されるので、画面の背景だと思うと分かりやすい。

この設定は、プログラムとは関係無く保存され、１つのプログラムで On にすると、それ以降実行するプログラムでも On の設定が生きている。従って、プログラムごとに設定するのが望ましい。

fx-9860GII での GridOn 入力方法
[SHIFT] [MENU] (SET UP) [F3] (GRID) [F1] (On)

fx-9860GII での GridOff 入力方法
[SHIFT] [MENU] (SET UP) [F3] (GRID) [F2] (Off)

3) AxesOn / AxesOff ：座標軸の表示を On / Off する
この設定コマンドは、座標軸表示を On / Off する。座標軸表示の上にグラフィックスが描画されるので、画面の背景だと思うと分かりやすい。

この設定は、プログラムとは関係無く保存され、１つのプログラムで On にすると、それ以降実行するプログラムでも On の設定が生きている。従って、プログラムごとに設定するのが望ましい。

fx-9860GII での AxesOn 入力方法
[SHIFT] [MENU] (SET UP) [F4] (AXES) [F1] (On)

fx-9860GII での AxesOff 入力方法
[SHIFT] [MENU] (SET UP) [F4] (AXES) [F2] (Off)

4) LabelOn / LabelOff ：座標軸の X、Y ラベル表示を On / Off する
この設定コマンドは、X座標とY座標を示す X, Y ラベル表示を On / Off する。ラベル表示の上にグラフィックスが描画されるので、画面の背景だおｔ思うと分かりやすい。

この設定は、プログラムとは関係無く保存され、１つのプログラムで On にすると、それ以降実行するプログラムでも On の設定が生きている。従って、プログラムごとに設定するのが望ましい。

fx-9860GII での LabelOn 入力方法
[SHIFT] [MENU] (SET UP) [F5] (LABL) [F1] (On)

fx-9860GII での LabelOff 入力方法
[SHIFT] [MENU] (SET UP) [F5] (LABL) [F2] (Off)

実際の表示例を示すと以下のようになります。

GridOff (グリッドなし)、AxesOn (座標軸あり)、LabelOn (ラベルあり) を設定した時のグラフィックス画面

GridOn (グリッドあり)、AxesOn (座標軸あり)、LabelOn (ラベルあり) を設定した時のグラフィックス画面

この２つの画面を見比べると、座標軸の目盛りとグリッドの点が共用されていることが分かります。面白いアイデアですね。

なお、４つの設定全てを Off にすると、グラフィックス画面の背景は何もなくなります。

サンプルプログラム２

次のような表示を作ってみます。

(x, y) = (2, 2) の座標に点が１つあります。

最初にグラフィックス画面を消去します。
次に、座標軸とラベルの表示を On にします。
最後に、PlotOn コマンドで、座標 (x, y) = (2, 2) に点を表示します。

PlotOn の書式
PlotOn x,y
現在の座標系(論理座標系か ViewWindow座標系)で、座標 (x, y) に点を描画する。

PlotOn の入力方法
[SHIFT] [F4] (Sketch) [F6] (▷) [F1] (PLOT) [F2] (Pl･On}

以下を入力して実行してみてください。上の写真のようになりますか？

ClrGraph
CoordOn
GridOn
AxesOn
LabelOn
PlotOn 2,2

ViewWindowで座標系を指定しなければ、ClrGraph により論理座標系が適用されています。

画面塗りつぶしプログラム

グラフィックス領域の半分を塗りつぶすプログラムを４通りの方法で作ってみます。

ファイル名： MARKOUT1
ClrGraph
CoordOff
GridOff
AxesOff
LabelOff
ViewWindow 0,126,0,0,62,0
For 0→Y To 31
For 0→X To 126
PlotOn X,Y
Next
Next

プログラムの説明
・グラフィックス画面の消去

・４つのグラフ設定：
　全て Off にする

・ViewWindow 座標系設定：
　グラフィックス画面左下隅を原点 (0, 0) とし、
　右下隅のピクセルの座標を (126, 0)、
　右上隅のピクセルの座標を (126, 62) とする。　

・ピクセルの描画： PlotOn を使う
　ピクセルを左から右へ、そして下から上へ順に表示してゆく。
　ここで For 文を使っています。
　⇒ CasioBasic コマンドリファレンス - For 文

プログラムの実行
結構な時間がかかります。fx-9860GII のグラフィックスは処理が遅いことが分かります。

プログラムのダウンロード
　⇒ MarkOut1
　⇒ ダウンロードしたファイルを fx-9860GII へ転送する方法

==========

次に、水平線を下から上へ順に描画する方法を試します。

ファイル名： MARKOUT2
ClrGraph
CoordOff
GridOff
AxesOff
LabelOff
ViewWindow 0,126,0,0,62,0
For 0→Y To 31
Horizontal Y
Next

プログラムの説明
・グラフィックス画面の消去

・４つのグラフ設定：
　全て Off にする

・ViewWindow 座標系設定：
　グラフィックス画面左下隅を原点 (0, 0) とし、
　右下隅のピクセルの座標を (126, 0)、
　右上隅のピクセルの座標を (126, 62) とする。　

－－－ここまでは、MARKOUT1 と同じ－－－

・水平線の描画： Horizontal を使う
　水平線を下から上へ順に表示してゆく。

　Horizontal の書式
　Horizontal y
　現在の座標系で、縦軸の y 座標の位置に水平線を描画する。

　Horizontal の入力方法
　[SHIFT] [F4] (Sketch) [F6] (▷) [F5] (Hztl)

プログラムの実行
MARKOUT に比べて、かなり高速化されました。

プログラムのダウンロード
　⇒ MarkOut2
　⇒ ダウンロードしたファイルを fx-9860GII へ転送する方法

==========

今度は、左端から右端までの直線を下から上へ順に描画する方法を試します。

ファイル名： MARKOUT3
ClrGraph
CoordOff
GridOff
AxesOff
LabelOff
ViewWindow 0,126,0,0,62,0
For 0→Y To 31
F-Line 0,Y,126,Y
Next

プログラムの説明
・グラフィックス画面の消去

・４つのグラフ設定：
　全て Off にする

・ViewWindow 座標系設定：
　グラフィックス画面左下隅を原点 (0, 0) とし、
　右下隅のピクセルの座標を (126, 0)、
　右上隅のピクセルの座標を (126, 62) とする。　

－－－ここまでは、MARKOUT1 / MARKOUT2 と同じ－－－

・直線の描画： F-Line を使う
　左端から右端までの直線を下から上へ順に表示してゆく。

　F-Line の書式
　F-Line x1,y1,x2,y2
　現在の座標系で、起点座標 (x1, y1) から終点座標 (x2, y2) まで直線を描画する。

　F-Line の入力方法
　[SHIFT] [F4] (Sketch) [F6] (▷) [F2] (LINE) [F2] (F-Line)

プログラムの実行
MARKOUT2 と同じ描画時間でした。

プログラムのダウンロード
　⇒ MarkOut3
　⇒ ダウンロードしたファイルを fx-9860GII へ転送する方法

==========

最後に、太い水平線を下から上へ順に描画する方法を試します。

ファイル名： MARKOUT4
ClrGraph
CoordOff
GridOff
AxesOff
LabelOff
ViewWindow 0,126,0,0,62,0
For 0→Y To 31 Step 2 [2017/09/25 修正: Step 2 が抜けていたのを追加]
SketchThick Horizontal Y
Next

プログラムの説明
・グラフィックス画面の消去

・４つのグラフ設定：
　全て Off にする

・ViewWindow 座標系設定：
　グラフィックス画面左下隅を原点 (0, 0) とし、
　右下隅のピクセルの座標を (126, 0)、
　右上隅のピクセルの座標を (126, 62) とする。　

－－－ここまでは、MARKOUT1 / MARKOUT2 / MARKOUT3 と同じ－－－

・太い水平線の描画： Sketch Horizontal を使う
　太い水平線を下から上へ順に表示してゆく。

　SketchThick の書式
　SketchThick [線や円の描画コマンド]
　線や円の描画を、太線で実行する。
　ここで、使える線や円の描画コマンドは、
　・ Line、F-Line、Horizontal、Vertical、Circle がある。

　線の描画に Horizontal を適用すると、
　SketchThick Horizontal y となって、ピクセル２つの太さで水平線を描画する。

　SketchThick の入力方法
　[SHIFT] [F4] (Sketch) [F6] (▷) [F6] (▷) [F5] (STYL)

プログラムの実行
MARKOUT2 や MARKOUT3 よりも、さらに高速化されました。

プログラムのダウンロード
　⇒ MarkOut4
　⇒ ダウンロードしたファイルを fx-9860GII へ転送する方法

==========

Casio Basic のグラフィックス描画も、場合によってはかなり高速になることが分かりました。

グラフィックスコマンドによる描画時間の違い

プログラムファイル名	コマンド	描画時間
MARKOUT1	PlotOn x,y	203.5秒
MARKOUT2	Horizontal y	2.0秒
MARKOUT3	F-Line x1,y1,x2,y2	2.0秒
MARKOUT4	SketchThick Horizontal y	1.3秒

グラフィックス描画のしくみ - 描画時間を決める要素

グラフィックスデータは、マイクロブロセッサにより、VRAMと呼ばれるメモリ(領域)に送られます。次に、VRAM のデータが液晶ディスプレイ (LCD)へ転送されてグラフィックスが表示されます。

PlotOn コマンドが実行される時は、ピクセル１個の描画データが VRAM へ書き込まれるたびに、そのデータが LCD へ転送されます。

fx-9860GII では、この転送速度が遅く、従ってMARKOUT1 プログラムの実行に時間がかかるわけです。実行されている時、実際にピクセルが１個づつ描画されるのが見えます。

次に、Horizontal コマンドで水平線を１本づつ描画する時は、水平線１本分の描画データが VRAM に送られると、そのデータがまとめて LCD へ転送されます。時間がかかる転送動作が少なくて済むので、それだけ描画が速くなります。

３つめの、F-LINE コマンドで直線を１本づつ描画する場合も、水平線の時と同様に、直線１本分のデータが VRAM に送られ、それがまとめて LCD へ転送されるので、Horizontal と同じ時間がかかるわけです。

最後のプログラム例では太い水平線を描画していますが、水平線２本分の描画データが、まとめて LCD に転送されるため、さらに描画が速くなるのがわかります。

MARKOUT1 では、127 x 32 = 4064 ピクセルを描画する時、１ピクセルごとに LCD転送するので、転送回数は 4064回。
MARKOUT2 では、直線１本ごとに LCD転送するので、転送回数は 32回。
MARKOUT3 でも、水平線１本ごとにLCD転送するので、転送回数は 32回。
MARKOUT4 では、水平線２本ごとにLCD転送するので、転送回数は 16回。

そこで、描画時間を LCD 転送回数で割ってみると (T / F) 下表のようになり、数十ミリ秒のオーダーでほぼ同じくらいになっています。但し、転送回数が少なければ、1回の転送データが大きくなるので、T / F が下へゆくほど大きくなるのは理解できて、10～20ミリ秒の違いは、VRAM へのブロック転送の時間の違いだと考えれば、納得できる範囲です。

LCD 転送１回あたりの描画時間 [fx-9860GII USB POWER GRAPHIC 2]

プログラムファイル名	描画時間 / T	LCDへの転送回数 / F	T / F
MARKOUT1	203.5秒	4064回	0.05秒
MARKOUT2	2.0秒	32回	0.06秒
MARKOUT3	2.0秒	32回	0.06秒
MARKOUT4	1.3秒	16回	0.08秒

==========

さて、Casio Basic で作った MARKOUTx と同様のプログラムを Casio SDK を使ってC言語でアドインを作ってみました。

　⇒ アドインのダウンロード： markout3.zip

ダウンロードした圧縮ファイルに、含まれる markout3.g1a がアドインファイルです。これを fx-9860GII に添付されているPCリンクソフト FA-124 Ver 2.04 を使って fx-9860GII へ転送します。詳しい操作は、FA-124 Ver 2.04 の取扱説明書をご参照ください。

[MENU] (MAIN MENU) から [MArK 3] アイコンを選び [EXE] キーで起動すると、

F1: MarkOut Dot
F2: MarkOut Line
F3: MarkOut Thick Line

と表示されます。

[F1] は、ピクセルごとに、順に LCD へ転送して描画します。
[F2] は、水平な線ごとに、順に LCD へ転送して描画します。
[F3] は、水平な線を２本ごとに、順に LCD へ転送して描画します。

画面の下半分を塗りつぶしたとことで、所要時間を表示します。

その結果は、Casio Basic と同じ傾向になります（速度自体は圧倒的に速いのですが．．．）。同じ傾向を示すので、グラフィックス描画コマンドによる速度の違いは、LCD転送の回数の違いであることが確かめられました。Casio Basic と Add-In のＣ言語の言語の違いはあっても、LCD へのデータ転送がグラフィックス描画の処理速度を決めているわけです。

グラフィックス描画を速くしたい時は、LCD への転送回数を減らす工夫がポイントになることが分かります。

今回のまとめ

グラフィックス画面