私がプログラミングの学習をはじめたころ，入門本を片手にサンプルコードをタイプしてコンパイルすることを繰り返していましたが，ただ書き写しているだけという感覚しか持てないでいました。しかし，ディスプレイ上に表示されるグラフィックを描くプログラムになると，同じ書き写しであるのに楽しいのです。

フラクタルであったり（図1），マウスで線を描画するような簡単なプログラムでしたが，表示された絵を視覚することを通して，ソースコードと実行結果が繋がっているように思え，プログラミングという行為を実感できたからだと思います。

ディスプレイに結果が現れるプログラムは楽しいし興味が持てる。これは一般的な感覚と異なるかもしれませんが，私にとってはプログラミングを行う主要な動機です。この連載では，Flashによるグラフィック描画のプログラミングについて解説していきます。その楽しさを感じていただければ幸いです。

Flashによるグラフィク描画

グラフィック描画の基本

はじめに，Flashでグラフィックを描画するプログラムの基本を確認しておきましょう。

以下のプログラムをご覧ください（リスト1）。実行すると線が赤，塗りが白の矩形が描画されます（図2）。

graphics.lineStyle( 0, 0xff0000 );
graphics.beginFill( 0xffffff );
graphics.drawRect( 50, 50, 200, 100 );
graphics.endFill();

プログラム中の「graphics」はグラフィックを描画するときに利用するクラス（flash.display.Graphics）のインスタンスです。Flashにはラスタ画像データ（flash.display.BitmapData）に直接ピクセルを描画するAPIもありますが，大抵はこのGraphicsクラスを使います。例で使用されているGraphicsクラスのAPIを紹介します（※1）。

線の指定（lineStyle）

描画する線の色，透明度，幅などを指定できます。線をグラデーションで描画することもできます。

塗りの指定（beginFill,endFill）

描画する塗りの色，透明度を指定できます。beginFill()からendFill()の間に記述されたシェイプ，またはパスに指定した塗りが適用されます。単色のほか，グラデーションや画像データで塗るAPIも提供されています。

シェイプ（drawRect）

シンプルな四角形を描画する関数です。このほかに楕円を描画する関数などが提供されています。

パス

例には含まれませんが，形状の頂点を個別に指定し，直線や曲線（2次ベジェ曲線）を組み合わせることで自由な形を描画できます。シェイプ（矩形や楕円）はパスで再現することができ，これが形状の汎用的な記述方法となります（リスト2）。

graphics.moveTo(  50,  50 );
graphics.lineTo( 250,  50 );
graphics.lineTo( 250, 150 );
graphics.lineTo(  50, 150 );
graphics.lineTo(  50,  50 );

まとめると「線と塗りを指定してパスで形状を記述する」ことが描画の基本だと考えていただいて結構です。

※1

Flash Player 10ではGraphicsクラスに多数APIが追加されていますが基本は同じです。

ライブラリの活用

Graphicsクラスで提供されている描画APIは前述のようにシンプルなものです。複雑なグラフィックの描画はそれらの描画APIを組み合わせることになります。この場合，同じ処理を何度も記述する，手続きが多いなど冗長なプログラムになりがちです。

そのため，グラフィック描画をプログラムする場合にはライブラリを利用することが多々あります。例えば，3Dのライブラリとして有名な「Papervision3D」を利用すれば，3次元グラフィック描画の複雑な処理を記述する必要がありません。

本連載で利用するFrocessingは，そんな描画系ライブラリのひとつです。