# My code for selectable resolution does not work

**URL:** <https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045>\
**Category:** Beginners\
**Created:** [September 1, 2021, 6:28am UTC](https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045 "2021-09-01T06:28:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quorum](https://avatars.discourse-cdn.com/v4/letter/q/ad7895/32.png) [@Quorum](https://discourse.processing.org/u/Quorum)\
**Post date:** [September 1, 2021, 6:28am UTC](https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045/1 "2021-09-01T06:28:00Z")

</div>

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

```auto
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:

```auto
function setup() {
  let s = min(resolutions[resolutionMode]);
  createCanvas(s, s);
  init();
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 1, 2021, 7:18am UTC](https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045/2 "2021-09-01T07:18:34Z")

</div>

> [@Quorum](#):
>
> `let s = min(resolutions[resolutionMode]);`

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.

> [@Quorum](#):
>
> 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?

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:

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

```

> **[Destructuring assignment - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#array_destructuring)**
>
> The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

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

> **[Spread syntax (...) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_function_calls)**
>
> The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the...

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![Quorum](https://avatars.discourse-cdn.com/v4/letter/q/ad7895/32.png) [@Quorum](https://discourse.processing.org/u/Quorum)\
**Post date:** [September 5, 2021, 4:37pm UTC](https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045/3 "2021-09-05T16:37:49Z")

</div>

you have been very clear. thank you very much