P5
p5js

setupとdraw

初期化関数とメインループ関数

Processing を使ったプログラミングでは、初期化関数( setup 関数)とメインループ関数( draw 関数)という２つの関数を使ってプログラムコードを構成するというスタイルが一般的に行なわれます。

この２つの関数は他の関数とは少し異なる特殊な関数で、プログラムが実行される際に特定の順番で実行されるようになっています。プログラムの実行ボタンを押してプログラムの動作が開始すると、まずはじめに初期化関数内に書かれたコードが実行されます。その後、メインループ関数内に書かれたコードがコードが実行されます。他の関数と異なり、メインループ関数内に書かれたコードは無限ループのように何度も繰り返し実行されます。ウィンドウを消したり停止命令を出したりしない限り止まることはありません。


簡単なコードを用いてこの２つの関数の挙動を確認してみましょう。

マウスクリックで描画がリセットされます(ブラウザ上のみ)。

コード

// setup関数：最初に実行される
void setup(){
  size( 600, 400 ); // 600 x 400 のウィンドウを開く
  background( 0 ); // 背景色を 0 にする
}

// draw関数：関数内の処理が無限に繰り返される
void draw(){
  stroke( 150, 255, 255, 60 ); // 線の色の R, G, B および不透明度の値を指定
  line( 0, 200, 600, sketch.random(400) ); // 線を描画する
}

draw関数内で line 関数を使って線を引いています。draw 関数はプログラムの実行中常にその処理内容が繰り返されるため、線は１つだけではなくいくつも書き加えられて行くことになります。

noLoop()とloop()命令

noLoop()命令を使うと、draw関数内の処理が一度しか行なわれないようにすることができます。 

void setup(){
  size( 600, 400 );
  background( 0 );
  noLoop(); // draw関数のループを停止させる
}

void draw(){
  stroke( color(150, 255, 255), 60 );
  line( 0, 200, 600, random(400) );
}

void mousePressed() {
  loop(); // draw関数のループを再開させる
}

void mouseReleased() {
  noLoop(); // draw関数のループを停止させる
}

このプログラムを実行すると、画面には線が１つだけしか引かれません。setup 関数内で noLoop()命令を使っているので、draw 関数のループが停止しているからです。このように、noLoop()命令を使うことで draw 関数のループを停止させることができます。

draw 関数のループを再開させたい時は loop()命令を使います。この例では、マウスボタンが押された時に loop()命令が実行されるようにしています。プログラムを実行して、画面内にカーソルを合わせてマウスボタンを押してみて下さい。ボタンが押されている間だけ、線の描画が繰り返されます。ボタンを離すと noLoop()命令が実行され、draw 関数のループは停止します。

フレームレート

frameRate 関数を使うことで draw 関数の実行スピードを変えることができます。 

void setup(){
  size( 600, 400 );
  background( 0 );
  frameRate( 10 ); // 10fpsでdraw関数を実行する
}

void draw(){
  stroke( color(150, 255, 255), 60 );
  line( 0, 200, 600, random(400) );
}

１秒間に何回のペースで draw 関数が実行されるかを frameRate 関数を使って変更できます。例では 10 を与えているので、10fpsで線の描画が行なわれます。

コメント

Copied title and URL