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:
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:
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:
Be careful, this time we can have negative values!
If we translate that into code we have:
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:
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:
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() 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:
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
