Processing 手描きの線の表現

Processingにおいて、rect()やellipse()のような幾何学図形ではなく、マウスを使って「手描き」の表現をする場合のサンプルです。マウスボタン（クリック）を押しながらドラッグすると、手描きのような線を引くことができ、「e」のキーを押せば画面は真っ白に戻るという内容です。

以下の画面中央（白い矩形内）に描くことができます。

Processingのプログラム：

void setup(){
  //画面サイズ幅400、高さ300
  size(400,300);
  //滑らかな描画（アンチエイリアス）
  smooth();
  //背景色を255（白）に設定
  background(255);
}

void draw(){
  //ここには何も書かなくてよい
}

//マウスドラッグ中のプログラム
void mouseDragged(){
  //線を描画
  line(pmouseX,pmouseY,mouseX,mouseY);
}

//キーが押された時のプログラム
void keyPressed(){
  //もしキーが「e」なら
  if(key=='e'){
    //背景色を白で塗り直す
    background(255);
  }
}

上のプログラムでは、mouseDragged()とkeyPressed()の時にしか描画しないので、draw(){...}内には特に書く項目はありません。線を引くには、line(x1,y1,x2,y2)というように四つの値が入り、開始点(x1,y1)から終点(x2,y2)まで線を引きます。line()内のpmouseXは、一つ前（１ループ前）のマウスのX座標値であり、mouseX()は現在のX座標値です。つまり、一つ前のマウス座標値から現在のマウス座標値まで線を引くということになります。ドラッグ中は、その内容が繰り返され連続した線になります。すべてを白紙に戻すには、キーを押したときに、background()を用いて画面全体を塗り直します。draw(){..}内にbackground()を書いておくと、描画されている線も同時に上塗りされて消えてしまうので、setup(){...}の中で、最初に一度設定しておき、線だけが重ね描きされるようにします。

Arduinoにつないだセンサから読み取った値を、シリアル通信を通してline()内に入れれば、センサによって自由な線を描くことができます。応用的な使い方を考えてみて下さい。

MVPenテクノロジーズ MVPen(エム・ブイ・ペン) 限定カラー ホワイト MVP-2

posted with amazlet at 09.03.30

MVPen (2008-08-20)
売り上げランキング: 5554

Amazon.co.jp で詳細を見る