# Create a game (point and click)

Hello, I am a beginner in processing I would like to create a clicker on processing, to clarify, I would like a square or circle to appear and disappear when we click on it or if we have not clicked after a certain time but I can’t do it. I manage to make squares appear randomly every second but the old ones don’t come off and I can’t press on them, I end up with lots of unnecessary squares.

int x,y, couleur;
int mx,my;
boolean cible_en_cours;
long temps, debut;

void setup()
{
size(700,700);
cible_en_cours=true;
}
void draw()
{
temps=millis();
if(cible_en_cours)
{
x=round(random(0,700));
y=round(random(0,700));
}
{
if (cible_en_cours)
{
x=300;
y=300;
fill(0,255,0);
rect(x,y,30,30);
cible_en_cours=false;
}
{
x=round(random(0,700));
y=round(random(0,700));

mx = mouseX;
my= mouseY;

if((mx>=x)&&(my>=y)&&(my<=y+30))
{
fill(0,0,0);
rect(x+5,y+5,20,20);
cible_en_cours=true;
}
}
}
}

Hi,

you need to clarify a bit more what you want to do :

• do you want to display squares when you click and make them disapear when you click another time on it ?
• or should they appear randomly and then disapear when you click on it ?

Anyway, I can start helping you with the following points :

• Processing doesn’t store by itself data about what you draw on the canvas. So if you want to interact with the shapes you displayed on the canvas, you need to store at least position data in an array or arrayList
• you have to consider the canvas as a blank sheet on which you draw with a pen on it. Once you draw on it, you can’t erase the drawing, so the best is to replace the sheet with another one by coloring the background (`background(255)` for example)

=> So the best thing is probably to “redraw” everything at each iteration of the `draw` loop. So the first step would be to create new positions data and store them, and the second one would be to draw them.

Here is an example with an arrayList to store these positions :

``````ArrayList<PVector> squaresPos = new ArrayList<PVector>(); // to store square positions
int siz = 30;

void setup(){
size(400, 400);
background(255);
}

void draw(){
if (frameCount % 60 == 0){ // once by second
// create a random vector in the canvas size
float x = random(siz, width - siz);
float y = random(siz, height - siz);
}

for (PVector p : squaresPos){ // we iterate on the array. P is the current value
push();
fill(0);
noStroke();
rect(p.x, p.y, 30, 30);
pop();
}
}

``````

You can check the arrayList documentation here : https://www.processing.org/reference/ArrayList.html

PS: On peut faire ça en français aussi si besoin, mais le sujet peut potentiellement aider d’autres personnes, donc la langue internationale est préférée.
Penses à formater ton code avec le bouton ` </>` pour faciliter la lecture.

1 Like

Hi,
thank you for your answer, to clarify the matter, I would like a single square to appear at a random time and then disappear when you click on it or when it takes too long and then there is another one that appears and so on.
A bit like the “OSU” game.

Ok. Then no need of an array ; a simple variable `PVector` will be enough. You can the same as previously shown :

``````PVector p; // to store square position
int siz = 30;

void setup(){
size(400, 400);
background(255);
}

void draw(){
if (frameCount % 60 == 0){ // once by second
// create a random vector in the canvas size
float x = random(siz, width - siz);
float y = random(siz, height - siz);
p.set(x,y);
}

push();
fill(0);
noStroke();
rect(p.x, p.y, 30, 30);
pop();

}
``````

To set a timeout, you were on the right way with `millis()` :

``````long timestamp = 0;
int timeout = 3000; // 3 sec

void draw(){
if (millis() >= timestamp){
timestamp = millis() + timeout;
// do what you want here (eg. reset a new square)
}
}
``````

So to make them appears randomly, you have to change the line `if (frameCount % 60 == 0){ // once by second` with something taking in account some randomness; I would add another condition to it like :

``````random(1) > .5
``````

To make squares disapear when you click on it, you can reuse the condition you’ve already written adapted to our situation :

``````boolean display = true;

void draw(){
if (mouseX > p.x && mouseX < p.x + siz && mouseY > p.y && mouseY < p.y + siz){
display = !display ; // " ! " == reverse a boolean value
}

if (display){
rect(p.x, p.y, siz, siz);
}
}``````
1 Like

Hi,
I don’t understand how to write your order when i try it produces errors

1 Like

here is my code. Feel free to customize it.

Code
``````int wait = 1000, lastTime = 0, score = 0, size = 50;
PVector pos = new PVector(random(0,600-size),random(0,600-size));
void setup() {
size(600,600);
}
void draw() {
background(0);
square(pos.x,pos.y,size);
if(mousePressed && mouseX > pos.x && mouseX < pos.x + size && mouseY > pos.y && mouseY < pos.y + size) {
score++;
pos = new PVector(random(width-size),random(height-size));
lastTime = millis();
}
if(lastTime + wait < millis()) {pos = new PVector(random(width-size),random(height-size)); lastTime = millis(); }
}
``````
1 Like

Thanks a lot, now I will try to add a score to display as well as a score multiplier