P5.jsでblendMode(ADD)が上手くいかない問題

Contents

何で動かないんだよ！？

P5.js(Processing)でblendMode(ADD)を指定すると発光表現ができるとこちらの記事で知り、自分でシンプルな円を描画しながら実験をしていました。

ところが、blendMode(ADD)にするとなぜか描画が上手くいかないのです。

具体的に言うと、画面が真っ白なまま何も表示されず。

P5.jsでイメージ通りに描画されないときは、setupに書くべきものをdrawに書いてるか（あるいは逆）書く順序が間違っているかことがほとんどです。

というわけでblendModeの記述をする場所をいろいろと変更してみたのですが、それでもダメでした。

結論から言えば、background(255)が原因だったようです。

なぜかはわかりませんが、背景が真っ白だとうまく働かないようです。

恐らくですが、blendMode(ADD)はオーバーラップした領域を白く描画するので、そのあたりで内部の計算がおかしくなっていたのかと予想しています。

Processingはどちらかと言えばマイナーな分野なので、ググってもエラーに関する記事があまり出てこないため、どうしても問題解決に時間がかかりますね。

今回は解決しましたが、また似たような問題が起きたら追記します。