Visualizer aspect ratios

[gwhitney]

visualizers should be able to request aspect ratios, but it remains unclear whether the app should be forced to provide a canvas of said aspect ratio. We found that in both cases, some issues arise:

1. If the application should always provide the desired canvas, we could run into issues especially on mobile where the canvas takes up too much of the screen height-wise, and UI components may no longer fit.
2. If the application can return a different aspect ratio to the visualizer, the aforementioned problem would be alleviated, but visualizer code would suffer from added complexity, given that they can no longer rely on any fixed aspect ratio.

We believe we have found a third solution which might be more fitting. In this solution, the visualizer asks for a canvas of a certain aspect ratio, and the app then returns two canvases: an abstract canvas and a "true" canvas. The abstract canvas would be a view into a true canvas and always have the desired aspect ratio, while the true canvas is the full canvas that is actually given to the visualizer. That way, visualizers have the ability to choose between a simple implementation using the abstract canvas or to take advantage of the full canvas at the cost of doing dynamic aspect ratio calculations.

This opens the door for a new (more custom) visualizer interface, possible one that sits on top of P5/canvas API, which would take time but could greatly simplify visualizer creation and make them more consistent both with the app and with one another. This wouldn't invalidate previous visualizers, but would be an additional layer on which new visualizers could be made more easily.

[gwhitney]

From Kate:

First, just to check I'm understanding the proposal, let me give it back to
you and tell me if I'm right. The canvas asks for a specific ratio. The
visualizer returns two canvases, abstract (resizable) and true (fixed). If
the app draws to the fixed one, the app displays it in the middle of the
available (resizable) space. If the app draws to the resizable one, the
app lets it have the full space and the visualizer has to handle changes.

Can the app change its mind or use both? Are the two canvases superimposed
or is there some type of "view" structure that links them?

[gwhitney]

And from Glen:

We should keep in mind that the two most common use cases for
visualizers will be to request a 1:1 aspect ratio and not to request
any aspect ratio but just use what they are given (not sure which will
be more common).

Having two canvases around sounds like a complication to me, but
perhaps you have a mechanism in mind where it will remain simple for
the visualizer writer? A goal for us is to make visualizer writing as
accessible as possible, even for folks with minimal coding experience.

Could it be the case that the visualizer can either:

A) not care about the aspect ratio, and just be given the maximal
canvas (which it can of course discover the dimensions of), or

B) provide an aspect-ratio hint, and be given a canvas where the
framework has made a best-effort to arrange the screen so that the
canvas should be near the suggested ratio if possible, but the
visualizer still needs to check the dimensions of the resulting canvas
as they may not match the suggested ratio, or

C) demand a given aspect ratio, at the cost of possibly having the
fraction of the screen it can draw onto be relatively small (the
framework will just center a canvas of the specified aspect ratio
within its available space)?

To me, (A), (B), and (C) cover all of the visualizer-writer use cases,
without introducing a situation in which two canvases are passed to the
visualizer and it then has to decide which one to use.

(A somewhat related question is whether on mobile a web app can more or
less force the browser it is being viewed through to enter landscape
mode, giving the app more control over the aspect ratios of various
components.)

[Vectornaut]

After discussing your question more, @gwhitney, @katestange, and I have decided what we want to happen.

The visualizer can either (A) say it doesn't care about the aspect ratio, or (B) ask for a particular aspect ratio. In response, the app gives the visualizer a single canvas, chosen as follows.

A) If the visualizer doesn't care about the aspect ratio, the app chooses the canvas dimensions however you want.

B) If the visualizer asks for a particular aspect ratio, the app provides a canvas of the desired aspect ratio, with the largest reasonable dimensions. You get to decide what's reasonable. For example, if you think that the canvas should never take up more than 4/5 of the height of a mobile screen, provide the largest canvas that satisfies that constraint.

Does this description make sense, and does it seem doable?

---

p.s. While discussing this question, we also thought about helping visualizers respond to canvas size changes. I've started discussion #335 to brainstorm about this.

[maxd0328]

I've read over your proposed solution, and it seems quite simple yet elegant, and we'll definitely move forward with it.

The only major difference between this solution and the one proposed earlier is that if a canvas asks for a certain aspect ratio, it will now be given only the largest canvas of that aspect ratio, and is unaware of the potentially unused outside space. In very niche settings, some visualizers could take advantage of this extra space, but we agree in retrospect that your solution is elegant enough that anything more complicated doesn't make too much sense.

[katestange]

Sounds good. Thanks!

[gwhitney]

As the settled-on solution is implemented in ui2, closing.