Question

As title, what I want to realize with Processing:

There are classical circles running across on the screen, then:

The first time you click the mouse all the circles freeze(stop moving);

The second time you click the mouse you draw a new circle with your mouse position.

The problem is: How to tell the computer to act differently? After all, they are all clicks, seem the same to the computer.

I am thinking about to detect if something already happened in Processing(like the first click). if it cannot be done, can I use javascript to do so? I want to put it on the browser anyway.

Does anybody know? Thank you very much.

Answer 1

I presume it’s mostly up to how you envision the interaction. It can be as simple or as complex as you see fit.

If it helps, here are couple of ideas:

1.Use different actions for different mouse buttons (e.g. regular/left click spawns a new circle, right click moves existing circles to a desired location):

void draw(){
  color bg = color(0);
  if(mousePressed){
    if(mouseButton == LEFT )  bg = color(192,0,0);
    if(mouseButton == CENTER) bg = color(0,192,0);
    if(mouseButton == RIGHT)  bg = color(0,0,192);
  }
  background(bg);  
}

2.Use button and key combinations. For example a SHIFT+CLICK does a separate action rather than the default:

void draw(){
  color bg = color(0);//default
  if(mousePressed && keyPressed && keyCode == SHIFT) bg = color(255,192,0);//shift+click
  background(bg);  
}

3.Keep track of clicks and use the click number a cue to different states:

int numClicks = 0;

void draw(){
  background(numClicks*25);  
}
void mousePressed(){
  numClicks++;
  if(numClicks > 10) numClicks = 0;//reset after 10 'states'/different clicks
}

This, as an interaction is probably less intuitive though. In my opinion, the simpler things are (especially for the user), the better.

HTH