How to make a moving background in Processing

Processing Coding Questions
1

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

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.

2

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

:slightly_smiling_face:

3 Likes
3

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.

1 Like
4

Thanks!:grin:

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

5

Hi @epicrafter

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à! :wink:

2 Likes
6

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:

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 "

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…

/////////////// ///////////////
//          //  //           //
//    1     //  //      2    //      <- <-
//          //  //           //
//          //  //           //
/////////////  ////////////////
7

Hi

animation and games

1 Like
8

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