Placement of sliders outside canvas

[GoToLoop]

@kll

Now works also when the canvas is not at 0,0.

Oopsy, totally forgotten that not all p5js canvases are at browser’s position (0, 0)!

Anyways, here are some “tricks”:

We don’t need to store the p5.Renderer returned by the p5:createCanvas() in some global variable.

p5js already does it for us under its “secret” variables _renderer & _curElement:

hint(DISABLE_DEPTH_TEST) in P5

Shortest way to reach the sketch’s canvas rendering context is via undocumented variable drawingContext: gl = drawingContext; The canvas itself is under undocumented variable canvas. And its wrapper is under both undocumented variables _renderer & _curElement.

So, in order to grab sketch’s main canvas coordinates, we just need: _renderer.position().

Of course, don’t forget to import “p5.dom.js” for the p5.Element::position() method.

Another 1 is that all the id attributes secretly become global variables already.

So rather than parent('canvasposition') as a string, simply pass the id global variable: parent(canvasposition).