# Using a Boolean in Constructor Class in p5.js

**URL:** <https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546>\
**Category:** Coding Questions\
**Created:** [November 2, 2022, 6:21am UTC](https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546 "2022-11-02T06:21:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alenmartel](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@alenmartel](https://discourse.processing.org/u/alenmartel)\
**Post date:** [November 2, 2022, 6:21am UTC](https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546/1 "2022-11-02T06:21:17Z")

</div>

Good evening all;

I am still new to p5.js so appreciate your patience if I missed a simple thing! As a simple function in p5.js, I’m trying to make it so that when I click in a rectangle that it changes colour as well as that that change in colour also acknowledges a change in state (from false to true). I have successfully done this in Processing easy enough (in multiple sketches) but am having an unexpectedly hard time converting it into p5.js. I find that I can’t declare an array in the _constructor_ within the Class. Any support is appreciated!

TL;DR – I tried to make it so that when I clicked a square in the array that it would change colour while also changing its state (from false to true), but cannot get it to work. I can change the colour without changing the state but not sure how to do it so that the colour changes and the state changes.

I have commented out some things that are not relevant right now. Here is the code in OpenProcessing: [Speed Trainer - OpenProcessing](http://oppr.org/s/hM1EW3ch)

```auto
let sample = [];
let bassDrum = [];
let snareDrum = [];
let hiHat = [];

var bassRow = [16];
var snareRow = [16];
var hiHatRow = [16];

let col = 0;
let rectSize = 16;

// function preload() {
// sample[0] = loadSound('./BD.wav');
// sample[1] = loadSound('./SD.wav');
// sample[2] = loadSound('./CHH.wav');
// sample[3] = loadSound('./SS.wav');
// sample[4] = loadSound('./CC.wav');
// }

	function setup() {
		createCanvas(windowWidth, windowHeight);
		background(0);
		fill(255);
		for (let i = 0; i < 16; i++){
			bassDrum[i] = new drumButton(75 + i * 24, 50, bassRow, i);
			snareDrum[i] = new drumButton(75 + i * 24, 75, snareRow, i);
			hiHat[i] = new drumButton(75 + i * 24, 100, hiHatRow, i);
		}	
	}

	function draw() {
		for (let i = 0; i < 16; i++){
			bassDrum[i].pressEvent();
			bassDrum[i].display();
		}
		for (let i = 0; i < 16; i++){
			snareDrum[i].pressEvent();
			snareDrum[i].display();
		}
		for (let i = 0; i < 16; i++){
			hiHat[i].pressEvent();
			hiHat[i].display();
		}
	}

function mouseClicked() {
  if (col === 255) {
    col = 0;
  } else {
    col = 255;
  }
}

class drumButton {
	
	constructor(x, y, steps, stepId) {
		this.x = x;
		this.y = y;
		this.steps = steps;
		this.stepId = stepId;
	}
	
	display(){
		if (this.steps[this.stepId] == true){
			fill(255,col,col,100);
		} else {
			fill(255,255,255,100);
		}
		rect(this.x, this.y, rectSize, rectSize);
	}
	
	pressEvent(){
		if (this.steps[this.stepId] == false && mouseIsPressed && mouseX >= this.x && mouseX <= (this.x + this.w) && mouseY >= (this.y) && mouseY <= (this.y + this.h)){
			this.steps[this.stepId] = true;
		} else {
			this.steps[this.stepId] = false;
		}
	}
}

// function keyTyped(){
// if (key == 'b') {
// sample[0].play();
// }
// if (key == 'h') {
// sample[2].play();
// }
// if (key == 's') {
// sample[1].play();
// }
// }

```

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [November 2, 2022, 12:21pm UTC](https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546/2 "2022-11-02T12:21:52Z")

</div>

Hi @alenmartel

Your code checks for whether the mouse is hovering over a button using `this.w` and `this.h`. Does your `drumButton` class have a `this.w` and `this.h` attributes?

What are you trying to do with `bassRow`, `snareRow`, and `hiHatRow` arrays? Does each button need to have 16 steps? Why does it become a boolean in `pressEvent`?

What is the best way to track the active state of a button?

I can see that you tried different things to fix your issue but now they will fight against each other, especially toggling the `col` variable in the `mouseClicked` function.

There are a few other things that you could tweak to make your code more optimized:

- There is no need for three separate for loops in the draw if all rows have the same number of buttons. (You may also want to look into the `forEach` loop. Its syntax is a little more advanced but it could make your code more succinct).
- Your buttons check for click events on each frame even when the mouse is not pressed. What if they only checked when the mouse is clicked?

---

<div class="post-metadata">

**Author:** ![alenmartel](https://avatars.discourse-cdn.com/v4/letter/a/c68b51/32.png) [@alenmartel](https://discourse.processing.org/u/alenmartel)\
**Post date:** [November 11, 2022, 5:55am UTC](https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546/3 "2022-11-11T05:55:43Z")

</div>

Apologies for the delayed reply! I changed how the active states were checked as you suggested and made it work, thank you. The code in OpenProcessing was updated to show how it ended up working!