# Trying to make a multidimensional array which can connect to my buttons Please Help as soon as possible Please

**URL:** <https://discourse.processing.org/t/trying-to-make-a-multidimensional-array-which-can-connect-to-my-buttons-please-help-as-soon-as-possible-please/34047>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [December 11, 2021, 1:01am UTC](https://discourse.processing.org/t/trying-to-make-a-multidimensional-array-which-can-connect-to-my-buttons-please-help-as-soon-as-possible-please/34047 "2021-12-11T01:01:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tkenyon](https://avatars.discourse-cdn.com/v4/letter/t/5f9b8f/32.png) [@tkenyon](https://discourse.processing.org/u/tkenyon)\
**Post date:** [December 11, 2021, 1:01am UTC](https://discourse.processing.org/t/trying-to-make-a-multidimensional-array-which-can-connect-to-my-buttons-please-help-as-soon-as-possible-please/34047/1 "2021-12-11T01:01:50Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)  
> I am trying to make a multidimensional array, storing my array of images on one and states on the left side and storing the images on the right side in the other. I am unsure of how to update my buttons and I am just not sure how I would do that with the code I have already made and I do not know where I would put the conditional to render my image that corresponds to the button pressed.

\</\>let buttons = , buttonStates = [true,false];

let imgs = ;

function preload() {  
function setup() {  
createCanvas(800, 800);  
buttons = [createButton(),createButton(),createButton(),createButton("),createButton(),createButton()];

buttons[0].style(‘font-type’, ‘Times’);  
buttons[0].style(‘font-size’, ‘12px’);  
buttons[0].style(‘background-color’ ,‘#6CCDE5’);  
buttons[0].position(810,0);  
buttons[0].mousePressed(\_=\> {  
buttonStates.forEach((state,index) =\> {  
buttonStates[index] = false;

```
});
buttonStates[1] = true;

```

});

buttons[1].style(‘font-type’, ‘Times’);  
buttons[1].style(‘font-size’, ‘12px’);  
buttons[1].style(‘background-color’ ,‘#6CCDE5’);  
buttons[1].position(810,30);  
buttons[1].mousePressed(\_=\> {  
buttonStates.forEach((state,index) =\> {  
buttonStates[index] = false;  
});  
buttonStates[0] = true;  
});

buttons[2].style(‘font-type’, ‘Times’);  
buttons[2].style(‘font-size’, ‘12px’);  
buttons[2].style(‘background-color’ ,‘#6A9F34’);  
buttons[2].position(810,60);  
buttons[2].mousePressed(\_=\> {  
buttonStates.forEach((state,index) =\> {  
buttonStates[index] = false;  
});  
buttonStates[1] = true;  
});

buttons[3].style(‘font-type’, ‘Times’);  
buttons[3].style(‘font-size’, ‘12px’);  
buttons[3].style(‘background-color’ ,‘#6A9F34’);  
buttons[3].position(810,90);  
buttons[3].mousePressed(\_=\> {  
buttonStates.forEach((state,index,imgs) =\> {  
buttonStates[index] = false;  
});  
buttonStates[1] = true;  
});

buttons[4].style(‘font-type’, ‘Times’);  
buttons[4].style(‘font-size’, ‘12px’);  
buttons[4].style(‘background-color’ ,‘#E6B786’);  
buttons[4].position(810,120);  
buttons[4].mousePressed(\_=\> {  
buttonStates.forEach((state,index) =\> {  
buttonStates[index] = false;  
});  
buttonStates[0] = true;  
});

buttons[5].style(‘font-type’, ‘Times’);  
buttons[5].style(‘font-size’, ‘12px’);  
buttons[5].style(‘background-color’ ,‘#E6B786’);  
buttons[5].position(810,150);  
buttons[5].mousePressed(\_=\> {  
buttonStates.forEach((state,index) =\> {  
buttonStates[index] = false;  
});  
buttonStates[1] = true;  
});

}  
function draw() {  
background(220);\>/\<

---

<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:** [December 11, 2021, 8:34am UTC](https://discourse.processing.org/t/trying-to-make-a-multidimensional-array-which-can-connect-to-my-buttons-please-help-as-soon-as-possible-please/34047/2 "2021-12-11T08:34:08Z")

</div>

Let me see if I got it right…

You have an array w/ 6 buttons and a boolean array w/ 2 states.

Each button makes 1 of the states `true` and the other `false` when clicked.

So basically you need an extra array which stores the indices to be set to `true` when their corresponding button is clicked:  
`STATE_INDICES = Uint8Array.of(1, 0, 1, 1, 0, 1)`

The function **createButton()** has a 2nd parameter _value_ which we can use it to store the index we want to be set to `true` for that button:

> **[reference | p5.js](https://p5js.org/reference/#/p5/createButton)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> createButton(label, [value])

In order to read a button’s stored _value_ we can invoke the method p5.Element::**value()**, given a button is of datatype [p5.Element](https://p5js.org/reference/#/p5.Element):

> **[reference | p5.js](https://p5js.org/reference/#/p5.Element/value)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Inside the **mousePressed()**'s event callback we need to use the keyword `this` in order to access the clicked button.

The only gotcha is that p5.Element::**value()** returns a string, so we need to use the unary plus `+` operator to convert it to a number: `+this.value()`

> **[Unary plus (+) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus)**
>
> The unary plus (+) operator precedes its operand and evaluates to its
> operand but attempts to convert it into a number, if it isn't already.

After that we can use that _value_ as the index for the boolean array _buttonStates[]_:  
`buttonStates[+this.value()] = true;`

Here’s the full button event callback:

```auto
function changeButtonStates() {
  buttonStates.fill(false);
  buttonStates[+this.value()] = true;
  redraw();
}

```

And this is the complete example demo for it:

https://glitch.com/embed/#!/embed/state-buttons?path=sketch.js&previewSize=0&sidebarCollapsed=true