p5.js の createGraphics()（オフスクリーンキャンバス）で translate() などを適用した場合の注意点： reset() によるリセットが必要

Qiita で以下の記事を書いた時などに、記事内で書いている話を、独立した記事に書きます。

●p5.js で createGraphics() の描画領域を見えるようにして利用してみる（＋ 特定の処理に関して明示的なリセットが必要な話）【小ネタ】 #JavaScript - Qiita
　https://qiita.com/youtoy/items/5c853cfd5dfe9e94702d

たまに、「p5.js の createGraphics() で translate() などを使った時、draw() の冒頭でリセットがかからない場合の対処って、どうやるんだっけ？」と思うことがあるので、見つけやすいように独立させた記事にしました。

リセットを行うという話

冒頭で紹介した記事の以下で書いているのが、今回の記事のトピックです。

例えば、以下のような処理を行った場合に、意図しない動作になります。

function setup() {
  ...
  pg = createGraphics(400, 400);
  ...
}

function draw() {
  ...
  pg.translate(width / 2, height / 2)
  ...
}

自分が上記の書き方をする場合、 pg.translate(width / 2, height / 2) で意図した処理は、draw() が実行される時に毎回、オフスクリーンキャンバスの中心へ原点を移動させる、というものです。
しかし上記を実行すると、draw() が実行されるたびに原点が、右下へと移動していってしまいます。

その対処法は、以下のように reset()　を行う事です。

function setup() {
  ...
  pg = createGraphics(400, 400);
  ...
}

function draw() {
  ...
  pg.reset()
  pg.translate(width / 2, height / 2)
  ...
}

p5.js公式のリファレンスでの、reset()　の説明は以下です。

●reference | reset()
　https://p5js.org/reference/#/p5.Graphics/reset

「Transform」と「Lights」のカテゴリの処理を、意図的にリセットする処理になります。

余談： 別の reset()

以下は余談です。

今回の記事を書いていて、p5.js の reset() に関して、上記と別の reset() が出てきました。

●reference | reset()
　https://p5js.org/reference/#/p5.Image/reset

本記事のトピックで扱った reset() は、p5.Graphics に関するものですが、上記のものは p5.Image に関するものでした。上記のほうは、GIF のアニメーションを最初のフレームに戻す、というものになるようです。