height and width not updated when entering fullscreen mode

[kendrick90]

shape(100.0, 0.5, 0.01)
//   .scale(1,9/16,1) //works when fullscreen
  .scale(1,height/width,1) // works when windowed
  .out()

I guess it also isn't updated when the window is resized either.

[geikha]

I don't consider this to be an issue since you can do setResolution(innerWidth,innerHeight)

You could have something like
window.onresize = ()=>{setResolution(innerWidth,innerHeight)}

So it resizes automatically. But I don't think this should be default behavior. For example I often use half-resolution, and any change to the window pane would resize it back again. Or any case where there's a precise resolution desired. Maybe a good solution would be:

window.autoresize = false;
window.onresize = function(){
    if(autoresize)
         setResolution(innerWidth,innerHeight);
}

And you can activate autoresizing setting it to true.

Also, the default values for setResolution should be innerWidth and innerHeight imo.

[geikha]

I take back my last sentence. the default values shouldn't be innerWidth and innerHeight since hydra can be embedded inside other websites, where the innerWidth and innerHeight won't match the size of hydra on the screen.

[ojack]

@ritchse I agree this isn't so much an issue as "width" and "height" refer to the resolution of the hydra canvas. Definitely needs to be documented better.

To have consistent scaling, you can either change the resolution via setResolution() as in the example above, or if you just want to scale the visuals based on the window dimensions (not the resolution), you can do:

shape(100.0, 0.5, 0.01)
  .scale(1,() => innerHeight/innerWidth,1) 
  .out()

[ojack]

Ooops, reopening as it seems width and height are not being updated when the resolution is updated:
https://hydra.ojack.xyz/?sketch_id=PwzEt68Iz4IsdYqW

shape(100.0, 0.5, 0.01)
	.scale(1, () => height / width, 1)
	.out()


window.onresize = function() {
	setResolution(innerWidth, innerHeight);
	console.log(innerWidth, innerHeight, height, width)
}

[micuat]

I think the problem is that these values are not really meant to be exposed in the first place. They are declared here

https://github.com/ojack/hydra-synth/blob/main/hydra-synth.js#L34-L35

and exposed to global as a result of makeGlobal (therefore never updated after the initialization process).