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

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions
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);>/<

2

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:

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:

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()

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:

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

And this is the complete example demo for it: