examples / processing / input / draggable-circle

Draggable Circle

example processing input
float circleX;
float circleY;
float circleDiameter;

void setup() {
  size(200, 200);
  circleX = width/2;
  circleY = height/2;
  circleDiameter = 50;

void draw() {


  if (dist(mouseX, mouseY, circleX, circleY) < circleDiameter/2) {
    //mouse is inside the circle

    if (mousePressed) {
      //mouse is inside the circle and clicked
      //color it bright green and move the circle
      fill(64, 256, 64);
      circleX = mouseX;
      circleY = mouseY;
    } else {
      //mouse is inside the circle but not clicked
      //highlight the circle light green but don't move it
      fill(128, 256, 128);
  } else {
    //mouse is outside the circle, color it gray

  ellipse(circleX, circleY, circleDiameter, circleDiameter);

This code keeps track of a circle’s position and size, and then uses the dist() function to check whether the cursor position is inside that circle. If so, then the circle is either highlighted or repositioned depending on whether the mouse is currently pressed.

In other words, this code shows a circle that can be repositioned by dragging it around the screen.

draggable circles

Tweak Ideas