How do I move this train?

Processing Coding Questions
1

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
Processing KiHa Image982×985 28.3 KB

2

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
3

Hi,

Welcome to the community! :slight_smile:

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
4

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

1 Like
5

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.

6

I described it above in depth

You need a variable xtrain

7

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?

8

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
9

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:

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

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

3 Likes