How to move a circle back and forth using mousePressed()

Altharis

Hi :) I'm trying to make an ellipse move horizontally when I press on it, then make it move back to its original position if pressed again. Right now, I only know how to make it move further to the right every time I press. Sorry, I couldn't find it in any beginner guides or videos.

Right now, it checks if the mouse was pressed on the circle, then it does the background(255) to get rid of previous circles and it draws a new circle. If I press outside of the circle, the circle stays where it is.

int circleX = 100;
int circleY = 100;

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

void draw() {
  ellipseMode(CENTER);
  stroke(0);
  fill(175);
  ellipse(circleX,circleY,50,50);
}

void mousePressed() {
  if (dist(mouseX, mouseY,circleX,circleY)<=25) {
      background(255);
     circleX = circleX + 50;
   }
 else {
    circleX = circleX;
 } 
}

GoToLoop

// forum.processing.org/two/discussion/11891/
// how-to-move-a-circle-back-and-forth-using-mousepressed

// 2015-Jul-29

static final int DIAM = 0100, RAD = DIAM>>1;
static final int STEP = 3, FPS = 60;

boolean toRight = true;
int x;
color bg = -1;

void setup() {
  size(300, 150, JAVA2D);
  smooth(4);
  frameRate(FPS);

  ellipseMode(CENTER);
  fill(0350);
  stroke(0);
  strokeWeight(1.5);
}

void draw() {
  background(bg);
  x = constrain(x + (toRight? STEP : -STEP), RAD, width - RAD);
  ellipse(x, height>>1, DIAM, DIAM);
}

void mousePressed() {
  toRight ^= true;
  bg = (color) random(#000000);
}

void keyPressed() {
  mousePressed();
}

Altharis

Hi GoToLoop, thanks a lot :) It works as it should but it's so advanced and colourful now, haha. I think this is a bit above my level because I'm still a complete beginner (this is my second day with Processing).

static final int DIAM = 0100, RAD = DIAM>>1;

This means that integer DIAM / diam of circle will always be 100 pixels, right? What does RAD and the >>1 section mean?

x = constrain(x + (toRight? STEP : -STEP), RAD, width - RAD);

x is the x for the center of the ellipse? Could you maybe explain what happens here? :) Like, how does it know if it should move left or right.

Thanks again!

TfGuy44

There is a boolean that tracks if the ellipse is moving to the right. It is always trying to move, one way or the other, but is constrained to remain within a certain range. The >>1 is a bit shift. He is doing a quick divide by two.

Altharis

Oh! So RAD is radius and the diameter is divided in half to get the radius :) And width - RAD is the one that keeps the circle from moving out of the window?

Sorry for the newb questions.

GoToLoop

This means that integer DIAM / diam of circle will always be 100 pixels, right? What does RAD and the >>1 section mean?

• DIAM is the ellipse()'s diameter. While RAD is its radius.
• >>1 is a slightly faster way to integer-divide by 2.
• 0100 is octal for 64 decimal btW.

x is the x for the center of the ellipse?

• Since ellipseMode() is set to default CENTER, x is indeed ellipse()'s center coordinate.

Like, how does it know if it should move left or right?

• That is determined by boolean toRight.
• When it's true, it goes w/ STEP. Otherwise it goes w/ -STEP.
• Take a look at ?: conditional operator:
  https://Processing.org/reference/conditional.html
• Also read about constrain() too:
  https://processing.org/reference/constrain_.html

TfGuy44

Yes. When it's on the left edge, x, the x position of the ellipse's center, is RAD distance away from 0, so the lower limit is RAD.

The right edge's limit is the width of the sketch minus the radius, which causes the center of the circle to stop when the edge of the circle touches the edge of the sketch.

Try using 0 and width as the limits to constrain to see the difference. Or -RAD and width+RAD.

Altharis

Thank you! I'll be sure to read the links!!