Move Combined Figure Like moving a Single Figure In processing - processing

Question

I am trying to move a car I drew using Processing. For drawing this Car I have used multiple methods like rect, line, circle, and I want to move this car along the x axis, back and forth. But when I try to move it by increasing the X- axis of all the figures, then it makes different figure, I wanted to know how can I move this car as a one object.Picture of the car
float circle1X = 120;
float circle1Y = 250;
float circle2X = 370;
float circle2Y = 250;
void setup(){
size(1200, 600);
background(135,206,235);
}
void draw(){
noFill();
rect(50, 200, 390, 50);
line(150, 200, 200, 140);
line(200, 140, 360, 140);
line(360, 140, 380, 200);
line(165, 200, 205, 150);
line(205, 150, 350, 150);
line(350, 150, 368, 200);
line(165, 200, 165, 250);
circle(circle1X, circle1Y, 70);
circle(circle1X, circle1Y, 55);
circle(circle2X, circle2Y, 70);
circle(circle2X, circle2Y, 55);
}

Answer 1

The idea to grasp here is to love matrix stacks and transformations (like translate).
Remember how your drawing's coordinates origin on the top left corner of the screen? That's your current coordinate system's origin point. When applying transformations, you decide on a transformation and you apply it to the whole coordinate system. As an example, if I write this:
rect(100, 100, 150, 150);
translate(300, 100);
rect(100, 100, 150, 150);
I'll get two different rectangles even though the coordinates I wrote were the same, because I modified where the origin point of my coordinate system is before drawing the second rectangle:
So you already get the idea that a simple translation would move your car around just fine. But that wouldn't work if you have, say, 2 cars to move around in the same sketch: transformations are cumulative. Of course, you can cancel one translate with his exact opposite, but it would feel stupid, wouldn't it? And what if you made some complicated mix of translations, rotations and whatever else?
We're lucky, though! The good people at the Processing Foundation though about it and added the pushMatrix() and the popMatrix() commands. The pushMatrix() method "save" your coordinate system just like it currently is. Then you can do a couple transformation, draw stuff and then "pop" the matrix and go back to your original coordinate system. I'm doing it with your car in this example:
float circle1X = 120;
float circle1Y = 250;
float circle2X = 370;
float circle2Y = 250;
void setup() {
size(1200, 600);
}
void draw() {
// background() goes here or you'll never "clean" the screen (you'll draw every frame over the last one)
background(135, 206, 235);
drawCar(); // car #1 to see where the coordinates are drawing the car
pushMatrix();
translate(500, 0); // I'm moving everything I'll draw next 500 pixels right
drawCar(); // car #2 is 500 pixels right
popMatrix();
rect(100, 100, 200, 200); // this random rectangle will appear exactly where it should (the translation had no effect since it was popped before)
}
// I moved these lines in their own method, it's easier to read and modify this way
void drawCar() {
noFill();
rect(50, 200, 390, 50);
line(150, 200, 200, 140);
line(200, 140, 360, 140);
line(360, 140, 380, 200);
line(165, 200, 205, 150);
line(205, 150, 350, 150);
line(350, 150, 368, 200);
line(165, 200, 165, 250);
circle(circle1X, circle1Y, 70);
circle(circle1X, circle1Y, 55);
circle(circle2X, circle2Y, 70);
circle(circle2X, circle2Y, 55);
}
As you can see, it works flawlessly and it's fairly easy to grasp and use. In fact, it can be waaay easier to draw with matrixes: instead of drawing your car "where you want to see it", you can draw it around the (0, 0) point of your sketch, and use the (0, 0) point as the anchor of your car drawing, making it's coordinates a lot easier to manage (sorry I messed the car's drawing a little bit but you'll get the idea anyway): in this modified sketch, I use a carX integer as the X coordinate of the car, and the car's "anchor point" is the top left corner of the car's drawing (I tried to substract the unneeded X and Y slack from the car and ended up messing it a little bit). Every time you mouse click, the car moves right a little because the translation uses the incremented variable:
float circle1X = 70;
float circle1Y = 200;
float circle2X = 320;
float circle2Y = 200;
int carX = 0;
void setup() {
size(1200, 600);
}
void draw() {
background(135, 206, 235);
pushMatrix();
translate(carX, 0);
drawCar();
popMatrix();
}
void mouseClicked() {
carX += 50;
}
void drawCar() {
noFill();
rect(0, 150, 390, 0);
line(100, 150, 150, 90);
line(150, 90, 310, 90);
line(310, 90, 330, 150);
line(115, 150, 155, 100);
line(155, 100, 300, 100);
line(300, 100, 318, 150);
line(115, 150, 115, 200);
circle(circle1X, circle1Y, 70);
circle(circle1X, circle1Y, 55);
circle(circle2X, circle2Y, 70);
circle(circle2X, circle2Y, 55);
}
The idea here is that the "anchor point" is close to the drawing, and the car's coordinates are use to translate it to where it should be drawn. More elegant, less complicated, easier to use.
I told you we could draw 2 different cars easily, right? Here's a quick and dirty example (modify the draw() loop only):
int carDelta = 0;
void draw() {
background(135, 206, 235);
// car #1 is going right
pushMatrix();
translate(carDelta, 0);
drawCar();
popMatrix();
// car #2 is going down
pushMatrix();
translate(0, carDelta);
drawCar();
popMatrix();
}
Hope this helps. Have fun!

Answer 2

Quick and dirty solution:
You can translate the anchor point from where everything is drawn with.
This way you dont have do change anything from your drawing.
However this doesnt really help you in the long way.
// at the start
in x1 = 0;
// in draw before you draw your car
x1++;
translate(x1, 0);
Nicer solution:
Learn about classes and try recreating the car as such.
Include a variable for its position.
https://processing.org/reference/class.html
And check out the tutorials by Daniel Shiffman
https://www.youtube.com/watch?v=lmgcMPRa1qw