INDEX(各項目ごとの目次)

[HOME]  [Processing関係]  [Arduino関係]  [マテリアル関係]  [秋葉原工作マップ]

2008年用ですが、部分的に内容を更新しています(2010/06/14)。
また、[建築農業工作ゼミ2009-2010]とも連動していますので、そちらにも幾つかサンプルがあります。
:

4/20/2008

Processingの基本操作 その2

長方形を描く場合は、rect()という関数を前回用いました。
円や楕円の場合は、ellipse()という関数を用います。
rect()と同様に、ellipse()も、カッコの中に入る数値は4つ必要であり、
ellipse(X座標,Y座標,幅,高さ)によって楕円の位置や形が定義されます。
正円を描くのであれば、幅と高さの数値を同じにすればいいので、

ellipse(20,30,50,50);

のように3番目と4番目の数値が等しくなります。
同様にrect()の場合も、

rect(20,30,50,50);

なら、一辺50ピクセルの正方形となります。

rect(20,30,50,50);
ellipse(20,30,50,50);

と書けば、一辺50ピクセルの正方形の上に直径50ピクセルの円が重なって描かれます。
このとき二つの位置のXY座標は(20,30)ですが、ぴったり重なるように配置されません。
それは、円の位置を決める基準点は円の中心座標になるのですが、正方形(長方形)の場合は、左上の角が基準点になっているからです。ぴったり重なるように配置するには、どちらかの図形をずらさなければなりません。
例えば、

rect(20,30,50,50);
ellipse(20+25,30+25,50,50);

というように、円を25ピクセルずらした分だけ20+25というように数式を入れることもできます。
しかし、もう一つの方法は、ellipseMode(CORNER)という関数があり、円の基準点自体をrect()と同様に左上の角に変更することです。よって、

rect(20,30,50,50); //基準点が左上角の正方形を描画
ellipseMode(CORNER); //円の基準点を左上角に設定
ellipse(20,30,50,50); //円の描画

と書くこともできます。ellipseMode(CORNER)をellipse()の手前に書いておくことで、それ以降は左上角が基準点になります。
尚、各行のダブルスラッシュ「//」以降に書かれた内容はコメントと呼ばれ、プログラムには影響しない記述内容になります。このままRunさせてもエラーはでません。プログラムにおいてメモ書きのような説明や注釈を書き添えておきたいときは、「//」を用います。


つぎに、正方形の一辺と円の直径が同じということは、もともとのrect()の幅と高さ、そしてellipse()の幅と高さの四つの値が同じであるため、同じ値の部分を変数を用いて以下のように書くことも可能です。

int a=50;
rect(20,30,a,a);
ellipseMode(CORNER);
ellipse(20,30,a,a);

int は、aという値が整数であるというタイプを指定する記号です(もし小数点が含まれる数値ならfloatを用います)。
int a=50;と書いてaに50という整数値を代入しておきます。あとは、rect()の幅と高さ、そしてellipse()の幅と高さの四つの値にaを書いておけば、すべてが50となります。冒頭のint a=50;をint a=100;と書き直せば、正方形も円も一気に2倍の大きさに変えることができます。つまり、後々変化させたい値の部分に変数を用いれば、いちいち個別に書き直す手間が省けます。
同様に、正方形と円のXY座標値もそれぞれ同じことから、

int a=50;
int x=20;
int y=30;
rect(x,y,a,a);
ellipseMode(CORNER);
ellipse(x,y,a,a);

と書けば、xとyに異なる数値を代入することで、正方形と円の位置を一気に変えることができます。
特にたくさんの図形を用いて、それらの位置や大きさなどが連関している場合、このような変数を用いれば個別に数値を書かずに一気に変換することが容易になります。

2 件のコメント:

匿名 さんのコメント...

ProcessingとArduinoで遊ぼうと思っていますので、参考になります。
ellipleMode(CORNER)ですが、ellipseMode(CORNER)の間違いですね。
エラーが出たので、referenceに確認しました。
日本語のサンプルは本当に助かります。
では。

kousaku さんのコメント...

ellipseMode()に直しておきました。どうもありがとうございます。



[目次:Processing関係]  [HOMEへ戻る]  [目次:Arduino関係]