How can i make sure that the center of the circle remains static in processing?

Question

I am working on this project using Unfolding-Maps library and Processing Library. I came across a code which draws a circle whose diameter increases with time and finally fades away. But the problem I face is that the center of the circle moves with my x and y coordinates of my mouse but I want it to be static not move according to my mouse movement, i.e. where I click the mouse I want the center of the circle to be that coordinate and static.

My code is as below:

boolean bCircleShow=false;
float opacity;
int diameter=0;
//
void setup () {
  size (400, 300);
  background (255);
  smooth ();
  opacity=255;
}
//
void draw() {
  background (122);
  //stroke (0, 255, 0);
  noStroke();
  fill(255);
  if (bCircleShow) {
    fill(255, 2, 2, opacity);
    ellipse (mouseX, mouseY, diameter, diameter );
    diameter ++;
    opacity--;
    if (opacity<=0) {
      bCircleShow=false; // end
      opacity=255;
      diameter=0;
    }
  }
}
//
void mouseClicked() {
  bCircleShow=true;
}

Any suggestion would be appreciated.

Answer 1

When you clicked on the screen store the mouse X and mouse Y of that click and then draw the circle at that mouse x and mouse y. Dont use mouseX and mouseY as they are predefined variables in processing.

Sample code.

boolean bCircleShow=false;
int mx;
int my;
float opacity;
int diameter=0;
//
void setup () {
  size (400, 300);
  background (255);
  smooth ();
  opacity=255;
}
//
void draw() {
  background (122);
  //stroke (0, 255, 0);
  noStroke();
  fill(255);
  if (bCircleShow) {
    fill(255, 2, 2, opacity);
    ellipse (mx, my, diameter, diameter );
    diameter ++;
    opacity--;
    if (opacity<=0) {
      bCircleShow=false; // end
      opacity=255;
      diameter=0;
    }
  }
}
//
void mouseClicked() {
  bCircleShow=true;
  mx=mouseX;
  my=mouseY;
}