２Ｄグラフィックス
２Ｄグラフィックスの基本は点や線を描くことから始まります。 ここでは、モンテカル
ロ法を使って円周率を計算するプログラムを例に説明します。
１．点の描画
座標（Ｘ、Ｙ）に点を描画したい時には、以下のように記述します。 点の種類や色は
ＳＥＴ文を使って指定できます。
ＰＬＯＴ ＰＯＩＮＴＳ ： 数値式 , 数値式
ＳＥＴ ＰＯＩＮＴ ＳＴＹＬＥ 数値式
ＳＥＴ ＰＯＩＮＴ ＣＯＬＯＲ 数値式
２．線の描画
座標（Ｘ１、Ｙ１）から座標（Ｘ２、Ｙ２）まで線を描画したい時には、 以下のように記述
します。線の種類や色はＳＥＴ文を使って指定できます。
ＰＬＯＴ ＬＩＮＥＳ ： 数値式 , 数値式 ； 数値式 , 数値式
ＳＥＴ ＬＩＮＥ ＳＴＹＬＥ 数値式
ＳＥＴ ＬＩＮＥ ＣＯＬＯＲ 数値式
それでは、モンテカルロ法を使った円周率の計算手順を説明します。円とそれに外
接する正方形を考えてください。この正方形内でランダムに点を発生させます。 こ
れらの点のうち円周上と円内で発生した点の数をカウントします。 この数を発生し
た点の総数と比較することで円周率を計算できます（点のカウント数が図形の面積
に比例する）。よって、
円周率＝４Ｘ（円周上と円内の点の数）/（点の総数）
以下に、モンテカルロ法を使った円周率の計算プログラムを示します。 十進ＢＡＳＩ
Ｃを使っています。
次に、シミュレーションの結果を示します。点の総数を１００個、１０００個、そして１０
０００個とした場合の円周率は、 それぞれ３．００００、３．０７３０、３．１５１２となり
ます（図１、図２、図３参照）。ＲＡＮＤＯＭＩＺＥという命令文をプログラム内に挿入し
ているので、シミュレーションをするたびに円周率の値は違ってきます。
＜点の総数が１００個の場合＞
（図１、十進ＢＡＳＩＣによる２Ｄグラフィックス）
＜点の総数が１０００個の場合＞
（図２、十進ＢＡＳＩＣによる２Ｄグラフィックス）
＜点の総数が１００００個の場合＞
（図３、十進ＢＡＳＩＣによる２Ｄグラフィックス）
モンテカルロ法の計算を球とそれに外接する正六面体に適用しても、円周率を計
算できると思います。３Ｄグラフィックスを使って点を表示させてみてください。
点や線については ある程度描けるようになってきたので、 次のステップとして図形
の移動について考えてみます。 平行移動、回転移動そして対称移動が基本です
が、それらを組み合わせれば複雑な移動の操作も可能となります。加えて、図形の
拡大・縮小の方法も検討します。
３．図形の平行移動・回転移動・対称移動
移動したい図形の座標点の一つを（Ｘ、Ｙ）としましょう。 平行移動をしたい場合は、
平行移動する方向の座標に移動する距離を単純に加えます。 例えば、Ｘ方向にａ、
Ｙ方向にｂだけ平行移動したいときには、移動後の座標点の値を
（Ｘ＋ａ、Ｙ＋ｂ）
にします。次に、回転移動を考えてみましょう。 既に、遠心力のところで簡単に説明
したので、ここではそこでの式を使って説明します。 回転前の座標点（Ｘ１、Ｙ１）と回
転後の座標点（Ｘ２、Ｙ２）との関係は、回転角をθとして（原点が回転の中心）
Ｘ２＝Ｘ１ＣＯＳθ＋Ｙ１ＳＩＮθ
Ｙ２＝−Ｘ１ＳＩＮθ＋Ｙ１ＣＯＳθ
となります。ただし、この場合の回転方向は時計方向となります。 したがって、回転
後の座標点の値は
（Ｘ ＣＯＳθ＋Ｙ ＳＩＮθ、−Ｘ ＳＩＮθ＋Ｙ ＣＯＳθ）
となります。最後に、対称移動を考えてみましょう。 直線ｃＸ＋ｄＹ＝ｅに対して線対
称な点（Ｘ４、Ｙ４）は、 移動する前の点（Ｘ３、Ｙ３）から上記の直線に垂線を引いたと
きの交点の座標を（ＸＣ、ＹＣ）とすると、次のような関係があります。
ＸＣ＝（Ｘ３＋Ｘ４）/ ２
ＹＣ＝（Ｙ３＋Ｙ４）/ ２
したがって、交点の座標が判れば、以下の式から線対称な点の座標を計算できるこ
とになります。
Ｘ４＝２ＸＣ−Ｘ３
Ｙ４＝２ＹＣ−Ｙ３
交点を求めて線対称な点を計算してみます。直線上の点を（ＸＰ、ＹＰ）とすると、この
点から交点に向かうベクトルと移動する前の点から交点に向かうベクトルは互いに
直交するので、
（ＸＣ−ＸＰ）（ＸＣ−Ｘ３）＋（ＹＣ−ＹＰ）（ＹＣ−Ｙ３）＝０
という関係が得られます。また、交点（ＸＣ、ＹＣ）は直線上にあるので、
ｃＸＣ＋ｄＹＣ＝ｅ
という関係も得られます。これらの二式を解くと、
ＸＣ＝（ｄ２Ｘ３−ｃｄＹ３＋ｃｅ）/（ｃ２＋ｄ２）
ＹＣ＝（−ｃｄＸ３＋ｃ２Ｙ３＋ｄｅ）/（ｃ２＋ｄ２）
が得られます。ゆえに、線対称な点の座標（Ｘ４、Ｙ４）は最終的に、
Ｘ４＝２（ｄ２Ｘ３−ｃｄＹ３＋ｃｅ）/（ｃ２＋ｄ２）−Ｘ３
Ｙ４＝２（−ｃｄＸ３＋ｃ２Ｙ３＋ｄｅ）/（ｃ２＋ｄ２）−Ｙ３
となります。
４．図形の拡大・縮小
図形を拡大・縮小する基準点を（Ｘ５、Ｙ５）とします。この基準点を原点へ移してから
図形を拡大または縮小し、その後、基準点を元の位置に戻します。 よって、拡大す
る前の点の座標を（Ｘ６、Ｙ６）とし、拡大後の座標を（Ｘ７、Ｙ７）とすると、
Ｘ７＝Ｋ（Ｘ６−Ｘ５）＋Ｘ５
Ｙ７＝Ｋ（Ｙ６−Ｙ５）＋Ｙ５
という関係が得られます。縮小する場合も上の関係式を使えます。ここで、Ｋは拡大
率または縮小率です。
上記で説明した移動や拡大・縮小を順番に行うプログラムを考えてみます。 勿論、
十進ＢＡＳＩＣを使ってプログラムを作成しています。
原点を中心とする正五角形を最初に描画し、平行移動、 回転移動そして対称移動
という順に図形を移動し描画し、最後に、 元の図形を１．５倍に拡大し描画します。
プログラムを若干修正して正多角形の角数を無限に増やして行けば、 最終的に円
を描くことになります。したがって、２Ｄグラフィックスにおいて正多角形の描画も円の
描画もプログラム自体において大差はありません。 メインプログラムには、汎用性
を持たせるために、正多角形の各頂点の座標を計算するコードを置き、正多角形の
元の図形の描画、 平行移動後の図形の描画、 回転移動後の図形の描画、対称移
動後の図形の描画、 拡大後の図形の描画などは、 メインプログラムから外部副プ
ログラムをそれぞれ呼び出して行っています。 実引数と仮引数の使い分けに注意
してください。 また、正多角形の各頂点の座標値は配列で表現しています。 ゆえに
、配列も引数として副プログラムの方へ渡されています（別ページを参照）。
プログラムの実行結果を以下に示します（図４参照）。 赤が元の正五角形、 黄がＸ
軸の＋方向に５０移動した後の図形、 緑が時計方向に６０度回転した後の図形、ピ
ンクが直線（Ｘ−Ｙ＝０）に対して線対称な図形、 そして、 最後にピンク（点線）が原
点を基準にして１．５倍に拡大した図形です。
（図４、十進ＢＡＳＩＣによる２Ｄグラフィックス）
図形の描画に時間差を付けたいときは、 図形を描画するためのＣＡＬＬ文とＣＡＬＬ
文の間に次の一文を入れてください。
ＷＡＩＴ ＤＥＬＡＹ 秒数
課題（その１）
原点が最小値（または最大値）になる二次曲線を描いて、 原点を含めてそれぞれ
が等間隔（曲線の長さで測って）にある点群に正三角形を描画してください。ただし
各正三角形の重心を上記の点群の座標値と一致させてください。 また、 正三角形
の頂点の一つが点群の座標値で取った法線の方向を向くようにしてください。 その
向きは外向きとします。
５．フリードローイング
マウスを使ったフリードローイングの方法を説明します。 マウスを左クリックして点
を拾って多角形を描画したり、 マウスを左クリックしドラッグして曲線を引いたりでき
ます。まず、 複数の点を画面上でクリックして その座標値を配列に読み込むには、
次のようにします。
ＤＩＭ Ｘ座標の配列名（１ ＴＯ 要素数）
ＤＩＭ Ｙ座標の配列名（１ ＴＯ 要素数）
ＬＥＴ Ｉ＝１
ＤＯ
ＩＦ 条件式 ＴＨＥＮ ＥＸＩＴ ＤＯ
ＧＥＴ ＰＯＩＮＴ：変数名１，変数名２
ＬＥＴ Ｘ座標の配列名（ Ｉ ）＝変数名１
ＬＥＴ Ｙ座標の配列名（ Ｉ ）＝変数名２
ＬＥＴ Ｉ ＝ Ｉ ＋１
ＬＯＯＰ
条件式を満足すれば、座標値の読み込みは終了します。 また、クリックしドラッグし
てフリーハンドで曲線を描くためには、以下のようにします。
ＤＩＭ Ｘ座標の配列名（１ ＴＯ 要素数）
ＤＩＭ Ｙ座標の配列名（１ ＴＯ 要素数）
ＭＡＴ ＧＥＴ ＰＯＩＮＴ：Ｘ座標の配列名（？），Ｙ座標の配列名（？）
ＭＡＴ ＰＬＯＴ ＬＩＮＥＳ：Ｘ座標の配列名，Ｙ座標の配列名
上記において、要素数は十分に大きくとってください。以下に、上記の方法で描いた
多角形と曲線の図を示します（図５参照）。
＜多角形や曲線のフリードローイング＞
（図５、十進ＢＡＳＩＣによる２Ｄグラフィックス）
課題（その２）
上記のプログラムにおいて、多角形や曲線をフリードローイングすると同時にそれら
の線分の長さや面積を計算して表示する機能を追加してください。
６．コピー＆ペースト
ドローイング（ お絵描き ）ソフトの基本的な機能であるコピー＆ペーストをプログラ
ム的に実現してみましょう。 図６は三角形と四角形を一つずつフリードローイングし
たものです。 各図形の頂点座標のデータは二次元配列に格納しています。第一次
元の添え字は頂点番号を表し、第二次元の添え字は図形番号を表しています。
（図６、十進ＢＡＳＩＣによる２Ｄグラフィックス）
図７は、左側の三角形をコ―ピーしてペーストするためにコピーする範囲を設定した
ものです。この範囲内に完全に含まれない図形はコピーの対象になりません。
＜点線内がコピーする範囲＞
（図７、十進ＢＡＳＩＣによる２Ｄグラフィックス）
図８は、左側の三角形が選定された後の状態を示しています（三角形の色が変化）
。
（図８、十進ＢＡＳＩＣによる２Ｄグラフィックス）
図９は、元の三角形を三か所にコピー＆ペーストした後の図です。
（図９、十進ＢＡＳＩＣによる２Ｄグラフィックス）
市販のドローイング用ソフトが持つ機能を全て実現しようとすると、 相当大規模なプ
ログラムになることが以下のプログラム例からも実感できると思います。
課題（その３）
図形を選定した後、 その図形をドラッグして徐々に移動する機能をプログラム的に
実現できるか検討してください。 また、図形内の辺や頂点を選定して特定の方向に
引き伸ばしたり、縮めたりする機能をプログラム化してください。
７．文字・記号の作成と利用
自分自身で新しい文字や記号を作成して ２Ｄグラフィックスで利用したいと思ってい
る方も少なくないと考えます。 そういう方のために、 文字や記号をデータ化してプロ
グラム内で使う方法を検討してみます。 図１０は２０Ｘ２０のビットマップです。作りた
いパターン形状に合わせて 特定のビットの色を変えることで 文字と記号を作成しま
す。
（図１０、十進ＢＡＳＩＣによる２Ｄグラフィックス）
図１１は将棋の駒に使われる玉の文字をビットマップを使って表したものです。
（図１１、十進ＢＡＳＩＣによる２Ｄグラフィックス）
上図のビットマップをデータ化するためには、二次元配列を使い黒い部分のビットに
対応する配列の要素を１とし、緑のビットに対応する要素を０とすれば良いでしょう。
課題（その４）
将棋の駒に書かれている表・裏の文字をビットマップを使って作成し、 二次元配列を
用いてデータ化してください。 よりリアルな文字を作るためには、ビットマップのビット
数を大幅に増やす必要があるかもしれません。
８．スクロール機能