# How do I move this train?

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);
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
|
|
|/

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()”

``````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()

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

Declaring xtrain

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

[EDITED]

2 Likes

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!

1 Like

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

1 Like

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.

I described it above in depth

You need a variable xtrain

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?

in draw() where you call the function train

Explanation

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

``````void train() {

}
``````

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

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

`train();`

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

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

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

1 Like

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:

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

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

3 Likes