noFill confusion

in Programming Questions • 2 years ago

I am trying to use noFill() to "color" a rect "clear", that is, I want the rect to be "see through", so the images I have behind it can be seen. In my program, I have a bunch of colored rectangles in cols and rows that cover the whole display window, and as the mouse moves across the screen, a loop is comparing an array of mouse positions to the position of the rectangles covering the screen, if a match is made, the rect is noFill() - i can see through the rect - if a match is not made, the rect is filled with a solid color. I have 20 mouse position that increment with each new mouse input to make a trail effect. But it doesn't work right, when I use noFill() only 1 rect in my array ends up actually "see through", but when i specify a color with fill(), it works just fine. I have also messed with using fill() with an alpha value of "0", and this doesn't work quite right either...any help would be great!

//EXC 19_5
//this is the size of each sheild unit, the smaller, the more difficult to uncover
int sheild = 20;
//this is the length of the uncover array, the bigger the number the easier to uncover the sheild
int strength = 20;
//this stops the sheild loop when a matching mouseX/Y position in the uncover array is detected
int matches = 0;
//this is the uncover array, it stores the last x mouse positions, and removes the sheild from those points
int[] uncoverX = new int[strength];
int[] uncoverY = new int[strength];
//this increments the uncover array
int inc = 0;
Token[] square = new Token[4];
int score = 0;
void setup(){
size(600,400);
smooth();
background(255);
for(int i = 0; i < 4; i++){
square[i] = new Token();
}//close for loop
}//close setup
void draw(){
background(255);
for(int i = 0; i < 4; i++){
square[i].display();
}//close for loop
//cover the board with the sheild
for(int i = 0; i < width; i = i+sheild){
for(int j = 0; j < height; j = j+sheild){
matches = 0;
//check where sheild and uncover array overlap
for(int q = 0; q < strength; q++){
if( (uncoverX[q] >= i && uncoverX[q] <= i + sheild) && (uncoverY[q] >= j && uncoverY[q] <= j + sheild) ){
//fill(255); //This works like I expect noFill() should work...
noFill();
rect(i , j, sheild, sheild);
matches = 1;
}
else if(matches != 1 ){
fill(0,255,0);
rect(i , j, sheild, sheild);
} //close if
}//close if
}//close j loop
}//close i loop
}//close draw
void mouseClicked(){
println( "(x, y) = " + "(" + mouseX + "," + mouseY + ")" );
for(int i = 0; i < 4; i++){
square[i].clicked();
}//close for loop
}//close mouseClicked
void mouseMoved(){
uncoverX[inc] = mouseX;
uncoverY[inc] = mouseY;
inc += 1;
if(inc > strength - 1){
inc = 0;
}//close if
}//close mouseMoved

//this is the class that is the shape you press
class Token{
//tracks if the Token has been clicked
int clicked;
//these variable assign a size to the rect
int rectWidth;
int rectHeight;
//these variables give a random location to the rect
int varWidth;
int varHeight;
color c;
//these variables set the bounds for the mouse button
int leftLimit;
int rightLimit;
int topLimit;
int bottomLimit;
Token(){
//tracks if the Token has been clicked
clicked = 0;
//these variable assign a size to the rect
rectWidth = 20;
rectHeight = 20;
//these variables give a random location to the rect
varWidth = int(random(20, width - 20));
varHeight = int(random(20, height - 20));
c = color(255,0,0);
//these variables set the bounds for the mouse button
leftLimit = varWidth;
rightLimit = varWidth + rectWidth;
topLimit = varHeight;
bottomLimit = varHeight + rectHeight;
}//close constructor
void display(){
//rect attributes
fill(c);
noStroke();
//display a rectangle
rect(varWidth, varHeight, rectWidth, rectHeight);
}//close display
//Make a mouse over
void clicked(){
if(leftLimit < mouseX && mouseX < rightLimit && topLimit < mouseY && mouseY < bottomLimit && clicked == 0){
// stroke(255);
c = color(255);
score += 1;
println("Your Score = " + score);
clicked = 1;
}//close if
}//close clicked
}//close Token class

I am utterly boggled - I have walked away from this 3 times but am still not coming up with what is going on. Thanks for any help!

Replies(1)

PhiLho

Re: noFill confusion

2 years ago

Let see... The core loop is:

for(int j = 0; j < height; j = j+sheild){
matches = 0;
//check where sheild and uncover array overlap
for(int q = 0; q < strength; q++){
if( (uncoverX[q] >= i && uncoverX[q] <= i + sheild) && (uncoverY[q] >= j && uncoverY[q] <= j + sheild) ){
noFill();
rect(i , j, sheild, sheild);
matches = 1;
}
else if(matches != 1 ){
fill(0,255,0);
rect(i , j, sheild, sheild);
} //close if
}//close if
}//close j loop

I find more readable with less empty lines between lines of code. Note: there is something worse that no comments: incorrect or misleading comments. The one at the line 14 is confusing, as the soft brace closes the q loop!

Let's analyze your loop (I haven't tried to run it, sorry if I am wrong!). You have a complex condition. While it is not meet, you display rectangles in green. Once it is OK, you can noFill, so you draw an empty rectangle and set matches to 1. BTW, if you don't plan to increment it, you should use a boolean here, less confusing with a proper name...
So, once you found your condition, next q rectangles won't be displayed.
Mmm, I don't see the point of overlaying opaque rectangles, now that I think of it...

Result: unless the condition is meet on the first q loop, there will be always at least one rectangle colored opaquely.
Maybe you want to run your q loop and set noFill/fill after it, based on matches result. You can use a break to go out of q loop as soon as you find the proper condition.

Top Reply

Response title

Attachments

New to this Portal?