最近踏んだバグのメモです。

createGraphics()を利用してこのようなimageを生成したとします。


See the Pen
pixelsTest01
by reona396 (@reona396)
on CodePen.



生成したimageに対してloadPixels()のサンプルを参考に「画像の上半分を繰り返す」ピクセル操作をしたいとします。


See the Pen
pixelsTest01
by reona396 (@reona396)
on CodePen.



この時、キャンバスサイズを小数にしていると盛大にバグるケースがあるようです。
キャンバスサイズを200.5x200.5にするとこんな感じで位置も色もバグります。グリッチっぽくてかっこいい。


See the Pen
pixelsTest02
by reona396 (@reona396)
on CodePen.



キャンバスサイズを200.9x200.0にすると位置がバグります。


See the Pen
pixelsTest03
by reona396 (@reona396)
on CodePen.



これはどうやらキャンバスサイズがというよりはcreateGraphicsのサイズが小数だとまずいようです。
createGraphics(width, height)の影響ですね。
解決方法としてはfloor()で小数点以下を切り捨てるなどして整数化するとよさそうです。


See the Pen
pixelsTest05
by reona396 (@reona396)
on CodePen.



あとは詳しく追いきれなくて再現方法は謎なんですが、pixelDensity(1)と指定することで似たようなバグが回避できました。

参考 :