p5.js

デバッグの書

Posted on by pasocafe00 / 0件のコメント

○秒待つ

Scratchでお馴染みの「○秒待つ」ブロック。アニメーションや動きの速度調整でよく使いました。この機能は、調整だけでなく、デバッグの時に、動きをゆっくりにして動作を観察したい時にもお世話になったのではないでしょうか？

こんな時、線の描画を一本ずつ確認してみたくなりませんか？

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background("#fbeded");
  stroke("#fb9dad");
  strokeWeight(10);
  
  for(let i = 0; i < 400; i=i+25) {
    line(0, i, width, i);
  }
  // このコードではすべての線が一気に描かれます！
}

とても便利な「○秒待つ」ですが、p5.jsには「○秒待つ」に相当する命令がありません。一気に描かれてしまいます。

えー😱と思ってしまったそんなあなたに、互換機能の作成法を紹介します。JavaScriptに備わっている高度な命令を組み合わせて、「○秒待つ」的な命令を作ってみましょう。

ソースコードを見ると、なんだか難しそうな命令が出たり、少し長くなってしまいましたが、構造を理解すると、案外難しくありません。説明はこの後しますので、とりあえず、ソースコードをコピペして実行してみて下さい。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function setup() {
  createCanvas(400, 400);
  drawTest();
}

async function drawTest() {
  background("#fbeded");
  stroke("#fb9dad");
  strokeWeight(10);
  
  for(let i = 0; i < 400; i=i+25) {
    line(0, i, width, i);
    await sleep(100); // 0.1秒待つ
  }
}

○秒待つの互換機能の構造を紹介します。使わない場合との違いを雛形で比較してみましょう。

通常のコード

draw()関数内にコードを記述していきます。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  // コードを書く
}

○秒待つを使いたい場合

関数が増えたり、drawがdrawTestになっていたり、違う点がいくつかあります。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function setup() {
  createCanvas(400, 400);
  drawTest();
}

async function drawTest() {
  background("#fbeded");
  // コードを書く。
  // 止めたいところに await sleep(100); を使う
}
  • sleep()関数を作る。
  • setup()関数の最後にdrawTest()関数を呼ぶ。
  • ソースコードはdrawTest()関数内に記述する。
  • 止めたいところがあれば、await sleep(100);を書く。

setTimeout()だけじゃダメなの？

JavaScriptのsetTimeout()は非同期で、すぐ次の処理に進んでしまいます。でもawait をつけることで、次の処理をちゃんと「待つ」ことができます。

なんでdraw()じゃないの？

通常の draw() では await が動かないので、drawTest() のような代替え（名前は何でも良い）の async 関数を作ります。また、draw()のように自動では動かないので、setup()関数の最後で呼び出すようにしています。

ないものは自分で作る！

Scratchでは、「○秒待つ」みたいなブロックが最初から用意されていて、手軽に使えて便利でした。でも、「こんな機能があればいいのに！」と思ったことはありませんか？

実は、JavaScript などのプログラミング言語では、最初から何でも揃っているわけではありません。 でも、その分「ないものは自分で作れる」のが楽しいところです！

今回の await sleep() のように、「○秒待つ」機能がなくても、自分で考えて組み合わせることで作ることができます。最初は難しく感じるかもしれませんが、「こうすれば作れるんだ！」と気づくと、プログラミングの面白さがどんどん広がりますよ🙆

コメントする