My code for selectable resolution does not work

p5.js Beginners
1

I want to change the canvas between some resolutions that I have preset. But my solution doesn’t work completely.
It works with the first two, but when I select one of the other four, a resolution equal to one of the first two appears. Why?

I have created seven arrays:
The first six are the individual resolutions for the canvas

resolution1 = [540, 540]; 
resolution2 = [1080, 1080]; 
resolution3 = [540, 960]; 
resolution4 = [1080, 1920];
resolution5 = [960, 540]; 
resolution6 = [1920, 1080];

The seventh array is the list of resolutions = (resolution1, resolution2, resolution3, etc);

Finally, I created a variable resolutionMode = 0;
to which I manually change the numerical value according to the resolution I want to see.

This is the setup:

function setup() {
  let s = min(resolutions[resolutionMode]);
  createCanvas(s, s);
  init();
}
1 Like
2

Variable resolutions is a 2D array. Each of its inner arrays got 2 values.

So function min() picks the lowest value outta those 2 values.

B/c the 1st 2 & last inner arrays have the same value for both width & height, while the others have different values.

It doesn’t make sense using min() to extract 1 of those 2 values. You need both values!

Instead you can make an array destructuring assignment like this:

const [ w, h ] = resolutions[resolutionMode];
createCanvas(w, h);

Or straight up use the spread operator ... on resolutions[][] when calling createCanvas():
createCanvas(...resolutions[resolutionMode]);

const resolutions = [
  [540, 540],     // 0
  [1080, 1080],   // 1
  [540, 960],     // 2
  [1080, 1920],   // 3
  [960, 540],     // 4
  [1920, 1080]    // 5
];

let resolutionMode = 2; // [540, 960]

function setup() {
  createCanvas(...resolutions[resolutionMode]);
  background('blue');
  fill('yellow').stroke('red').strokeWeight(2);
  textAlign(CENTER, CENTER).textSize(width >> 3);
  text(`[ ${width}, ${height} ]`, width >> 1, height >> 1);
}
2 Likes
3

you have been very clear. thank you very much