目次
前
次
利用するProcessing基本事項
Processingは、Javaベースの高級言語とされています。
ProcessingのコードはGUI(Graphic User Interface)を利用するのが
基本なので、次の3つの関数を理解しておきます。
各関数の役割を頭の中に入れておきます。
setup
システム初期化を担当する関数です。
初期化では、以下を覚えておけば充分でしょう。
- タイトル指定
- フレームレート指定
- Windowサイズ指定
- 画像ファイル入力
- 初期画面表示
- 通信速度指定
draw
GUIの画像描画に関連する処理を担当します。
塗りつぶしには、組込みfill関数を利用。
図形描画の場合、次の組込み関数を利用していきます。
- triangle
- rect
- ellipse
- line
- point
mouseClicked
Personal ComputerのGUIでは、最も利用頻度が高い
pointing deviceは、マウスでしょう。
マウスからのイベントを処理は、関数mouseClickedの
内容を定義することと等価。
マウスに関係する情報は、次のようにまとめられます。
位置
mouseX マウスカーソルのX座標
mouseY マウスカーソルのY座標
ボタン状態
mouseButton
LEFT クリックされたのは左ボタン
CENTER クリックされたのは中央タン
RIGHT クリックされたのは右ボタン
ここまでの基本事項を頭に入れて、Processingのスケッチを作成。
int FRATE = 30 ;
int WX = 300 ;
int WY = 300 ;
int XBEGIN = 100 ;
int YBEGIN = 100 ;
int WIDTH = 150 ;
int HEIGHT = 150 ;
void setup()
{
/* title caption */
frame.setTitle("Test 01");
/* select framerate */
frameRate(FRATE);
/* select displya dimension */
size(WX,WY);
/* select back ground color with BLACK */
background(0);
/* noFill(); */
}
void draw()
{
/* circle */
{
/* select color */
fill(255,255,0);
/* show */
ellipse(XBEGIN,YBEGIN,WIDTH,HEIGHT);
}
/* straight line */
strok(255,255,255);
line(250,250,200,200);
}
void mouseClicked()
{
/* click left button */
if ( mouseButton == LEFT ) {
background(255);
}
/* click right button */
if ( mouseButton == RIGHT ) {
background(0);
}
}
起動すると、次のような図形が表示されます。
マウスの左ボタンクリックで、背景が白に変化。
(直線描画の線が見えるようになります。)
マウスの右ボタンクリックで、最初の背景に戻ります。
目次
前
次