25:図形を描いてみよう

◆PROCESSINGで始めるゲーム作りとコンピュータ

Thunder 25:図形を描いてみよう

今日の話題

 

00:点を打ってみよう

これまでは、やや理屈っぽい説明が多かった事だと思います。理屈ばかりじゃ、ちっとも面白くありません(笑)。

そこでここからは、実際に手を動かしながらPROCESSINGのプログラミング知識を身につけていきましょう。

最近は便利な世の中になったもので、ちょっとしたプログラムであればダウンロードしたり、Web画面からコピー&ペーストで手に入れる事が可能です。

もちろん、それらの方法が悪いわけではありません。それらも1つの方法ですが、物事を早く覚えるためには「自分で1行1行て入力して動かしてみる事」をオススメします。

泳ぎを覚えるとき水泳の解説書をながめているだけでは、いつまでたっても泳げるように
はなりませんよね(笑)。

それといっしょで、プログラミングもWebや本でながめるだけではなくて、実際に自分の手で入力して動かしてみると、より早く覚えることができます。

今後いろいろなサンプルプログラムが登場しますが、ぜひPROCESSINGを手に入れて、入力して動かしてみてください。

水泳(画像URL:illust-AC 様:えびてんさん)

PROCESSINGの入手とインストール方法は「10:PROCESSINGを手に入れよう」で解説しています。

ゲームなどではUFOや飛行機が画面を飛び回りますが、PROCESSINGは簡単に絵や図形を描くことができるのが特徴です。

まずは、図形を表示するためにPROCESSINGの座標系について覚えましょう。

PROCESSINGが扱う座標系には、2D(二次元:平面)と3D(三次元:立体)があります。

数学で使う2Dの座標は、以下の様なものです。

数学の座標縦がY軸、横がXが軸で、原点から見て右上のほうが正(+)、左下のほうが負(ー)となっています。

一方PROCESSINGでは、以下の様な座標系を使います。
PROCESSINGの座標
縦がY軸、横がXが軸なのは一緒ですが、右下が正、左上が負になります。初期状態では、実行結果ウィンドウの左上隅の座標が原点(0, 0)となっています。

まずはこの事をよく覚えておいてください。

これから先のプログラムはContinuous(コンティニューズ:連続)モードで作成しますので、初期化関数( setup関数 )と描画処理関数( draw関数 )を「Sample01-1」のように準備してください。

Continuous(コンティニューズ:連続)モードって何?と思われた方は「18:オブジェクト指向とクラス」記事を参考にしてくださいね。

Sample01-1

なんの変哲もないシンプルな雛形です(汗)。ここに点を打つプログラムを追加していきます。

追加する位置は、描画処理関数(draw)の中です。

PROCESSINGで点を打つ命令は point() です。以下のように使います。

point():点を打つ

●代表書式
void  point(  int     x,  int      y  ) ;

●引数
x:点を打つ横位置。
y:点を打つ縦位置。

●戻り値
なし

●使用例
point( 70, 30 ) ;   //x=70、y=30の箇所に点を打つ

.
代表書式の読み方ですが、
sampleFunc
のようになります。

ここで紹介している書式は「ある命令の代表的な書き方(例)」になります。全てではありません。紹介したケース以外にも異なる使い方がありますので、詳しくは「公式リファレンス」を参照してください。

point命令には戻り値がありません。戻り値が無い事を void(ボイド)といいます。ボンドはイギリスの諜報部員(007)ですが、ボンドじゃありません。ボイドです(笑)。

spy(画像URL:www.007.com 様)

引数は2つあって、それぞれ点を打つx(横)座標とy(縦)座標になります。

ではさっそく、X=70、Y=30 の座標に小さな点を打ってみましょう。point命令を上記雛形に追記します。追記した結果は「Sample01-2」のようになります。

Sample01-2

<出力結果>
smallPointSample
点が小さくて見えにくい(汗)と思いますが、右上に黒い点があるのがわかるでしょうか?。

これは以下の様な感じで横70ピクセル、縦30ピクセルの箇所に、1ピクセルの点を打っているのです。
smallPointSample2実行結果ウィンドウの描画領域の大きさは、初期状態で横縦ともに100ピクセルあります。ですので、横(x)70ピクセルの箇所は画面真ん中より「やや右」、縦(y)30ピクセルは画面真ん中より「やや上」の箇所になります。

 

01:点の大きさや色を変更する

点を見やすくするために、こんどは点の大きさを変えてみましょう。

点の大きさを変更するには strokeWeight() 命令を使います。

strokeWeight():点や線の幅を変更する

●代表書式
void   strokeWeight(  float  weight ) ;

●引数
weight :点または線の大きさ(幅)を指定します。

●戻り値
なし

●使用例
strokeWeight( 8 ) ;   //点や線の幅を8ピクセルにする

.
strokeWeight() 命令は、点だけではなくて線の太さを変更するときにも使います。今回のサンプルでは、それぞれ1、4、8ピクセルの点を打ってみたいと思います。

Sample01-3

<出力結果>
smallPointSample3
右斜め上から、1、4、8ピクセルの大きさの点を打っています。点と座標の関係は下図のようになります。
smallPointSample4
今回のサンプルでは、点を描画する処理をdrawDot() という関数にしています。drawDot() 関数を描画処理関数(draw)から呼び出しているのがわかるでしょうか?。

drawDot() 関数には引数が3つあります。それぞれ点を打つ位置(xとy)と、点の大きさ(w)になります。

関数が void  drawDot(…  と書かれている事からわかるように、drawDot() 関数には戻り値がありません。単純に点を描画するだけの処理なので、呼び出し元に処理結果を戻さないのです。

いつも黒い点ばかりでは面白くありませんから、今度は点に色をつけてみましょう。点や線の色は stroke() 命令で変更します。

stroke():点や線の色を変更する

●代表書式
void  stroke(  int  R,  int  G,  int  B  ) ;
void  stroke(  color  iro )  ;

●引数
R,G,B :点または線の各色成分を 0 – 255 の範囲で指定します。
iro : color命令で作成したRGB色を指定します。

●戻り値
なし

●使用例
stroke( 0, 0, 255 ) ;   //点や線の色を青にする

.
stroke() 命令はstrokeWeight() 命令と同じで、点だけではなくて線の色を変更するときにも使います。

色はご存知のように、光の三原色(赤(R)・緑(G)・青(B))の組み合わせで出来上がっていますよね。テレビの液晶も赤と緑と青のぞれぞれの光をだす小さな粒が集まってできあがっています。

三原色(画像URL:FNの高校物理 様)

PROCESSINGでは、それぞれの色成分(RGB)の濃度を、0(全く色がない状態)から255(完全に色がある状態)の256段階で指定して、それぞれを混ぜあわせた色を作り出すことが可能です。

RGBの3つの色を混ぜあわせて色を作り出す命令が color() です。3つの色を256段階で混ぜあわせる事により、256×256×256 = 約1677万 もの色を作り出すことができます。

color():色を作成する

●代表書式
color  c  =  color(  int  R,  int  G,  int  B  ) ;
color  c  =  color(  int  R,  int  G,  int  B,  int  alpha  ) ;

●引数
R,G,B :点または線の各色成分を 0 – 255 の範囲で指定します。
alpha:0 – 255 の透明度を指定します。0が完全透明、255が完全不透明です。

●戻り値
c : 作成したRGB色です。

●使用例
color  c  =  color( 255,0,0 ) ;   //赤を作成する

.
color()命令にはRGBの3つの濃度だけでなく、alpha値を与える事も可能です。

alpha値とは透明度の事です。0が完全に透明(透けて見える)状態で、255が不透明(普通の状態)になります。

color() 命令が作り出す色情報は color型です。color型とはPROCESSINGが扱う独自の型で、色を扱う専門の型になります。PROCESSINGで色情報を扱うときは color型を使うと覚えていただければOKです。

もう少しだけ詳しくいうと、color型はint型と同じ情報量を扱える型になります。ですので color型はint型で代用できます。

下記サンプルではこの事を利用して、color()命令を使って色を指定する方法以外にも、int型で色を指定しています。

Sample01-4

<出力結果>
stringSample
上記サンプルでは、color()命令を使って色を作成するケース(redとpink)と、int型で色を指定するケース(blue、green)を載せています。

Webページのデザインを手がけて見える方は、#RGB形式での色指定に馴染みがある事だと思います。PROCESSINGでも同じことが可能です(blueの例)。

また 0xARGBの形式で、16進数として色を指定する事もできます(greenの例)。もちろん全て color() 命令で作成してもOKです。

上記サンプルでは、色付きの点を打つためにdrawDot() 関数に色を受け取る引数を追加しています。

PROCESSINGでは、点以外にも、線や四角形、三角形、円などを簡単に描くことができます。

ゲームでは、あらかじめ用意された綺麗な絵を表示する事が主で、単純な線や図形を描くことはあまりありません。でも点や線の描き方を理解する事は、PROCESSINGが扱う座標系の知識を習得するのには役立ちます。

 

02:実行結果ウィンドウの大きさを変える

これまでのサンプルでは縦横100ピクセルの小さな範囲に点を描いていました。

最近のPCでは大きな解像度の表示が可能ですので、実行結果ウィンドウの大きさを変更してみましょう。

実行結果ウィンドウの大きさ(描画領域の大きさ)を変更するには、size()命令を使います。

size():描画領域の大きさを変更する

●代表書式
void  size( int  width,   int  height ) ;

●引数
width:描画領域の幅を指定します。
height:描画領域の高さを指定します。

●戻り値
なし

●使用例
size( 300, 500 ) ;   //横300、縦500の縦長の描画領域にする

.
以下の例では、描画領域のサイズを横300ピクセル、縦400ピクセルにしています。

Sample02-1

<出力結果>
sizeSamplesize()命令を使う上では、いろいろと注意があります。

それは

  • 必ず初期化関数(setupまたはsettings)の中で使う事
  • 1回だけしか使えない事
  • 縦横のサイズは直接数値で指定する事

です。

ですのでsize()命令を draw()関数の中や、draw()関数から呼び出す別関数の中で使ってはいけません。また2回以上使うのもNGです。width と height を変数で与えてもいけません。

以下の例は全てエラーとなります。

Sample02-2

いろいろと制限の多い子です(汗)。

PROCESSING2.xの時代は、もうすこし緩やかな制限だったのですが、3.x以降厳しくなりました(泣)。

初心者の方は、「size()命令は初期化関数(setup)の先頭で1回だけ使うもの」だと覚えておいてください。

それでは困る・・・というベテランさんには「実行結果ウィンドウの大きさを指定するには(3.X用)」の記事が参考になるかと思います。興味がある方は参照してみてください。

 

Forest今日の言葉

・void(ボイド)

戻り値が無い事を示す記号です。正確には「何もない」という意味の型になります。戻り値がない関数宣言でよく使われます。

 

scroll今日の文法

・point()命令

point( x, y ) ;  のように利用し、(x,y)の位置に点を打ちます。

・strokeWeight()命令

strokeWeight( weight ) ;  のように利用し、点の大きさをweight ピクセルに変更します。点だけではなく線の太さを変える場合にも利用します。

・stroke() 命令

stroke( R, G, B ) ; のように利用し、点の色を変更します。  点だけではなく線の色を変える場合にも利用します。

・color() 命令

color  c  =  color( R, G, B ) ;  のように利用し、RGBを混ぜあわせた色を作成します。

・size() 命令

size( width,   height ) ;  のように利用し、実行結果ウィンドウの描画領域の大きさを変更します。ただし widthとheight は変数で与えてはいけません。

 

 今日のまとめ

  • PROCESSINGの座標系はXが右、Yが下に行くほど大きくなる
  • PROCESSINGは点や線、円などを簡単に描画できる
  • size()命令はいろいろ制限があるので注意して使う

26:画像を表示する へ進む
24:IntelliJ IDEAでPROCESSINGを楽しむ へ戻る
目次へ戻る


本ページで利用している特に参照元記載のないアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。