INDEX(各項目ごとの目次)

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

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

6/05/2008

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は、一つ前(1ループ前)のマウスのX座標値であり、mouseX()は現在のX座標値です。つまり、一つ前のマウス座標値から現在のマウス座標値まで線を引くということになります。ドラッグ中は、その内容が繰り返され連続した線になります。すべてを白紙に戻すには、キーを押したときに、background()を用いて画面全体を塗り直します。draw(){..}内にbackground()を書いておくと、描画されている線も同時に上塗りされて消えてしまうので、setup(){...}の中で、最初に一度設定しておき、線だけが重ね描きされるようにします。

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

0 件のコメント:



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