Casio Basic入門G02
Casio Basic入門
誤字脱字・記載ミスや分かりにくい表現は随時追記・修正します
訂正 2015/07/29
訂正 2017/09/25
訂正 2015/07/29
訂正 2017/09/25
5. Casio Basic でグラフィックス
前回: Casio Basic入門G01
Chapter G02
グラフィックス画面の設定と描画
Casio Basic でグラフィックスを描画するには、グラフ描画を主目的に考えられている fx-9860GII の特徴を理解しておくと、その後の理解が楽になるので、前回は Casio Basic でのグラフィックス描画エリアがLCDの全エリアでないこと、3種類の座標系(デフォルトの論理座標系、ViewWindow 座標系、物理座標系)を使えることを紹介しました。
今回は、fx-9860GII の特徴をさらに調べながら、グラフィックス コマンドを使ってみます。
グラフィックス画面とテキスト画面
fx-9860GII の Casio Basic では、グラフィックス コマンドで描画を行うグラフィックス画面と、テキスト出力コマンドで表示されるテキスト画面があって、グラフィックス コマンドとテキスト出力コマンドは、1つの画面に一緒に出力できないようになっています。また、グラフィックス画面やテキスト画面は、それぞれ1枚づつしかなく、全てのCasio Basic プログラムで共用されます。
- fx-5800P では、出力命令 " " と Locate コマンドで画面出力しますが、これらはテキスト画面へ出力します。fx-9860GII でもこれらの命令・コマンドが使えますが、同様にテキスト画面へ出力します。
- グラフィックス コマンドとテキスト出力は、これら2つの画面を切り替えて表示が行われます。詳しくは次回以降で紹介します。
グラフィックス消去コマンド
グラフィックス画面の消去は、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 を実行しておくのが望ましいでしょう。
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)
サンプルプログラム 1
ちょっと実験してみます。以下の2つのプログラムを入力して、先にプログラム 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 には、4種類のグラフ設定コマンドがあります。
1) CoordOn / CoordOff : カーソル位置の座標値出力を On / Off する
この設定コマンドは、Plot コマンドで入力待ちになっている時に有効となる。座標値出力領域にはグラフィックス描画されない。詳しくは次回以降で紹介する。
この設定は、プログラムとは関係無く保存され、1つのプログラムで 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 する。グリッド表示の上にグラフィックスが描画されるので、画面の背景だと思うと分かりやすい。
この設定は、プログラムとは関係無く保存され、1つのプログラムで 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 する。座標軸表示の上にグラフィックスが描画されるので、画面の背景だと思うと分かりやすい。
この設定は、プログラムとは関係無く保存され、1つのプログラムで 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 する。ラベル表示の上にグラフィックスが描画されるので、画面の背景だおt思うと分かりやすい。
この設定は、プログラムとは関係無く保存され、1つのプログラムで 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 (ラベルあり) を設定した時のグラフィックス画面
この2つの画面を見比べると、座標軸の目盛りとグリッドの点が共用されていることが分かります。面白いアイデアですね。
なお、4つの設定全てを Off にすると、グラフィックス画面の背景は何もなくなります。
サンプルプログラム 2
次のような表示を作ってみます。

(x, y) = (2, 2) の座標に点が1つあります。
- 最初に グラフィックス画面を消去します。
- 次に、座標軸とラベルの表示を On にします。
- 最後に、PlotOn コマンドで、座標 (x, y) = (2, 2) に点を表示します。
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 により論理座標系が適用されています。
画面塗りつぶしプログラム
グラフィックス領域の半分を塗りつぶすプログラムを4通りの方法で作ってみます。

ファイル名: 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
プログラムの説明
・グラフィックス画面の消去
・4つのグラフ設定:
全て 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
プログラムの説明
・グラフィックス画面の消去
・4つのグラフ設定:
全て 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
プログラムの説明
・グラフィックス画面の消去
・4つのグラフ設定:
全て 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
プログラムの説明
・グラフィックス画面の消去
・4つのグラフ設定:
全て 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 となって、ピクセル2つの太さで水平線を描画する。
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 コマンドが実行される時は、ピクセル1個の描画データが VRAM へ書き込まれるたびに、そのデータが LCD へ転送されます。
fx-9860GII では、この転送速度が遅く、従ってMARKOUT1 プログラムの実行に時間がかかるわけです。実行されている時、実際にピクセルが1個づつ描画されるのが見えます。
次に、Horizontal コマンドで水平線を1本づつ描画する時は、水平線1本分の描画データが VRAM に送られると、そのデータがまとめて LCD へ転送されます。時間がかかる転送動作が少なくて済むので、それだけ描画が速くなります。
3つめの、F-LINE コマンドで直線を1本づつ描画する場合も、水平線の時と同様に、直線1本分のデータが VRAM に送られ、それがまとめて LCD へ転送されるので、Horizontal と同じ時間がかかるわけです。
最後のプログラム例では太い水平線を描画していますが、水平線2本分の描画データが、まとめて LCD に転送されるため、さらに描画が速くなるのがわかります。
MARKOUT1 では、127 x 32 = 4064 ピクセルを描画する時、1ピクセルごとに LCD転送するので、転送回数は 4064回。
MARKOUT2 では、直線1本ごとに LCD転送するので、転送回数は 32回。
MARKOUT3 でも、水平線1本ごとにLCD転送するので、転送回数は 32回。
MARKOUT4 では、水平線2本ごとにLCD転送するので、転送回数は 16回。
そこで、描画時間を LCD 転送回数で割ってみると (T / F) 下表のようになり、数十ミリ秒のオーダーでほぼ同じくらいになっています。但し、転送回数が少なければ、1回の転送データが大きくなるので、T / F が下へゆくほど大きくなるのは理解できて、10~20ミリ秒の違いは、VRAM へのブロック転送の時間の違いだと考えれば、納得できる範囲です。
LCD 転送1回あたりの描画時間 [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] は、水平な線を2本ごとに、順に LCD へ転送して描画します。

画面の下半分を塗りつぶしたとことで、所要時間を表示します。
その結果は、Casio Basic と同じ傾向になります(速度自体は圧倒的に速いのですが...)。同じ傾向を示すので、グラフィックス描画コマンドによる速度の違いは、LCD転送の回数の違いであることが確かめられました。Casio Basic と Add-In のC言語の言語の違いはあっても、LCD へのデータ転送がグラフィックス描画の処理速度を決めているわけです。
グラフィックス描画を速くしたい時は、LCD への転送回数を減らす工夫がポイントになることが分かります。
今回のまとめ
グラフィックス画面
- グラフィックス コマンドの出力のためのグラフィックス画面とテキスト出力のためのテキスト画面があって、これらは別のもの。
- グラフィックス コマンドとテキスト出力を1つの画面で行うことはできない。
- グラフィックス画面は、全てのプログラムで共用される。
- グラフィックス画面消去には、ClrGraph コマンドを使う。
- グラフィックス画面上の描画は、ClrText や Cls を実行しない限り、残っている。
- 座標系を指定しなければ、論理座標系が使われる。
- グラフ設定コマンドで、座標軸、グリッド、X, Y ラベル をグラフィックス画面の背景として On / Off する。
- 座標値表示 On / Off は、Plot コマンドが入力待ちの時に有効になる(Plot コマンドと密接な関係)。
- fx-9860GII でも、コマンドによっては高速なグラフィックス出力が可能な場合がある。
- グラフィックス描画データは、一旦VRAMへ送られ、さらにLCDへ転送されて描画が行われる。
- グラフィクス描画は、主にLCD転送速度で決まる。
- グラフィックス描画を速くするには、LCD転送回数を減らす工夫が有効になる。
今回使ったグラフィックス コマンド
- ClrGraph
- Horizontal
- Vertical
- CoordOn / CoordOff
- GridOn / GridOff
- AxesOn / AxesOff
- LabelOn / LabelOff
- ViewWindow
- PlotOn
- F-Line
- SketchThick
つづく...
⇒ Casio Basic入門G03 / 目次
応援クリックをお願いします。励みになるので...