Proceesing noob/amataeur help forum: Creating a specific program that involves an invisible square


#1

In processing, when it comes to creating projects or programs, I am not an expert whatsoever and I am more of a complete noob when it comes to this program 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: Amazing!
3-8 seconds: Well done!
8-15 seconds: Nice try!
15+ seconds: You can do better


#2

Am I drunk or I have already seen this post and somebody answered?

Heres what you need:

noStroke()
noFill()
mouseX
mouseY
dist()

millis()
random()
text()
collision with sware/rect
(I forgot that dist() is not the best for rects collision detection, but you can use it for ellipse())
aaand obv Java (or Python) variables types, if statement


#3

So what code do you have so far?
You know you will need a square, so you will use rect() to draw it.
Go ahead and draw it right away - we can make it invisible later.
Where it is? Can you use random() and width and height to make a random position?

Where is the mouse’s position?
Can you determine if the mouse is over the sqaure?
Hint: What can you say about the X position or the mouse in relation to the square’s X position and width? How about in the Y direction?

You will need to use millis() to do timing.
You will need to use if statements to decide which text() to draw.


#4

void setup(){
size(500, 500);
}
void draw(){
boolean rectVisable = false;

// in draw
if (rectVisable) {
rect(30, 20, 55, 55);
}
}

// 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) {
}
}
}
}
}
}

This is my code so far, but I don’t know if it’s right


#5

1 ) to see if its right you should run it :crazy_face:
2 )Format code with </>
2 ) Yeah, it seems right as code, now you use millis(), text() and others if to show the message


#6

could you show me how to use millis and text to show the message


#7

I ran it but it says expecting EOF, found ‘if’


#8

hello please help if you can


#9

https://processing.org/reference/millis_.html

https://processing.org/reference/text_.html


#10

Sorry, I had to go to sleep :sleepy: , it was very late.
If you have any problem, post your code so people will fix it

dont forget to format your code with </>


#11

@Sparktrooper55 This question is the same as the one here - Noob help: trying to create a certain program in pde There are 2 solid examples in this thread on how to implement what you are asking for.

Is there a follow-up to your project?

If you are new to Processing, Please play around with the examples built in. You could also check out The coding train - https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

Best of Luck:-)