After making the first version of the full suite, I duplicated the project and set to work on ironing out bugs.
I added the title of the Reactickle that is currently running to the back button which allows you to return to the menu screen.
this.updateButtonText = function(textToAdd){
this.title = textToAdd+"\nClick to return to Main Menu";
}
I used the “\n” special character to make sure that the text instructions were on the next line.
While looking at the discussion in the above link, I discovered that the text() command in p5.js has optional width and height parameters, to make sure that the text stays within a defined area. I implemented this throughout the code.
this.draw = function(){
textSize(characterSize);
noStroke();
fill(this.backgroundColour);
rect(this.position.x, this.position.y, this.dimensions.x, this.dimensions.y);
fill(this.textColour);
text(this.title, this.position.x+5, this.position.y+20, this.dimensions.x-5, this.dimensions.y-20); //https://p5js.org/reference/#/p5/text
}
Taking each Reactickle one by one, I started with KeyboardScalingCircleGrid.
On line 14 of KeyboardScalingCircleGrid.js, I had a console output, detailing the size of the array that held each of the ScalingCircles, one for each keyboard button I was taking input from. Repeatedly starting the Reactickle and going back to the main menu resulting in the following output:
KeyboardScalingCircleGrid.js:14 The size of the circles array is 216 KeyboardScalingCircleGrid.js:14 The size of the circles array is 252 KeyboardScalingCircleGrid.js:14 The size of the circles array is 288
It was clear that I needed to treat the array in a different way, by emptying it at the beginning of the setup method of KeyboardScalingCircleGrid.js. Looking in the Javascript basics part of the p5.js wiki pointed me at the MDN array reference page, which didn’t have a clear method. I found a StackOverflow post on how to empty an array in Javascript, and ended up using the following code:
while(A.length > 0) {
A.pop();
}
I added this to every other Reactickle that had a similar array bug.
While testing every Reactickle to confirm that I’d expunged the array bug, I discovered that that both KeyboardSquares.js and KeyboardFountain.js used a centred rectMode() rather than a cornered one. I added a rectMode() change before each of their draw calls, as well as reseting to corner mode in the main sketch.js to ensure that the GUI was drawn correctly.
Next will be creating some icons for the Reactickles, rather than the current placeholder text.