How to change the render size of a TwoView?

[bennlich]

It looks like the size of a TwoDraw canvas is closely related to the coordinate system of the model. It would be awesome to have a view class that decoupled these. I'm working with views that occupy the full viewport, so I need to be able change the render-size of a view when the user resizes their browser window.

Currently, if I manually change the canvas size, some weird things happen. In sprites mode, patches resize as I would expect, but agents do not. In non-sprites mode, I think I would need to calculate a new euclidean transform.

[stephenguerin]

FWIW, in netlogo the turtle size (which is a view property) is always related to patch which is always unit one in the model. If you change patch-size in Netlogo (a view property), the patch is still unit one, only the view changes and so turtle view size scales up.

[backspaces]

See earlier response: I really want to get rid of patchSize and simply let the modeler, in the 2D case, specify the width of the canvas, using the World aspect ratio determine the height. I've seen this used in other repos and like it.

[backspaces]

Turns out that css solves the problem?

I tried this:

    <style>
        #modelDiv canvas {
            width: 100vw;
            height: 100vh;
        }
    </style>

The html looks like:

    <div id="modelDiv"></div>
    <script type="module">
        import Color from '../src/Color.js'
        import Model from '../models/HelloModel.js'
        import TwoDraw from '../src/TwoDraw.js'
        const model = new Model()
        model.setup()
        const view = new TwoDraw(
            model,
            {
                div: 'modelDiv',
                patchSize: 15,
            },
            {
                patchesColor: 'black',
            }
        ) // defalt drawOptions!
        view.draw()
    </script>

The result is the canvas stretching to fill the page. The default world is used which is square. Not sure if vh/vw is the right units but anyway....

[backspaces]

Needs something like this too:

        html,
        body,
        #modelDiv,
        canvas {
            margin: 0;
            padding: 0;
            border: 0;
        }

Or better yet: https://jgthms.com/minireset.css/

[bennlich]

Aaaah, interesting! That's better than what I had going before. I think it's still not ideal though, because the agents get all stretched out:

I guess this is consistent with turtle size being a function of patch size, but it's not really what I want for my use case. I'm looking for a view where turtles are always the correct shape, regardless of the shape of the world. Patches, on the other hand, are stretched to fill the canvas.

I think what we're getting to is the expected behavior of a resizable 2D view. If I increase the size of my view, I do expect the turtle size to increase, but I do not expect the turtle shape to distort. So maybe the secret sauce is to make turtle size a function of whichever patch dimension is largest at the time.

What do you think @backspaces ? @stigmergic ?

If the new landing page is the only place where you've seen a need for a resizable 2d view, maybe we should close this issue for now, and ill just write some code to re-init the model worlds when the user resizes their browser.

[backspaces]

I think one approach would be to change the World of the model to match the canvas you want to create!

It would require a new feature in Model, somewhat like reset(worldOptions = this.world) where you'd calculate a new world based on the size of the canvas and the patchSize.

It has a few odd corner cases such as smaller canvases would result in "off world" turtles but that could be solved by the turtle's off world handler.

I think I need a more details on exactly the effect we want. For example, we could simply build a model the size of the largest possible window size! We'd need css to control which two edges are placed as we want.

In other words, I think trickery can avoid rectangular patches but "square" turtles.

[backspaces]

@bennlich This is a bit off-topic but: Would it help if TwoView supported a width option? It would just use this to compute the patchSize:

patchSize = this.width / this.world.width

There is a reset(patchSize, useSprites = this.useSprites) method that would also have to change, but the real issue is whether "width" is helpful? I can see this being a useful for dynamically resizing the canvas when the window changes size.

OTOH, the computation isn't difficult but does require the modeler to access the world object which might be awkward.

[bennlich]

Yes! I think total width is a much more natural way to think about the size of the view than patchSize.

[backspaces]

OK, TwoView.js allows both patchSize and width:

• src/TwoView.js
  • Add "width" to augment "patchSize"
  • ctor: width: pixels allowed; converted to patchSize (float)
  • canvas size: add 2 methods: setPatchSize(size) & setWidth(width)
• views2/ants.html
  • convert to using "width" rather than "patchSize"
  • move drawOptions into viewOptions

I didn't add a getter for width, but view.canvas.width gives the current canvas width. Not sure if there should be a width getter.

[backspaces]

@bennlich I think it makes sense to close this, right? Not that we allow rectangular patches tho. But related.

[bennlich]

K, ya. We decided to not support arbitrary render dimensions until a clearer need arises. For now, set the width, and the height will be determined automatically. Patches are squares.