# Set the robot to follow the mouse cursor

**URL:** <https://discourse.processing.org/t/set-the-robot-to-follow-the-mouse-cursor/28979>\
**Category:** Processing\
**Created:** [March 30, 2021, 2:20pm UTC](https://discourse.processing.org/t/set-the-robot-to-follow-the-mouse-cursor/28979 "2021-03-30T14:20:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sasa](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@sasa](https://discourse.processing.org/u/sasa)\
**Post date:** [March 30, 2021, 2:20pm UTC](https://discourse.processing.org/t/set-the-robot-to-follow-the-mouse-cursor/28979/1 "2021-03-30T14:20:59Z")

</div>

![GetImage (2)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2ac683983e60a991dfb8c666953b8f6a265a7add.png)

I’m coding the robot to follow the cursor. But there was a problem with the robot’s limbs, head, and torso being separated. Like the picture I posted, the robot should follow the cursor.

Code  
int x = 0;  
int y = 0;  
int faceX = x + 200;  
int faceY = y + 50;  
int faceW = 100;  
int faceH = 100;  
color faceFill = color(255);  
int l\_eyeX = faceX - 20;  
int l\_eyeY = faceY;  
int r\_eyeX = faceX + 10;  
int r\_eyeY = faceY;  
int eyeW = 10;  
int eyeH = 10;  
color eyesFill = color(0);  
int mouthX = faceX - 30;  
int mouthY = faceW - 30;  
int mouthW = 50;  
int mouthH = 10;  
int neckX1 = faceX;  
int neckY1 = faceW;  
int neckX2 = faceX;  
int neckY2 = faceW + 20;  
int chestX = faceX - 50;  
int chestY = faceW + 20;  
int chestW = 100;  
int chestH = 150;  
color chestFill = color(255);  
int l\_armX = faceW;  
int l\_armY = faceW - 20;  
int l\_armW = 150;  
int l\_armH = 140;  
int r\_armX = faceX + 100;  
int r\_armY = l\_armY;  
int r\_armW = 250;  
int r\_armH = 140;  
int l\_legX = faceX - 40;  
int l\_legY = faceX + 70;  
int l\_legW = 20;  
int l\_legH = 120;  
color l\_legFill = color(#19A6E5);  
int r\_legX = faceX + 20;  
int r\_legY = l\_legY;  
int r\_legW = 20;  
int r\_legH = 120;  
color r\_legFill = color(#19A6E5);

void setup() {  
size(800, 600);  
}

void draw() {  
background(204);  
x = mouseX - 200;  
y = mouseY - 200;  
faceX = x + 200;  
faceY = y + 50;  
l\_eyeX = faceX - 20;  
l\_eyeY = faceY;  
r\_eyeX = faceX + 10;  
r\_eyeY = faceY;  
mouthX = faceX - 30;  
mouthY = faceW - 30;  
neckX1 = faceX;  
neckY1 = faceW;  
neckX2 = faceX;  
neckY2 = faceW + 20;  
chestX = faceX - 50;  
chestY = faceW + 20;  
l\_armX = faceW;  
l\_armY = faceW - 20;  
r\_armX = faceX + 100;  
r\_armY = l\_armY;  
l\_legX = faceX - 40;  
l\_legY = faceX + 70;  
r\_legX = faceX + 20;  
r\_legY = l\_legY;

//face  
fill(faceFill);  
ellipse(faceX, faceY, faceW, faceH);

//eyes

fill(eyesFill);  
ellipse(l\_eyeX, l\_eyeY, eyeW, eyeH);  
ellipse(r\_eyeX, r\_eyeY, eyeW, eyeH);

//mouth

rect(mouthX, mouthY, mouthW, mouthH);

//neck

line(neckX1, neckY1, neckX2 ,neckY2);

//chest

fill(chestFill);  
rect(chestX, chestY, chestW, chestH);

//left arm

line(l\_armX, l\_armY, l\_armW, l\_armH);

//right arm

line(r\_armX, r\_armY, r\_armW, r\_armH);

//left leg

fill(#19A6E5);  
rect(l\_legX, l\_legY, l\_legW, l\_legH);

//right leg

rect(r\_legX, r\_legY, r\_legW, r\_legH);  
}

---

<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:** [March 30, 2021, 6:18pm UTC](https://discourse.processing.org/t/set-the-robot-to-follow-the-mouse-cursor/28979/2 "2021-03-30T18:18:22Z")

</div>

Hello sasa,

Could you please format you code with the `</>` icon?

The main issue with your code is that some value are fixed and some not.  
For example: `int r_armH = 140;` is fixed, no matter where your mouse is, it will always be 140.  
On the other hand `faceX = x + 200;` depends on x that represent the x mouse position so it will depend on where you mouse is on the screen. So while some parts will be moving, other will stay where they are. That’s why no everything is following the mouse.

Also, you have plenty of unnecessary code so I think it is important to start from the beginning and to go step by step.

The first thing would be to draw your robot without moving it.

Let’s imagine that you have a window 800 pixels wide and 600 pixels tall and you want to draw a robot in the middle of it. In your mind (or on a piece of paper), you need to think of it as something like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4e64221f088b966e0e9c87d3967340bfbb9c7842.png)

We want the bottom of the triangle to be in the middle of the window is the point at (400; 300). Think of it at your “reference point” it will be useful later on when you will want to move it.

Now you have the robot drawn in your head or in a piece of paper, it is juste a matter of drawing it to the screen with the proper points coordinates and the classic functions that you already used:

```auto
void setup() {
  size(800, 600); // We create a window of 800 by 600 pixels
  
  background(20); // We paint the background black
  
  noFill(); // We don't want the shapes to get filled by a color
  strokeWeight(3); // The thickness of the lines
  stroke(61, 111, 173); // The color of the lines
  
  // Drawing the head: it's a circle of diameter 30 pixels
  ellipse(400, 170, 60, 60);
  
  // Draw the body: it's a triangle
  triangle(400, 300, 340, 200, 460, 200);
  
  //Draw the bottom: it's 4 lines
  line(380, 300, 420, 300);
  line(420, 300, 440, 360);
  line(440, 360, 360, 360);
  line(360, 360, 380, 300);
}

```

You should recognize in this code the value that are on the drawing.

Now remember, I was telling you that we will consider the bottom part of the triangle to be the “point of reference”. What it means is that we will consider that the point is at the position (0, 0). So our figure becomes:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7554b9eb72d87349d81560bc052b3ba2248b34f2.png)

Be careful, this time we can have negative values!

If we translate that into code we have:

```auto
void setup() {
  size(800, 600); // We create a window of 800 by 600 pixels
  
  background(20); // We paint the background black
  
  noFill(); // We don't want the shapes to get filled by a color
  strokeWeight(3); // The thickness of the lines
  stroke(61, 111, 173); // The color of the lines
  
  // Drawing the head: it's a circle of diameter 30 pixels
  ellipse(0, -130, 60, 60);
  
  // Draw the body: it's a triangle
  triangle(0, 0, -60, -100, 60, -100);
  
  //Draw the bottom: it's 4 lines
  line(-20, 0, 20, 0);
  line(20, 0, 40, 60);
  line(40, 60, -40, 60);
  line(-40, 60, -20, 0);
}

```

The issue now is that if you run the code you will only this that on the top left corner:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e91f4d5aa2dab2dc8b635a93d89d4d6e6f08c04a.png)

And that’s normal because (0, 0) is the top left corner, so we just see what is on it’s right and in the bottom.

But now how do we put back the robot in the center?

Well if you notice, our point of reference is at (0, 0), and we want it at (400, 300) (see first drawing). So we can add 400 to x and 300 to y.  
And you can try with the other points, it will work to. The head is at (0, -130) and we want it at (400, 170). We do have 0 + 400 = 400 and -130 + 300 = 170.

So you can create a variable `dx = 400` et `dy = 300` and add that to all your coordinates:

```auto
void setup() {
  size(800, 600); // We create a window of 800 by 600 pixels
  
  background(20); // We paint the background black
  
  noFill();
  strokeWeight(3);
  stroke(61, 111, 173);
  
  int dx = 400; // We add 400 to all the x
  int dy = 300; // We add 300 to all the y 
  
  // Drawing the head: it's a circle of diameter 30 pixels
  ellipse(0 + dx, -130 + dy, 60, 60);
  
  // Draw the body: it's a triangle
  triangle(0 + dx, 0 + dy, -60 + dx, -100 + dy, 60 + dx, -100 + dy);
  
  //Draw the bottom: it's 4 lines
  line(-20 + dx, 0 + dy, 20 + dx, 0 + dy);
  line(20 + dx, 0 + dy, 40 + dx, 60 + dy);
  line(40 + dx, 60 + dy, -40 + dx, 60 + dy);
  line(-40 + dx, 60 + dy, -20 + dx, 0 + dy);
}

```

You can try it and it will work: we will get the first image back. The nice thing about this, is that we can now decide were we want the top of the triangle to be, modify dx and dy for that position and it will move everything there. For example, we can have `dx = mouseX` et `dy = mouseY` so the bottom of the triangle will always be were you mouse is.

Now I think you agree with me that it is quite long and if you have more shapes, you will need to add `+ dx` and `+ dy` everywhere so it is not the best.

Luckily, processing as a way to handle this really nicely. the [translate()](https://processing.org/reference/translate_.html) function. this time, instead of moving our robot in the middle, imagine that your robot is on a table (the background) and instead of moving just the robot, we move the full table. And of course the robot that is on the table will move with that table.

So the code can be simplified like this:

```auto
void setup() {
  size(800, 600); // We create a window of 800 by 600 pixels
  
  background(20); // We paint the background black
  
  noFill();
  strokeWeight(3);
  stroke(61, 111, 173);
  
  int dx = 400; // We add 400 to all the x
  int dy = 300; // We add 300 to all the y 
  
  translate(dx, dy); // Moving the table
  
  // Drawing the head: it's a circle of diameter 30 pixels
  ellipse(0, -130, 60, 60);
  
  // Draw the body: it's a triangle
  triangle(0, 0, -60, -100, 60, -100);
  
  //Draw the bottom: it's 4 lines
  line(-20, 0, 20, 0);
  line(20, 0, 40, 60);
  line(40, 60, -40, 60);
  line(-40, 60, -20, 0);
}

```

Hope it helps