Notes on fragment shaders and p5.js

createGraphics() makes a new <canvas>

I thought I had a bug with resizeCanvas() because a bunch of extra <canvas>es were showing up down in the DOM. Turns out createGraphics() makes a new <canvas> with display: none CSS.

I like this. It is a clever and natural way for them to implement a drawable but hidden graphics object on the web.

For fun, I deleted the display: none in the developer console, and there it is, just like you’d expect. This would be a nice way to get a debugger view if the display size wasn’t locked to the graphics object’s size. Or wait…

Rendering to WEBGL puts you in “3D Mode”

Huh. I think this was unexpected because pixi.js, which is a 2D rendering engine, is WebGL-first.

In “3D Mode,” the screen origin (0,0) is center instead of top-left

So well OK

References