# Moving a shape by mouseClicked function

**URL:** <https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112>\
**Category:** Coding Questions\
**Created:** [October 4, 2018, 6:26am UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112 "2018-10-04T06:26:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nerdboybi](https://avatars.discourse-cdn.com/v4/letter/n/a88e4f/32.png) [@nerdboybi](https://discourse.processing.org/u/nerdboybi)\
**Post date:** [October 4, 2018, 6:26am UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112/1 "2018-10-04T06:26:05Z")

</div>

I would like to move a shape to wherever I have clicked on the canvas. This is my program. Please tell me what changes i need to make in this

```auto
int xPos;
int yPos;

void setup()
{
  size(500,500);
  
}

void draw()
{
  background(0);
 

   drawSquare();
   mouseClicked();
   
   

}

void drawSquare()
{
  
   final int RECT_WIDTH=300;
  final int RECT_HEIGHT=200;
  final int RECT_POS_X=(width-RECT_WIDTH)/2;
  final int RECT_POS_Y=(height-RECT_HEIGHT)/2;
  
  rect(RECT_POS_X,RECT_POS_Y,RECT_WIDTH,RECT_HEIGHT);
 
   
}

void mouseClicked()
{
  
  xPos=mouseX;
  yPos=mouseY;

}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 4, 2018, 8:58am UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112/2 "2018-10-04T08:58:34Z")

</div>

you should use the mouse position values for the rectangle position

```auto
int square=20;
void setup(){ size(500,500); background(80); rectMode(CENTER); }
void draw(){ }
void mouseClicked(){ background(80); rect( mouseX,mouseY,square,square); }
void mouseWheel(MouseEvent event) { square += event.getCount()*3; }

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 4, 2018, 9:16am UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112/3 "2018-10-04T09:16:49Z")

</div>

Do you understand your own code?  
You are drawing a rectangle.  
You have variables to record where the last mouse click was.

All you need to do is use those variables for the rectangle’s position.

---

<div class="post-metadata">

**Author:** ![nerdboybi](https://avatars.discourse-cdn.com/v4/letter/n/a88e4f/32.png) [@nerdboybi](https://discourse.processing.org/u/nerdboybi)\
**Post date:** [October 4, 2018, 12:16pm UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112/4 "2018-10-04T12:16:25Z")

</div>

It doesnt work . It just draws the position of the rectangle on those coordinates without clicking it

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 4, 2018, 12:43pm UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112/5 "2018-10-04T12:43:24Z")

</div>

It’s hard to understand what you even want to do. As best as I can tell, you want something like this:

```auto
float x=-20, y=-20;

void setup() {
  size(400, 400);
  rectMode(CENTER);
}

void draw() {
  background(0);
  rect(x, y, 20, 20);
}

void mousePressed() {
  x = mouseX;
  y = mouseY;
}

```

If this isn’t exactly what you want, you need to do a better job explaining what you are trying to accomplish.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 4, 2018, 3:02pm UTC](https://discourse.processing.org/t/moving-a-shape-by-mouseclicked-function/4112/6 "2018-10-04T15:02:43Z")

</div>

Same remark as in your other post: [Simple Circle and rectangle code doubt [Solved]](https://discourse.processing.org/t/simple-circle-and-rectangle-code-doubt-solved/4111/4)