# How do I move this train?

**URL:** <https://discourse.processing.org/t/how-do-i-move-this-train/25560>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [November 20, 2020, 1:44pm UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560 "2020-11-20T13:44:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Crimson-The-Saiyan](https://avatars.discourse-cdn.com/v4/letter/c/7bcc69/32.png) [@Crimson-The-Saiyan](https://discourse.processing.org/u/Crimson-The-Saiyan)\
**Post date:** [November 20, 2020, 1:44pm UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/1 "2020-11-20T13:44:00Z")

</div>

Ok, so basically, I’m a begginer to Processing, I’m trying to make a train move for a school project, but I don’t know how, can anyone help me?

Code:  
//Setting up the background  
void setup(){  
size(1000,1000);  
}  
void draw() {  
//Giving the background color  
background(0,100,200);  
//Making clouds  
stroke(200,200,200);  
fill(250,250,250);  
ellipse(50,50,350,80);  
ellipse(100,100,500,50);  
ellipse(400,50,500,100);  
ellipse(500,100,400,75);  
ellipse(750,50,350,50);  
ellipse(750,50,500,50);  
ellipse(800,50,500,100);  
ellipse(900,100,400,75);  
ellipse(900,150,300,50);  
//Making trees  
//Log (a physical log not a computer log)  
strokeWeight(2);  
stroke(0,0,0);  
fill(50,25,0);  
rect(-30,400,200,600);  
//Leaves  
noStroke();  
fill(0,120,0);  
ellipse(50,300,250,250);  
ellipse(50,200,250,250);  
ellipse(150,300,250,250);  
//Repeat for 3 more trees  
//tree 1  
stroke(0,0,0);  
fill(50,25,0);  
rect(200,400,200,600);  
fill(0,120,0);  
noStroke();  
ellipse(250,300,250,250);  
ellipse(300,200,250,250);  
ellipse(400,300,250,250);  
//tree 2  
stroke(0,0,0);  
fill(50,25,0);  
rect(450,400,200,600);  
fill(0,120,0);  
noStroke();  
ellipse(500,300,250,250);  
ellipse(550,200,250,250);  
ellipse(600,300,250,250);  
//tree 3  
stroke(0,0,0);  
fill(50,25,0);  
rect(750,400,200,600);  
fill(0,120,0);  
noStroke();  
ellipse(800,300,250,250);  
ellipse(850,200,250,250);  
ellipse(900,300,250,250);  
//Adding Insects  
strokeWeight(1);  
fill(0,0,0);  
stroke(0,0,0);  
ellipse(250,250,50,85);  
noFill();  
stroke(255, 102, 0);  
stroke(0, 0, 0);  
bezier(230,230,280,50,160,265,200,200);  
noFill();  
stroke(255, 102, 0);  
stroke(0, 0, 0);  
bezier(300,170,265,160,275,80,265,250);  
rect(230,250,-25,1.5);  
rect(230,280,-25,1.5);  
rect(270,250,25,1.5);  
rect(270,280,25,1.5);  
//Making the ground  
noStroke();  
fill(0,120,0);  
rect(0,700,1000,500);  
//Making the train tracks (base tracks)  
stroke(0,0,0);  
fill(100,100,100);  
rect(0,750,1000,40);  
rect(0,900,1000,40);  
//Making the train tracks (sleepers)  
fill(100,50,0);  
rect(-50,790,60,110);  
rect(50,790,60,110);  
rect(150,790,60,110);  
rect(250,790,60,110);  
rect(350,790,60,110);  
rect(450,790,60,110);  
rect(550,790,60,110);  
rect(650,790,60,110);  
rect(750,790,60,110);  
rect(850,790,60,110);  
rect(950,790,60,110);  
//Making the train (Wheels)  
fill(0,0,0);  
rect(100,800,750,100);  
fill(50,50,50);  
ellipse(800,860,100,100);  
ellipse(650,860,100,100);  
rect(350,825,250,100);  
ellipse(300,860,100,100);  
ellipse(150,860,100,100);  
noStroke();  
triangle(825,825,875,850,825,875);  
triangle(125,825,75,850,125,875);  
//Making the train (Body)  
stroke(0,0,0);  
fill(200,175,100);  
strokeWeight(2);  
rect(75,550,800,300,20);  
fill(200,0,0);  
strokeWeight(1);  
rect(75,612.5,800,125);  
//Making the train (diesel roof)  
fill(175,175,175);  
rect(100,550,750,5);  
rect(100,550,100,-25);  
rect(262.5,550,100,-25);  
rect(425.5,550,100,-25);  
rect(587.5,550,100,-25);  
rect(750,550,100,-25);  
//Making the train (doors)  
noFill();  
rect(150,600,100,200,5);  
rect(700,600,100,200,5);  
fill(0,0,0);  
rect(175,625,50,75,5);  
rect(725,625,50,75,5);  
//Making the train (windows - passenger)  
rect(275,635,90,90,10);  
rect(378.3333333333,635,90,90,10);  
rect(481.6666666666,635,90,90,10);  
rect(585,635,90,90,10);  
//Making the train (windows - crew compartment)  
rect(75,600,50,75,10);  
rect(875,600,-50,75,10);  
//Making the train (headlights and taillights)  
fill(200,175,100);  
ellipse(80,775,15,15);  
ellipse(870,775,15,15);  
fill(250,0,0);  
ellipse(80,775,10,10);  
fill(250,250,0);  
ellipse(870,775,10,10);  
}

Image of current code  
|  
|  
|/

 ![Processing KiHa Image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7450040739e5587babd600f9d85796a7c72b4345.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 20, 2020, 3:24pm UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/2 "2020-11-20T15:24:21Z")

</div>

Hello and welcome to the forum!

Great to have you here!

Beautiful image by the way.

**What you could do**

You can write a function “train()”

```auto
void train() {
     // code for train goes here. Move it from draw() 
}

```

and call the function from draw(): `train();`

Now you got a new function which makes your code much better.

**Moving**

Now:

before calling the function train() from within draw() say in draw()

```auto
translate(xtrain, 0); 
xtrain++;
train(); 

```

**Declaring xtrain**

before `setup()` say `int xtrain=0; // or -200`

[EDITED]

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 20, 2020, 6:27pm UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/3 "2020-11-20T18:27:13Z")

</div>

Hi,

Welcome to the community! 🙂

As @Chrisir said, beautiful drawing

Just wanted to add that here you are talking about moving something. Moving something on a screen (2 dimensions) is called an animation.

In Processing and most of the time, you do frame by frame animation. It means that each frame you are going to redraw your train and make it move to produce the feeling of movement.

This is the `draw()` function that is called for each frame. In this function you want to draw your train but offset it’s x position each time by a tiny amount.

Also as Chrisir said, it’s better to structure your code into functions, they are reusable pieces of code that you can call however you want in your code without repeating yourself.

Indeed the `translate()` method is the easier one since you don’t have to change each one of the coordinates of all the display functions, it’s translating the coordinate system in the x direction here.

The last thing to do is to define a variable that is going to represent the offset in the x direction. And at each draw call, add some amount to it.

Good luck!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 20, 2020, 6:35pm UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/4 "2020-11-20T18:35:20Z")

</div>

Very good in depth explanation and explanation of the background, so thank you!

---

<div class="post-metadata">

**Author:** ![Crimson-The-Saiyan](https://avatars.discourse-cdn.com/v4/letter/c/7bcc69/32.png) [@Crimson-The-Saiyan](https://discourse.processing.org/u/Crimson-The-Saiyan)\
**Post date:** [November 21, 2020, 12:22am UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/5 "2020-11-21T00:22:25Z")

</div>

Thanks for all the help, I am slightly confused though. I tried putting your script in front of void train, however when I did, it told me: It looks like you’re mixing “Active” and “static” modes. Also, I’m still trying to learn translate and all the other codes, I only know the basics like rect, ellipse, float etc.

Edit 1: Never mind I just had to put it in a void, I’m stupid  
Edit 2: And I also just realized I don’t know how to use translate and such, how do I make it start from somewhere and move somewhere else, how to change speed etc.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 21, 2020, 3:35am UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/6 "2020-11-21T03:35:32Z")

</div>

> [@Crimson-The-Saiyan](#):
>
> don’t know how to use translate and such

I described it above in depth

You need a variable xtrain

---

<div class="post-metadata">

**Author:** ![Crimson-The-Saiyan](https://avatars.discourse-cdn.com/v4/letter/c/7bcc69/32.png) [@Crimson-The-Saiyan](https://discourse.processing.org/u/Crimson-The-Saiyan)\
**Post date:** [November 21, 2020, 11:48am UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/7 "2020-11-21T11:48:03Z")

</div>

Alright, sorry for not understanding and thanks, but I still don’t understand where to put the translate script, you say put it “before train”, but do you want me to put it in front of void train? Or inside void train? Or the end of void train?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 21, 2020, 11:48am UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/8 "2020-11-21T11:48:52Z")

</div>

in draw() where you call the function train

**Explanation**

1. 

you make a new function train (similar to the function draw):

```auto
void train() {

}

```

1. 

You _move_ all code lines for the train from draw into the new train function.

1. 

To let the train() function run, you need to call it from draw():

`train();`

1. 

To make the train move, say `translate()` before it and increase the x-value (named `xtrain`) of the translation as shown.

1. 

When you give `xtrain` a value of 0the train starts at 0, so you can give `xtrain` also a value of `-200`.

1. 

When you say `xtrain++;` it means you increase `xtrain` by 1. It’s the same as `xtrain = xtrain + 1;`

The value 1 is the speed here, so try `xtrain = xtrain + 5;` to go faster.

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 21, 2020, 11:51am UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/9 "2020-11-21T11:51:00Z")

</div>

show your current entire code please

to isolate the movment of the train against other parts of the image that are not allowed to move,

surround the section in draw() with pushMatrix and popMatrix:

```auto
pushMatrix(); 
translate(xtrain, 0); 
xtrain++;
train(); 
popMatrix();

```

---

<div class="post-metadata">

**Author:** ![Crimson-The-Saiyan](https://avatars.discourse-cdn.com/v4/letter/c/7bcc69/32.png) [@Crimson-The-Saiyan](https://discourse.processing.org/u/Crimson-The-Saiyan)\
**Post date:** [November 21, 2020, 12:03pm UTC](https://discourse.processing.org/t/how-do-i-move-this-train/25560/10 "2020-11-21T12:03:46Z")

</div>

Thanks for making it nice and clear for me, I managed to finally get it working. Your a legend.