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

**URL:** <https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332>\
**Category:** Coding Questions\
**Created:** [January 8, 2019, 9:13pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332 "2019-01-08T21:13:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sparktrooper55](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Sparktrooper55](https://discourse.processing.org/u/Sparktrooper55)\
**Post date:** [January 8, 2019, 9:13pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/1 "2019-01-08T21:13:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 8, 2019, 9:35pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/2 "2019-01-08T21:35:31Z")

</div>

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

Heres what you need:

[noStroke()](https://processing.org/reference/noStroke_.html)  
[noFill()](https://processing.org/reference/noFill_.html)  
[mouseX](https://processing.org/reference/mouseX.html)  
[mouseY](https://processing.org/reference/mouseY.html)  
[dist()](https://processing.org/reference/dist_.html)

[millis()](https://processing.org/reference/millis_.html)  
[random()](https://processing.org/reference/random_.html)  
[text()](https://processing.org/reference/text_.html)  
[collision with sware/rect](http://www.jeffreythompson.org/collision-detection/point-rect.php)  
(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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [January 8, 2019, 9:38pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/3 "2019-01-08T21:38:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sparktrooper55](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Sparktrooper55](https://discourse.processing.org/u/Sparktrooper55)\
**Post date:** [January 8, 2019, 10:20pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/4 "2019-01-08T22:20:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 8, 2019, 10:28pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/5 "2019-01-08T22:28:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sparktrooper55](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Sparktrooper55](https://discourse.processing.org/u/Sparktrooper55)\
**Post date:** [January 8, 2019, 10:33pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/6 "2019-01-08T22:33:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sparktrooper55](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Sparktrooper55](https://discourse.processing.org/u/Sparktrooper55)\
**Post date:** [January 8, 2019, 10:43pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/7 "2019-01-08T22:43:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sparktrooper55](https://avatars.discourse-cdn.com/v4/letter/s/49beb7/32.png) [@Sparktrooper55](https://discourse.processing.org/u/Sparktrooper55)\
**Post date:** [January 8, 2019, 11:13pm UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/8 "2019-01-08T23:13:11Z")

</div>

hello please help if you can

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [January 9, 2019, 1:13am UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/9 "2019-01-09T01:13:46Z")

</div>

[https://processing.org/reference/millis\_.html](https://processing.org/reference/millis_.html)

[https://processing.org/reference/text\_.html](https://processing.org/reference/text_.html)

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 9, 2019, 6:10am UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/10 "2019-01-09T06:10:18Z")

</div>

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

dont forget to `format your code with </>`

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [January 9, 2019, 8:03am UTC](https://discourse.processing.org/t/proceesing-noob-amataeur-help-forum-creating-a-specific-program-that-involves-an-invisible-square/7332/11 "2019-01-09T08:03:28Z")

</div>

@Sparktrooper55 This question is the same as the one here - [Noob help: trying to create a certain program in pde](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311) 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](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)

Best of Luck:-)