Create a game (point and click)

Processing
1

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

2

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);
       squaresPos.add(new PVector(x,y)); // add it to squaresPos array
   }
   
   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
3

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.

4

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
5

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

6

Please post your code to see what’s wrong

1 Like
7

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
8

Thanks a lot, now I will try to add a score to display as well as a score multiplier :ok_hand: :+1: