# How to make a moving background in Processing

**URL:** <https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111>\
**Category:** Coding Questions\
**Created:** [October 5, 2022, 11:49pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111 "2022-10-05T23:49:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![epicrafter](https://avatars.discourse-cdn.com/v4/letter/e/ecb155/32.png) [@epicrafter](https://discourse.processing.org/u/epicrafter)\
**Post date:** [October 5, 2022, 11:49pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/1 "2022-10-05T23:49:42Z")

</div>

Hello, I am having trouble making a moving background. Here is my code:

```auto
int frame;
void setup()
{
  size (400,400);
  fill(204,102,0);
  frameRate (5);
  frame = 1;
  stroke (255,125,0);
}
void draw()
{
  switch (frame)
  {
    case 1:
    
    background (random (255), random (255), random (255));
    rect (0,325,400,325);
    stroke (random (255), random (255), random (255));
    strokeWeight (10);
    line (200,200,225,235);
    line (225,235,245,270);
    line (245,270,260,305);
    line (260,305,270,350);
    line (200,200,175,235);
    line (175,235,155,270);
    line (155,270,140,305);
    line (140,305,135,350);
    break;
    
    case 2:
    
    background (random (255), random (255), random (255));
    rect (0,325,400,325);
    stroke (random (255), random (255), random (255));
    strokeWeight (10);
    line (200,200,220,235);
    line (225,235,240,270);
    line (245,270,255,305);
    line (260,305,265,350);
    line (200,200,175,235);
    line (175,235,160,265);
    line (155,270,145,300);
    line (140,305,140,345);
    break;
    
    }

    frame++;
    
    if (frame > 2)
    {
      frame = 1;
    }
}

```

this is what I am trying to accomplish.

> **[UACR Processing Challenges - Moving Background](https://sites.google.com/site/uacrprocessing/moving-background)**
>
> One way to animate motion is to create a moving background while keeping the foreground in one place. Create a moving animation using this technique.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [October 6, 2022, 1:16am UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/2 "2022-10-06T01:16:23Z")

</div>

Hello @epicrafter

With every loop in draw() the x positions in your background objects need to change at least +1 to go forward or -1 to go backward. If you want the background to move faster you can speed it up at higher intervals—+2, +3, etc…

Both tutorials below are excellent:  
[https://funprogramming.org/14-New-directions-for-our-moving-circle.html](https://funprogramming.org/14-New-directions-for-our-moving-circle.html)

> **[Animation](https://happycoding.io/tutorials/processing/animation)**
>
> Learn how to create animations in Processing.

🙂

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [October 6, 2022, 1:32am UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/3 "2022-10-06T01:32:52Z")

</div>

The code was missing the declaration of variable `frame`, but besides that, it runs and animate the bg. What is the problem you have?t  
I liked it.

---

<div class="post-metadata">

**Author:** ![epicrafter](https://avatars.discourse-cdn.com/v4/letter/e/ecb155/32.png) [@epicrafter](https://discourse.processing.org/u/epicrafter)\
**Post date:** [October 6, 2022, 1:55pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/4 "2022-10-06T13:55:47Z")

</div>

Thanks!😁

Could you perhaps sent me a sample code for what I am trying to accomplish please?

---

<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:** [October 6, 2022, 1:59pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/5 "2022-10-06T13:59:31Z")

</div>

Hi @epicrafter

> [@epicrafter](#):
>
> Could you perhaps sent me a sample code for what I am trying to accomplish please?

We are not going to provide the full solution to your issue, but in the link that @debxyz sent, you have some sample code that makes a ball move. Replace that with a background image or drawing and make it move horizontally and voilà! 😉

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [October 6, 2022, 2:41pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/6 "2022-10-06T14:41:25Z")

</div>

> [@epicrafter](#):
>
> Thanks!😁
> 
> Could you perhaps sent me a sample code for what I am trying to accomplish please?

~~The **only** change I made to your code was adding the declaration of `frame` var, but I see now that it is there (first line), I probably missed it when copying the code.~~  
~~So I really don’t know what different result of what you are getting you want.~~

edit: sorry, I got confused by the missing stuff that was not missing… my bad. It’s clear what you want.

Well my suggestion is: first try to make a simple shape move across the screen, like a `rect()`. The links and answers here already points you how to accomplish that. Once you get that done, apply the same thinking to yours backgrounds.  
Also, perhaps wrap each frame code in a method to make things easier to read and manipulate, like:

```auto
void frame_one(){
background (random (255), random (255), random (255));
rect (0,325,400,325);
stroke (random (255), random (255), random (255));
strokeWeight (10);
line (200,200,225,235);
line (225,235,245,270);
line (245,270,260,305);
line (260,305,270,350);
line (200,200,175,235);
line (175,235,155,270);
line (155,270,140,305);
line (140,305,135,350);
}

```

and in the switch you would say "

```auto
case1:
frame_one();
break;

```

probably after you get the moving part you migth want to pass some arguments to `frame_one()` method… maybe.  
like: `frame_one(someValue, someOther);`

The tricky part may be how to have a continuous bg move or loop… You might draw next ‘frame’ out of the window, to slowly come into the window and replace the one displayed…

```auto
/////////////// ///////////////
// // // //
// 1 // // 2 // <- <-
// // // //
// // // //
///////////// ////////////////
```

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 6, 2022, 4:48pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/7 "2022-10-06T16:48:13Z")

</div>

Hi

animation and games

> **[Games - OpenProcessing](https://openprocessing.org/curation/25/)**
>
> This collection includes games that are built with Processing. Enjoy!

---

<div class="post-metadata">

**Author:** ![epicrafter](https://avatars.discourse-cdn.com/v4/letter/e/ecb155/32.png) [@epicrafter](https://discourse.processing.org/u/epicrafter)\
**Post date:** [February 3, 2023, 3:19pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-background-in-processing/39111/8 "2023-02-03T15:19:59Z")

</div>

Thanks everyone for all your help. I have accomplished what I wanted to accomplish.