# Noob help: trying to create a certain program in pde

**URL:** <https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311>\
**Category:** Coding Questions\
**Created:** [January 8, 2019, 8:27am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311 "2019-01-08T08:27:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Captainsparkles](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@Captainsparkles](https://discourse.processing.org/u/Captainsparkles)\
**Post date:** [January 8, 2019, 8:27am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/1 "2019-01-08T08:27:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [January 8, 2019, 11:49am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/2 "2019-01-08T11:49:02Z")

</div>

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:

```auto
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:

```auto
// 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()`](https://processing.org/reference/fill_.html), [`stroke()`](https://processing.org/reference/stroke_.html), and this [color picker](https://rgbcolorcode.com/) (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()](https://processing.org/reference/second_.html) and [minute()](https://processing.org/reference/minute_.html). Like:

```auto
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()](https://processing.org/reference/textAlign_.html) 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.

---

<div class="post-metadata">

**Author:** ![Captainsparkles](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@Captainsparkles](https://discourse.processing.org/u/Captainsparkles)\
**Post date:** [January 9, 2019, 12:31am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/3 "2019-01-09T00:31:50Z")

</div>

Basically how would you put this code together

---

<div class="post-metadata">

**Author:** ![Captainsparkles](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@Captainsparkles](https://discourse.processing.org/u/Captainsparkles)\
**Post date:** [January 9, 2019, 12:34am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/4 "2019-01-09T00:34:32Z")

</div>

I’m still having trouble on how to basically do this

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [January 9, 2019, 2:51am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/5 "2019-01-09T02:51:08Z")

</div>

Here’s where I would start:

```auto
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](https://www.youtube.com/watch?v=mVq7Ms01RjA).

---

<div class="post-metadata">

**Author:** ![Captainsparkles](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@Captainsparkles](https://discourse.processing.org/u/Captainsparkles)\
**Post date:** [January 9, 2019, 3:33am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/6 "2019-01-09T03:33:38Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![Captainsparkles](https://avatars.discourse-cdn.com/v4/letter/c/67e7ee/32.png) [@Captainsparkles](https://discourse.processing.org/u/Captainsparkles)\
**Post date:** [January 9, 2019, 4:00am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/8 "2019-01-09T04:00:55Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 9, 2019, 7:17am UTC](https://discourse.processing.org/t/noob-help-trying-to-create-a-certain-program-in-pde/7311/9 "2019-01-09T07:17:30Z")

</div>

- -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

```auto
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**
>
> ```auto
> // 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…