Notes on fragment shaders and p5.js

createGraphics() makes a new <canvas>

Permalink to “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…

  • Question: Can the canvas be displayed smaller—and repositioned, which I assume is trivial—without breaking its underling pixel space for p5.js? I have a hunch this might be possible since in the three.js experiments, there was some kind of internal:display pixel mapping you could do to account for different device pixel densities. If so, that would be cool, because I’m literally building my own mini view of the graphics objects right now.

  • Question: Would this (displaying the underlying graphics objects) be more efficient than explicitly rendering them separately? Maybe this wouldn’t matter at all.

Rendering to WEBGL puts you in “3D Mode”

Permalink to “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

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

So well OK


Permalink to “References”

Monthly digest

garage entry metadata

started 27 Jun 2021
disclaimer This is an entry in the garage. It may change or disappear at any point.