Auto scale (up and or down)

0c00L

Is there a way to code an auto scale up and or down feature for different screen sizes on a mobile device? I have tried

function windowResized() { resizeCanvas(windowWidth, windowHeight); }

doesn't seem to work.

I am building in Visual Studio 2015 with Cordova

GoToLoop

https://forum.Processing.org/two/discussions/tagged?Tag=windowresized()

0c00L

None of these discussions are really getting at what I'm looking for. Thanks though.

blindfish

Not exactly a trivial question and one that has been asked before (recently)...

I'll see if I can throw a demo together.

0c00L

Thanks. I look forward to it. Meanwhile I have been manipulating the device controls. I will post a solution if I find one.

0c00L

Mess around with the integers till it feels right. This seems to do it combined with using displayWidth, displayHeight. Now I just need to figure out how to lock the canvas in landscape.

Create AndroidManifest.xml in res/native/android

<?xml version="1.0" encoding="utf-8"?>
<manifest>
<supports-screens android.resizeable="true"
                  android.smallScreens="true"
                  android.normalScreens="true"
                  android.largeScreens="true"
                  android.xlargeScreens="true"
                  android.anyDensity="true"
                  android.requiresSmallestWidthDp="1"
                  android.compatibleWidthLimitDp="2000"
                  android.largestWidthLimitDp="100"/>
</manifest>

blindfish

@0c00L - here's an initial proof of concept...

Note this currently has a dependency on viewportSize. You'll have to manually paste in the source above the following demo code.

I have some ideas of how this could be wrapped up into a helper script that would make it more useful; for e.g.:

• pass baseWidth/Height as parameters (& store these in the function for later use)
• when size changes also return the ratio between the previous and new size: you'll be wanting that to adjust any variables you need to keep relative to the sketch dimensions.
• embed/incorporate any dependencies

    // include viewportSize dependency here...
    
    (function(n){
        n.getDim=function() {
        var baseWidth = 600;
        var baseHeight = 400;
        var ratioW2H = baseHeight/baseWidth;
    
        var windowWidth = viewportSize.getWidth();
        var windowHeight = viewportSize.getHeight();
    
        var adjustedHeight = windowWidth * ratioW2H;
    
        if(adjustedHeight > windowHeight) {
            adjustedHeight = windowHeight;
            windowWidth = windowHeight /ratioW2H;
        }
    
        return { w: windowWidth, h: adjustedHeight}
    }})(this);
    
    
    
    // sketch (instance mode)
    window.P$ = new p5(function (p) {
    
        var dim = getDim();
    
        p.setup = function () {
            p.createCanvas(dim.w, dim.h);
        };
    
        p.draw = function () {
            // just to shoe that something is happening
            p.background('#39d');
            // note that position and size are relative to the sketch dimensions
            p.ellipse(p.width/2, p.height/2, p.width/3,p.width/3);
        };
    
        p.windowResized = function() {
            dim = getDim();
            p.resizeCanvas(dim.w, dim.h);
        }
    
    }, "sketch01");

blindfish

Updated demo with some additional bells and whistles :)

// copy paste dependency from :https://raw.githubusercontent.com/tysonmatanich/viewportSize/master/viewportSize-min.js

// attach function to global context - normally window...
(function(w){
    w.getDim = function(inputWidth, inputHeight) {
    // Store the initial values as properties of the function so it
    // can be called again without having to repeat the parameters.
    // Also provide option to change the aspect ratio...
    this.storedWidth = inputWidth || this.storedWidth;
    this.storedHeight = inputHeight || this.storedHeight;

    var update = (function() {
        // the stored value defines the desired ratio for the sketch
        var ratioW2H = this.storedHeight/this.storedWidth;
        // get current window dimensions
        //TODO: either remove or incorporate the viewportSize dependency into the code
        var windowWidth = viewportSize.getWidth();
        var windowHeight = viewportSize.getHeight();
        // calculate height based on window width and the desired ratio
        var adjustedHeight = windowWidth * ratioW2H;
        // check that the height fits within the window and adjust if necessary
        if(adjustedHeight > windowHeight) {
            adjustedHeight = windowHeight;
            windowWidth = windowHeight /ratioW2H;
        }
        // calculate the ratio compared to the original window size
        var    resizedRatio = windowWidth/this.storedWidth;

        return { w: windowWidth, h: adjustedHeight, ratio: resizedRatio};
    })();

    return update;
}})(this);
// - - - - - - - - - - - - - - - - - - - - - - //


// sketch (instance mode)
window.P$ = new p5(function (p) {

    // Set initial sketch size - this will of course be resized; but will
    // set the aspect ratio for the sketch.
    var dim = getDim(600, 400);

    // define variables so they're available globally within the sketch
    var diameter;

    // initialise these in a function so they can be reset on resize
    var initSketch = function() {
        diameter = 200 * dim.ratio;
    };


    p.setup = function () {
        p.createCanvas(dim.w, dim.h);
        initSketch();
    };

    p.draw = function () {
        p.background('#9d0');
        p.ellipse(p.width/2, p.height/2, diameter, diameter);
    };

    p.windowResized = function() {
        dim = getDim();
        // reset variables relative to the new size
        initSketch();
        p.resizeCanvas(dim.w, dim.h);
    };

}, "sketch01");

0c00L

Thanks @blindfish. I'll study this for fluency but as I started becoming more comfortable with Cordova, I found that it has many ways to mitigate problems such as screen size with ease. Visual Studio 2015 + Cordova = Unlimited power.