Getting text to appear in front of row of boxes - Processing - processing

Question

Still just learning... So my goal is for the sketch to have the font appear in front of the boxes. I understand why it is behind the row of boxes. It is because the loop immediately goes to the next box and layers it over the font. However, because the variables are defined locally.... I don't really know what else to do...The loop is also crucial for updating purposes.
// Considerations: How to determine if point lies within a rectangle? \
// Hover over rectangle and trigger event
int numOfIndices = 50;
float[][] indexes = new float[numOfIndices][2];
public void setup()
{
frameRate(60);
size(600, 600);
strokeWeight(1);
int offset = width/numOfIndices;
for (int i = 0; i < numOfIndices; i++) {
indexes[i][0] = i*offset + offset/2; // X Coordinate
indexes[i][1] = height/2; // Y Coordinate
}
}
public void draw()
{
background(255);
// loop over each rectangle per frame
for (int i = 0; i < numOfIndices; i++) {
float widthRect = 5;
float heightRect = 20;
// A
float topLeftX = indexes[i][0] - widthRect/2;
float topLeftY = height/2 + heightRect/2;
// C
float bottomRightX = indexes[i][0] + widthRect/2;
float bottomRightY = height/2 - heightRect/2;
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
stroke(100);
fill(100);
//text(i, indexes[i][0], indexes[i][1]);
} else {
// Not inside rectangle. Do something else.
stroke(200);
fill(200);
}
rectMode(CENTER);
rect(
indexes[i][0], // X
indexes[i][1], // Y
widthRect, // width
heightRect, // height
20 // radi for corners (rounded)
);
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
textSize(26);
text(i, indexes[i][0], indexes[i][1]);
}
}
}

Answer 1

There are some different ways of doing it. One is as simple as reversing the for loop as follows:
for (int i = numOfIndices-1; i >= 0; i--)
That way the rectangles will be rendered from right to left. It's not a great solution, it will only work in this case because the text location is at the rectangles' right.
A better way is to render all the rectangles and only then render the text. That's quite usual when dealing with UI stuff. That will become:
// Considerations: How to determine if point lies within a rectangle? \
// Hover over rectangle and trigger event
int numOfIndices = 50;
float[][] indexes = new float[numOfIndices][2];
public void setup()
{
frameRate(60);
size(600, 600);
strokeWeight(1);
int offset = width/numOfIndices;
for (int i = 0; i < numOfIndices; i++) {
indexes[i][0] = i*offset + offset/2; // X Coordinate
indexes[i][1] = height/2; // Y Coordinate
}
}
public void draw()
{
background(255);
float widthRect = 5;
float heightRect = 20;
// loop over each rectangle per frame
for (int i = 0; i < numOfIndices; i++) {
// A
float topLeftX = indexes[i][0] - widthRect/2;
float topLeftY = height/2 + heightRect/2;
// C
float bottomRightX = indexes[i][0] + widthRect/2;
float bottomRightY = height/2 - heightRect/2;
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
stroke(100);
fill(100);
//text(i, indexes[i][0], indexes[i][1]);
} else {
// Not inside rectangle. Do something else.
stroke(200);
fill(200);
}
rectMode(CENTER);
rect(
indexes[i][0], // X
indexes[i][1], // Y
widthRect, // width
heightRect, // height
20 // radi for corners (rounded)
);
}
stroke(100);
fill(100);
for (int i = 0; i < numOfIndices; i++) {
// A
float topLeftX = indexes[i][0] - widthRect/2;
float topLeftY = height/2 + heightRect/2;
// C
float bottomRightX = indexes[i][0] + widthRect/2;
float bottomRightY = height/2 - heightRect/2;
if (
mouseX > topLeftX &&
mouseX < bottomRightX &&
mouseY > bottomRightY &&
mouseY < topLeftY
) {
// Inside rectangle. Do something.
textSize(26);
text(i, indexes[i][0], indexes[i][1]);
}
}
}