この論文と研究内容「CG（前期）論教材Webページ」の作成にあたって、ゼミの森田先生、CG論を教え、配布プリントを使う事を許可してくれた皆川教授、ゼミで一緒に学んできたゼミ生の皆さん、そして大学へと行かせてくれた親、親族の皆さんにここで感謝の意を表します。
文献[１] 高作義明・浅輪洋子(2000) 『はじめてのホームページ・ビルダー2001』ナツメ社
文献[２] 札幌学院大学社会情報学部(2000)『プログラミングB－Delphi入門－』
文献[３] 札幌学院大学皆川教授『コンピュータグラフィックス論 講義資料(1)～(9)』
□「三角比の計算（８章）」の解説：――――――――――――――――――――――
解説：８－１
ほとんどの人が知っていると思うが、三角比の復習をしよう。
同じように、ｃ＝30 の時のｂの値を求めてみよう。
ここで使うのは cosの方である事はわかるだろう。
cosA = b/c より b = c×cosA
よって、b = 10√３ となる。
覚えておくことは、ここで求めたaはyの値であって、ｂはxの値である事である。
半径をｒとすると、
( x,y ) = ( r×cosA , r×sinA )
という事になる。ちなみに、
sin(0) = 0 , cos(90) = 0である。
□ 「花のCG（１０章）」の 関数： の解説――――――――――――――――
解説：１０－１
今回のプログラムには以前使った手続き function が使われている。
プログラムの前半部分 (procedure TForm1.Button1Click(Sender: TObject);) はここではもう詳しく説明しない。今までと同じ事をしているからである。只、y2 の値が function の部分で求められ、返ってきて線を引くプログラムである。
次のようにプログラムを変えて、それぞれの値がどのように変わっていくかを見ていこう（分かりやすいように4分割にした）。
var
Form1: TForm1;
function power_calc( n:integer; x:real ): real ;
implementation
{$R *.DFM}
procedure TForm1.Button1Click(Sender: TObject);
var i , pw, xc, yc, n_div: integer;
scale, dx, x1, y1, x2, y2 : real;
begin
xc := 50;
yc := 450;
scale := 400;
n_div := 4;
dx := 1 / n_div;
for pw := 1 to 2 do begin
x1 := 0;
y1 := 0;
for i := 1 to n_div do begin
x2 := x1 + dx;
y2 := power_calc( pw, x2 );
Canvas.MoveTo( xc + round(x1*scale), yc-round(y1*scale) );
Canvas.LineTo( xc + round(x2*scale), yc-round(y2*scale) );
y1 := y2;
x1 := x1 + dx;
end;
end;
end;
function power_calc( n:integer; x:real ) : real;
var i : integer;
val : real;
begin
val := 1;
for i := 1 to n do begin
val := val * x;
end;
power_calc := val;
end;
end.結果：
ｐｗ＝２の時を例に取り値を考える。
１、まず ｄｘ には 1/4 が入るので x2 は 1/4 が入る（普通に考えると作図点から数え
１つ目の頂点の座標を求めようとしている）
２、pw は ２
３、手続き function に行く（ n には pw 、x には x2 が入る）
４、val は 1 に初期化されている
５、i = 1 の時（ i は 1 から 2 まで）は、val := val * x より、val は x2 となる
６、i = 2 の時は、val := val * x より、val は x2 * x2 、つまり x2 の二乗となる
７、val の値が power_calc に返される（ val の値はここでは 1/16 ）
８、x2 ⇒ 1/4 、y2 ⇒ 1/16 となっている
９、Canvas.MoveTo の命令で、ｘ座標は ⇒ xc + round( x1 * scale ) ⇒ 50
ｙ座標は ⇒ yc - round( y1 * scale ) ⇒ 450座標（ 50,450 ）に移動する
１０、Canvas.LineTo の命令で、ｘ座標は ⇒ xc + round( x2 * scale ) ⇒ 150
ｙ座標は ⇒ yc - round( y2 * scale ) ⇒ 450 - 25 = 425座標( 150,425 ) まで線を引く
１１、y1 := y2; と、x1 := x1 + dx; のプログラムにより x1 と y1 の値が変わり、そしてまた計算し始める
１２、座標（ 150,425 ） から 座標（ 250,350 ） まで線を引く（ i が２の時の値）
１３、後はこの繰り返し ： i = 3 の時 ⇒ ( 350.225 ) まで、 i = 4 の時 ⇒ ( 450,50 ) まで線を引く
このように頂点を繋いでいく絵を、分割数を大きくすればｘの二乗の絵が描ける
（１００分割）
□ 「正方形で絵を描く（4-1）」講義資料[３]の内容――――――――――――――――
４－１ ピラミッド型の作図
正方形を並べて下図のようなピラミッド型を描いてみよう。
これまでの知識を利用して、この図形を描く。まず、縦横に正方形を並べることを基本とし、指定された条件が満たされた場合には、その位置で正方形を描き、それ以外の場合には描かない。プログラミングを行なう上では、繰返しのfor文を２重にしておき、その中で必要な条件文を入れることになる。
この図形の場合には、行数が増加するごとに、四角形を描く領域の幅が左右に正方形１個分ずつずれていっているので、このことを表現すればよい。プログラムは次のようになる。
プログラム）
procedure TForm1.Button1Click(Sender: TObject);
var x, y, w, i, j , p1, p2 : integer;
begin
x := 100;
y := 100;
w := 20;Canvas.Brush.Color := clGreen;
p1 := 10; （左の描き始め位置初期化）
p2 := 10; （右の描き始め位置初期化）for i := 1 to 10 do begin
for j := 1 to 19 do begin
if ( j >= p1 ) AND ( j <= p2 ) then begin （描く範囲に関する条件）
Canvas.Polygon( [ Point(x,y),
Point(x+w,y),
Point(x+w,y+w),
Point(x,y+w) ] );end;
x := x + w;
end;
p1 := p1 - 1; （左の描き始め位置を左に1個分移動）
p2 := p2 + 1; （右の描き始め位置を右に1個分移動）x := 100;
y := y + w;end;
end;
□ 「再帰を用いた作図（7-5）」講義資料[６]の内容――――――――――――――――
７－５ 再帰を用いた簡単な作図例（図形の座標系から画面座標系への変換）
以下の例で、図形の原点と画面上の原点との対応付けを復習しておこう。
この図を描くためのプログラムは次の通りである。
（先頭部分省略）
var
Form1: TForm1;
xc, yc : integer; （作図の中心位置）
procedure rectangle_draw(xs, ys: integer; len:real); （長方形を描く手続きの宣言）
implementation
{$R *.DFM}
procedure TForm1.Button1Click(Sender: TObject);
var len : real;
xs, ys : integer;begin
xc := 300;
yc := 300;len := 200;
xs := 0;
ys := 0;rectangle_draw(xs, ys, len);
end;
procedure rectangle_draw(xs, ys : integer; len:real);
var xe, ye, w : integer;
begin
w := round(len);
xe := xs + w;
ye := ys + w;if ( len > 3 ) then begin
Form1.Canvas.Rectangle(xs+xc,yc-ys,xe+xc,yc-ye);
len := len / 2;
rectangle_draw(xs,ys,len);
end;
end;
end.
※ Canvas.Rectangleの座標の与え方が、前回の例とは異なっていることに注意しよう。