目次

利用するProcessing基本事項

 Processingは、Javaベースの高級言語とされています。

 ProcessingのコードはGUI(Graphic User Interface)を利用するのが
 基本なので、次の3つの関数を理解しておきます。

 各関数の役割を頭の中に入れておきます。

 setup

  システム初期化を担当する関数です。
  初期化では、以下を覚えておけば充分でしょう。


 draw

  GUIの画像描画に関連する処理を担当します。

  塗りつぶしには、組込みfill関数を利用。

  図形描画の場合、次の組込み関数を利用していきます。

 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);
  } 
}

 起動すると、次のような図形が表示されます。



 マウスの左ボタンクリックで、背景が白に変化。
 (直線描画の線が見えるようになります。)



 マウスの右ボタンクリックで、最初の背景に戻ります。




目次

inserted by FC2 system