[BASICのはじめ方] Part22: シンプルなグラフィックデモ

これまで学んだグラフィック命令を使って、簡単なアニメーションを作成してみましょう。

はじめに

いよいよミニプロジェクトの時間です！🎉 これまで、画面に点を打つ (PSET)、線 (LINE) や円 (CIRCLE) を描く方法を学びましたね。今回は、これらの知識を組み合わせて、画面上で図形が動くような「シンプルなグラフィックデモ」を作成します。プログラミングの楽しさを実感できるステップですよ！

1. 画面の準備：グラフィックモードへ切り替えよう

まず、グラフィックを描画するためには、画面をテキストモードからグラフィックモードに切り替える必要があります。多くの場合、SCREEN 命令を使用します。どのモード番号を使うかは、使用しているBASIC処理系によって異なりますが、ここでは一般的な例を示します。

' 画面モードを VGA 320x200 256色モードに設定する例 (QBasicなど)
SCREEN 13

' FreeBASIC など、より高解像度なモードを使う例
' SCREENRES 横ピクセル数, 縦ピクセル数, 色数
' 例: 640x480 256色モード
SCREENRES 640, 480, 8

ヒント💡: 使用しているBASICのドキュメントで、利用可能なSCREENモードを確認しましょう。FreeBASICでは高解像度モードを指定できる SCREENRES が推奨されることが多いです。QBasicなどでは、SCREEN 13 (320×200, 256色) がよく使われます。

2. 図形を描画して動かす：円のアニメーション

画面の準備ができたら、図形を描いてみましょう。ここでは、画面中央に円を描き、それを左右に動かす簡単なアニメーションを作成します。

必要な要素は以下の通りです。

円を描画する: CIRCLE (x, y), 半径, 色
動きを作る: ループ処理 (DO...LOOP や FOR...NEXT) を使って、円の中心座標 x を少しずつ変える
座標を保持する変数: 円の中心座標 (x, y)、移動方向 (dx) などを変数で管理する
ちらつきを防ぐ(簡易版): 描画する前に前の円を背景色で消す
速度調整: 処理を一時停止する命令 (SLEEP など) を使う

' 画面モード設定 (環境に合わせて変更してください)
SCREEN 13 ' 例: QBasic 320x200 256色モード

DIM x AS INTEGER    ' 円の中心x座標
DIM y AS INTEGER    ' 円の中心y座標 (今回は固定)
DIM dx AS INTEGER   ' x座標の変化量 (移動方向と速度)
DIM radius AS INTEGER ' 円の半径
DIM circleColor AS INTEGER ' 円の色
DIM bgColor AS INTEGER ' 背景色 (消去用)

' --- 初期設定 ---
x = 160         ' 画面の横中央あたりから開始
y = 100         ' 画面の縦中央あたり
radius = 20     ' 半径を20ピクセルに
circleColor = 14 ' 明るい黄色 (色はモードによって異なります)
bgColor = 0     ' 背景色 (通常は0が黒)
dx = 2          ' 1フレームあたり2ピクセル右に移動

' --- メインループ ---
DO
    ' 1. 前のフレームの円を消す (背景色で同じ場所に描画)
    CIRCLE (x, y), radius, bgColor

    ' 2. 円の中心座標を更新
    x = x + dx

    ' 3. 画面の端に来たら移動方向を反転
    '    (円の半径も考慮して判定)
    IF x + radius > 319 THEN ' 右端チェック (320x200モードの場合)
        x = 319 - radius ' 端にめり込まないように調整
        dx = -dx         ' 左向きに反転
    ELSEIF x - radius < 0 THEN ' 左端チェック
        x = radius       ' 端にめり込まないように調整
        dx = -dx         ' 右向きに反転
    END IF

    ' 4. 新しい位置に円を描画
    CIRCLE (x, y), radius, circleColor

    ' 5. 少し待機 (速度調整) - 環境に合わせて命令を選択
    ' FOR i = 1 TO 500: NEXT i ' 古いBASICでの時間稼ぎループ例
    SLEEP 10, 1 ' FreeBASIC などでの待機例 (10ミリ秒, 1はキー入力待ちをしないオプション)

LOOP UNTIL INKEY$ <> "" ' 何かキーが押されたらループを抜ける

END ' プログラム終了

注意点⚠️:

上記のコードは特定のBASIC処理系（QBasicやFreeBASICなど）を想定した例です。変数宣言の AS INTEGER や SLEEP 命令など、お使いの環境に合わせて調整が必要な場合があります。
座標の範囲 (319 や 199) は、SCREEN で選択したモードの解像度に合わせてください。
色の番号（circleColor = 14, bgColor = 0）も、選択した画面モードによって使える色や番号が異なります。
より滑らかなアニメーションを実現するには、ダブルバッファリングなどの高度なテクニックがありますが、ここでは基本を理解するためにシンプルな方法を採用しています。

3. 発展：色々な図形や動きを試してみよう！

基本の動きが作れたら、さらに工夫してみましょう。アイデア次第で様々なデモが作れます！

図形の変更: CIRCLE の代わりに LINE や PAINT を使って、線や四角形を動かしてみる。
ランダムな動き: RND 関数を使って、図形の位置、色、移動方向をランダムに変えてみる。星が瞬くようなデモなどが作れます。
カラフルに: ループの中で COLOR 命令（または描画命令の色指定部分）を変えて、図形の色を変化させる。
マウスやキー入力への反応: INKEY$ やマウス入力関数（処理系による）を使って、ユーザーの操作で図形を動かしたり、描画パターンを変えたりする。
複数の図形を動かす: 配列を使って複数の図形の座標や色を管理し、それぞれを動かす。

例えば、画面上にランダムな位置にカラフルな点を打ち続けるデモは、PSET と RND、ループ処理だけで簡単に作れます。

SCREEN 13 ' 例: 320x200 256色モード
RANDOMIZE TIMER ' 乱数の種を設定 (毎回違うパターンにするため)

DIM x AS INTEGER, y AS INTEGER, c AS INTEGER

DO
    ' ランダムな座標 (x, y) を決める
    x = INT(RND * 320) ' 0 から 319 の範囲
    y = INT(RND * 200) ' 0 から 199 の範囲

    ' ランダムな色を決める (1から15の範囲など、モードによる)
    ' 0は背景色として使われることが多いので避ける
    c = INT(RND * 15) + 1

    ' 点を描画
    PSET (x, y), c

    ' CPU使用率を下げるための短い待機 (任意)
    SLEEP 1, 1

LOOP UNTIL INKEY$ <> "" ' 何かキーが押されたら終了

END

まとめ

今回は、シンプルなグラフィックデモの作成を通して、SCREEN, CIRCLE, PSET, COLOR といった描画命令と、DO...LOOP などの制御構文、変数や条件分岐を組み合わせる実践的な方法を学びました。自分のアイデアを形にする楽しさを感じていただけたでしょうか？🚀

これでミニプロジェクトのステップは完了です！ BASICプログラミングの基礎から応用まで一通り学習を進めることができました。この経験を活かして、さらに面白いプログラム作りに挑戦してみてくださいね！😊

参考情報

より詳しい情報や他のテクニックについては、以下のリソースも参考にしてみてください。

FreeBASIC Wiki (Graphics): https://www.freebasic.net/wiki/wikka.php?wakka=FBWiki (FreeBASICのグラフィック関連ドキュメント。英語ですが情報が豊富です。)
QB64 Wiki (Graphics): https://github.com/QB64Official/qb64/wiki#graphics (QBasic互換のQB64に関するグラフィック情報。SCREENモードや各描画命令の使い方が参考になります。)
Pete’s QBasic Site (Graphics Tutorials): https://petesqbsite.com/sections/tutorials/graphics/ (QBasic/QuickBasicのグラフィックチュートリアル集。基本的な描画からアニメーションテクニックまで解説されています。)