Making multiple objects move across the screen

Question

From the code, I don't really know how to make the objects (Trees, roads, clouds) go to x = 400 and move across the screen when these objects go off the screen beyond x = 0 so that the animation will be continuous forever.

Ps. I use the variable called "movex" for all of the objects that I want them to move.

Ps.2 I use Khan academy website to do this.

Thank you!! :)

noStroke();
var x = 200;
var y = 255;
var movex = 200;
var sunsize = 50;

draw = function() {

//sky
background(207, 237, 255);

//sun
fill(255, 64, 0);
ellipse(139, y - 10, sunsize, sunsize);

//mountain
fill(209, 170, 86);
arc(95, y + 80, 331, 174, 180, 360);
fill(138, 91, 40);
arc(414, y + 80, 507, 340, 180, 360);

//cloud
fill(255, 255, 255);
ellipse(movex + 105, 120, 96, 21);
ellipse(movex + 75, 105, 73, 30);
ellipse(movex + 44, 120 , 84, 28);

//cloud2
ellipse(movex + 200, 50, 65, 21);
ellipse(movex + 239, 61, 73, 25);
ellipse(movex + 244, 50, 106, 35);

//cloud3
ellipse(movex - 120, 50, 65, 21);
ellipse(movex - 95, 61, 73, 25);
ellipse(movex - 85, 50, 106, 35);
//tree
fill(158, 105, 6);
rect(movex - 157, y - 40, 35, 150);

fill(20, 158, 15);
ellipse(movex - 165, y - 20, 80, 60);
ellipse(movex - 105, y - 30, 80, 60);

fill(73, 227, 38);
ellipse(movex - 165, y - 50,80,60);
ellipse(movex - 105, y - 400,80,60);

fill(20, 158, 15);
ellipse(movex - 135, y - 90,110,80);

//tree2
fill(158, 105, 6);
rect(movex - 10, y - 40, 35, 150);

fill(20, 158, 15);
ellipse(movex - 10, y - 20, 80, 60);
ellipse(movex + 50, y - 30, 80, 60);

fill(73, 227, 38);
ellipse(movex + 10, y - 70, 100, 80);
ellipse(movex - 105, y - 400, 80, 60);

//tree3
fill(158, 105, 6);
rect(movex + 155, y - 30, 35, 150);

fill(20, 158, 15);
ellipse(movex + 155, y, 60, 50);
ellipse(movex + 175, y - 30, 60, 49);
ellipse(movex + 205, y, 60, 50);

//road
fill(0, 0, 0);
rect(0, y + 80, 1000, 65);
fill(255, 255, 255);
rect(movex - 190, y + 100, 35, 18);
rect(movex - 95, y + 100, 35, 18);
rect(movex - 5, y + 100, 35, 18);
rect(movex + 80, y + 100, 35, 18);
rect(movex + 160, y + 100, 35, 18);


//car
fill(240, 99, 56);
quad(x - 144, y + 30, x - 81, y + 30, x - 50, y + 80, x - 171, y + 80);
rect(x - 185, y + 76, 159, 30);
fill(204, 190, 190);
rect(x -117, y + 44, 32, 25);
fill(87, 87, 87);
ellipse(x - 140, y + 105, 35, 35);
ellipse(x - 65, y + 105, 35, 35);

sunsize ++;

};

Here is the image of my work!!

Answer 1

First off, your question and given code was confusing. In your code, you put movex as the location of the x values for your shapes. Instead, you should use your defined but not used variable x . So in my answer instead of movex as the position of the x values of the shapes I will use x , and I will assume that movex is actually the number you want to increase x value by.

A simple, easy, one-line way to do this is to just add this:

x += movex;

This will continuosly increase the x location of the shapes by movex each loop.

Also, since you're inly using this to draw, I would suggest usng

translate(x, y);

That way, you can just type in the number and not have to aa x and y to it each time.