I’m a total noob when it comes to processing and so I am trying to figure out a way to create a sketch where an invisible square exists, and the user must find it by hovering the mouse throughout the canvas. When the mouse hovers over the square, it is captured and turned yellow. It stays yellow after it has been found and a message appears on the screen. Depending on the time it took, the user is given appropriate feedback:
0-3 seconds: Smazing!
3-8 seconds: Well done!
8-15 seconds: Nice try!
15+ seconds: You can do better
There’s a fair amount here so I’ll cover each thing individually.
A way to make something invisible is just to track the visibility with a boolean. Like:
boolean rectVisable = false;
// in draw
if (rectVisable) {
rect(parameters);
}
You can then check if mouse is over the rect by chaining boolean statements with &&. Like:
// in draw
if (mouseX > rectX && mouseX < rectX + rectW && mouseY > rectY && mouseY < rectY + rectW) {
rectVisable = true;
}
// this is the same as
if (mouseX > rectX) {
if (mouseX < rectX + rectW) {
if (mouseY > rectY) {
if (mouseY < rectY + rectW) {
}
}
}
}
For making the yellow color check out fill(), stroke(), and this color picker (use the rgb() value).
For the message I suggest using if, else if, and else. You can use record start and accomplished times using second() and minute(). Like:
int startSecond;
// in setup
startSecond = second() + minute() * 60;
// when end is triggered
String message;
int seconds = second() + minute() * 60 - startSecond;
if (seconds <= 3) {
message = "Smashing!";
} else if (seconds <= 8) { // 4-8 seconds
message = "Well done!"
} else { // anything 8+
message = "You can do better";
}
text(message, x, y); // to show message
You can also checkout textAlign() to help with positioning the text.
I suggest you try to get one thing working at a time. If you add everything at the same time it can become hard to debug especially if more than one thing isn’t working.
Basically how would you put this code together
I’m still having trouble on how to basically do this
Here’s where I would start:
boolean squareFound = false;
int squareX = 100;
int squareY = 100;
int squareSize = 100;
int startSecond;
String message = "";
void setup() {
size(300, 300);
startSecond = second() + minute() * 60;
// could use random() to set squareX, squareY, and squareSize
}
void draw() {
background(0);
if (squareFound) {
// set color
rect(squareX, squareY, squareSize, squareSize);
// set color if different for text
text(message, 0, 0);
} else if (mouseX > squareX && mouseX < squareX + squareSize && mouseY > squareY && mouseY < squareY + squareSize) {
squareFound = true;
// set message here
}
}
If you haven’t seen an else if statement before I suggest you check out Dan Shiffman’s video about them.
boolean squareFound = false;
int squareX = 100;
int squareY = 100;
int squareSize = 100;
int startSecond;
String message = “”;
void setup() {
size(300, 300);
startSecond = second() + minute() * 60;
// could use random() to set squareX, squareY, and squareSize
}
void draw() {
background(0);
if (squareFound) {
fill(255,255,0);}// set color yellow if square is found
void draw()
rect(100, 100, 100, 100);
// set color if different for text
text(message, 0, 0);
} else if (mouseX > 100 && mouseX < 100 + 100 && mouseY > 100 + 100 && mouseY < 100 + 100) {
squareFound = true;
// set message here
}
}
int start;
// in setup
startSecond = second() + minute() * 60;
// when end is triggered
String message;
int seconds = second() + minute() * 60 - startSecond;
if (seconds <= 3) { // 0-3 seconds
message = “Amazing!”;
} else if (seconds <= 8) { // 4-8 seconds
message = “Well done!”;
} else if (seconds <= 15 // 9-15 seconds
message = “Nice try!”;
} else { // anything 15+ seconds
message = “You can do better!”;
text(message, 50, 50); // to show message
}
Could you look at my code. Currently it’s not working. I’m hoping you could troubleshoot and fix this the problem by telling me what to fix in order to make it run what it’s supposed to perfectly and successfully.float circle_radius = 30;
boolean squareFound = false;
int squareX = 100;
int squareY = 100;
int squareSize = 100;
int startSecond;
String message = “”;
void setup() {
size(300, 300);
startSecond = second() + minute() * 60;
// could use random() to set squareX, squareY, and squareSize
}
void draw() {
background(0);
if (squareFound) {
fill(255,255,0);}// set color yellow if square is found
void draw()
rect(100, 100, 100, 100);
// set color if different for text
text(message, 0, 0);
} else if (mouseX > 100 && mouseX < 100 + 100 && mouseY > 100 + 100 && mouseY < 100 + 100) {
squareFound = true;
// set message here
}
}
int start;
// in setup
startSecond = second() + minute() * 60;
// when end is triggered
String message;
int seconds = second() + minute() * 60 - startSecond;
if (seconds <= 3) { // 0-3 seconds
message = “Amazing!”;
} else if (seconds <= 8) { // 4-8 seconds
message = “Well done!”;
} else if (seconds <= 15 // 9-15 seconds
message = “Nice try!”;
} else { // anything 15+ seconds
message = “You can do better!”;
text(message, 50, 50); // to show message
}
Could you look at my code. Currently it’s not working. I’m hoping you could troubleshoot and fix this the problem by telling me what to fix in order to make it run what it’s supposed to perfectly and successfully.float circle_radius = 30;
- -a- pls know that you can edit your posts,
- -b- and the code should be made with paste into
</>
code formatter
- so i ask you to repair above posts.
besides the not functional code fragments
and unused variables vs hard coded mouse over code
i see also some conceptional problems
( want to say it is not that easy as it looks in the first moment )
-
you need 2 timer
-
- one for search rect
-
- one for show msg after find until reset
-
and that needs one more logical like
boolean found= false;
- also a check on search timer function
- and a reset function after show msg timeout.
so after a day it might be good to show some
example code
// https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/8
int squareX, squareY, squareSize;
long startM;
String message = "find secret rectangle";
long startT, endT=5000; // sorry here use millis timer
boolean found = false;
void setup() {
size(300, 300);
squareX = squareY = squareSize = 100; // first init
startM = millis(); // first starttime
}
void draw() {
background(0,0,60);
fill(200, 0, 0);
text(message, 10, 10); // show message
if ( mouseOver() && !found ) check();
if ( found ) {
fill(200, 200, 0);
rect(squareX, squareY, squareSize, squareSize);
if ( millis() > startT + endT ) restart(); // show rect and msg for endT/1000 sec
}
}
boolean mouseOver() {
boolean over = false;
if ( mouseX > squareX && mouseX < squareX + squareSize
&& mouseY > squareY && mouseY < squareY + squareSize )
over = true;
return over;
}
void check() {
float seconds = (millis() - startM)/1000.0;
if (seconds <= 3) message = "Amazing!"; // 0-3 seconds
else if (seconds <= 8) message = "Well done!"; // 4-8 seconds
else if (seconds <= 15) message = "Nice try!"; // 9-15 seconds
else message = "You can do better!"; // anything 15+ seconds
found = true;
startT = millis(); // start message timer
}
void restart() {
found = false;
message = "again";
startM = millis(); // restart
squareSize = int(random(20, 100));
squareX = int(random(0, width-squareSize));
squareY = int(random(0, height-squareSize));
}
from here can work on the details…