# Ball movement is stuttery. How to achieve smooth movement?

**URL:** <https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094>\
**Category:** Coding Questions\
**Created:** [June 16, 2019, 1:05pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094 "2019-06-16T13:05:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [June 16, 2019, 1:05pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/1 "2019-06-16T13:05:57Z")

</div>

I opened a SO article here: Hope it’s ok to post it [https://stackoverflow.com/questions/56496427/my-ball-doesnt-move-smoothly-but-with-stutters-how-can-i-achieve-smoother-move](https://stackoverflow.com/questions/56496427/my-ball-doesnt-move-smoothly-but-with-stutters-how-can-i-achieve-smoother-move)

Basically, i want to achieve smooth movement of the bars and also the ball but i have no clue how…

This is the sketch on openprocessing where you can see the whole source: [https://www.openprocessing.org/sketch/672559](https://www.openprocessing.org/sketch/672559)

Hope someone here can help me \<3

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 16, 2019, 1:21pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/2 "2019-06-16T13:21:15Z")

</div>

its running from here but yes, not nice,

so i tried to see your code  
( old win7 PC firefox browser )  
but  
mySketch, tab2,tab3,tab4,tab5,tab7  
look empty from here.  
i think your project is damaged?

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [June 16, 2019, 1:22pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/3 "2019-06-16T13:22:57Z")

</div>

No it’s not empty. Maybe you’re blocking some scripts or something? I just checked and everybody is allowed to see the code.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 16, 2019, 1:55pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/4 "2019-06-16T13:55:07Z")

</div>

sorry, possibly my problem, now it loads,

and using [1] player left [w][s] is usable,  
possible the paddle too slow moving  
( even frameRate print looks good )  
check the details on while key pressed and if key pressed and released

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [June 16, 2019, 3:53pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/5 "2019-06-16T15:53:45Z")

</div>

So do you know how i could achieve a smoother movement of the ball/paddles?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 17, 2019, 1:59am UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/6 "2019-06-17T01:59:07Z")

</div>

i check frameRate and ball velocity, OK  
still no idea if there is a bug in the program logic/execution  
or other performance issues??

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [June 17, 2019, 10:42am UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/7 "2019-06-17T10:42:41Z")

</div>

Yeah i know that framerate and velocity are ok. I posted this question to get an answer - not more questions. Sorry kll - but if you don’t know what i could change that the ball runs smoother - why are you writing here? 😕

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 17, 2019, 12:27pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/8 "2019-06-17T12:27:24Z")

</div>

When the ball moves not smooth:

It flies because you add something to it. Make this value smaller, then it will look smoother.

The higher the framerate the better

Your not smooth movement can just be that the sketch is too slow

**Remark**

Your displayBall is too slow

You don’t need pushMatrix and Translation and popMatrix, just use rect(x,y… instead

That might be true for the paddles too

The rects in draw also take a bit time

In draw there are a lot of booleans checked, instead you could use state variable that is startUp, game, player1won or player2won

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 17, 2019, 12:40pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/9 "2019-06-17T12:40:05Z")

</div>

There is a special kind of stutter in bouncing/ at borders

When you encounter this, pm me

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [June 17, 2019, 1:20pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/10 "2019-06-17T13:20:40Z")

</div>

I removed the push/pop matrix stuff in the draws of ball and paddle and replaced it with only rect(…). That didn’t help though.

The sketch runs at around 60 fps which should be more than enough to not stutter for the human eye.

If i reduce the velocity of the ball - it will fly slower and i don’t want that. Also the checks in the draw i need for the gameplay and also because i use it with the kinect. (Kinect code is removed in the sketch on openprocessing because they don’t have those libraries…)

Still - the ball doesn’t go really smooth but stutters a little bit. There must be something i’m missing. -.-

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [June 19, 2019, 12:26am UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/11 "2019-06-19T00:26:35Z")

</div>

Nobody here got a clue on how to solve this? I really need some sort of smooth movement 😕

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 19, 2019, 6:41am UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/12 "2019-06-19T06:41:44Z")

</div>

I honestly can’t see the problem. Might be hardware specific? Or your browser being starved for RAM?

At any rate, a general way to avoid hitching or stuttering is to use “framerate independent movement”. For one past discussion with Processing, see:

- [https://forum.processing.org/two/discussion/9277/inconsistent-framerate-please-help](https://forum.processing.org/two/discussion/9277/inconsistent-framerate-please-help)

For a longer general discussion, see:

> <https://gamedev.stackexchange.com/questions/9515/frame-independent-movement/9518#9518>

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [July 24, 2019, 6:26pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/13 "2019-07-24T18:26:45Z")

</div>

I really have no idea how to apply this to the movement of the ball and the paddles. Because i just have 2 Vectors that get added up… 😕

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 24, 2019, 8:35pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/14 "2019-07-24T20:35:41Z")

</div>

It isn’t that complicated. Right now, you move your paddle like this:

```auto
  float moveAmount() {
    float movement = 0;
    if (up) {
      movement += speed;
    }
    if (down) {
      movement -= speed;
    }
    return movement;
  }

```

You do this if the last frame took 1/60th of a second to draw or 1/2 second to draw. So if your framerate changes, the paddle speed changes. But what if instead you wrote:

```
movement += speed * 60 / frameRate();

```

If your target is 60fps (the default), then you want to know what ratio of that the last frame was. If the last frame was 60fps, multiply your speed by 1.0 (60/60). If the last frame was 30fps, multiply your speed by 2.0 (60/30). If the last frame was 120fps for some weird reason, multiply your speed by 0.5 (60/120).

Whatever your target fps is, set it with frameRate(target) and then use target/frameRate() to scale your motion offsets – for paddles, the ball, whatever.

**Edit just realized you are using OpenProcessing, not p5.js. Outside p5.js frameRate() doesn’t return an inter-frame time for you – you will need to calculate that yourself.**

If that wasn’t global, it might look something like this (untested):

```auto
  float moveAmount() {
    float fps = 1000.0/(millis()-lastmillis);
    float movement = 0;
    if (up) {
      movement += speed * (60.0 / fps);
    }
    if (down) {
      movement -= speed * (60.0 / fps);
    }
    lastmillis = millis();
    return movement;
  }

```

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [July 24, 2019, 9:34pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/15 "2019-07-24T21:34:50Z")

</div>

Ok and how would i do that with a the ball that has a PVector as velocity and not a float as movement? Just multiply the vector by the moveamount?

Thanks anyway already for your answer!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 24, 2019, 10:59pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/16 "2019-07-24T22:59:28Z")

</div>

> [@rusagent](#):
>
> multiply the vector by the move amount

Exactly. Well, by the time amount.

```
PVector velocity;
// ...
PVector motion = PVector.mult(velocity, 60.0/fps);

```

> **[mult() / Reference](https://processing.org/reference/PVector_mult_.html)**
>
> Multiplies a vector by a scalar. The version of the method that uses a float acts directly on the vector upon which it is called (as in the first example above). The versions that receive both a PV…

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [July 25, 2019, 12:56am UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/17 "2019-07-25T00:56:32Z")

</div>

Im my moveBall() method in the Ball “class” i’ve got

`ballPosition.add(ballVelocity);`

If i multiply the ballVelocity.x and ballVelocity.y with 60.0/fps the ball doesn’t move at all anymore… ☹

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [July 25, 2019, 11:42am UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/18 "2019-07-25T11:42:25Z")

</div>

have you tried using `lerp()` function? you can achieve smooth movement of the paddles.  
`PVector` has a built-in `lerp()` method in it, or you can use general `lerp()` for general usability.

it will look like this:

`paddlePos.lerp(targetPaddlePos, 0.1);` --\> 0.1 is the amount, lower, smoother  
see: [https://processing.org/reference/PVector\_lerp\_.html](https://processing.org/reference/PVector_lerp_.html)  
general lerp: [https://processing.org/reference/lerp\_.html](https://processing.org/reference/lerp_.html)  
you just need to add the velocity to `targetPaddlePos`

demonstration

```auto
PVector paddlePos;
PVector targetPaddlePos;
void setup() {
  fullScreen();
  rectMode(CENTER);
  fill(255);
  noStroke();
  paddlePos = new PVector(width/2, height/2);
  targetPaddlePos = paddlePos.copy();
}

void draw() {
  background(51);
  rect(paddlePos.x, paddlePos.y, 200, 20);
  paddlePos.lerp(targetPaddlePos, 0.1);
}

void keyPressed() {
  if (key == CODED) {
    switch(keyCode) {
    case RIGHT:
      targetPaddlePos.add(100, 0);
      break;
    case LEFT:
      targetPaddlePos.add(-100, 0);
      break;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [July 25, 2019, 6:09pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/19 "2019-07-25T18:09:16Z")

</div>

How would I do that for the ball though if you check the code for the ball? Pretty please \<3

---

<div class="post-metadata">

**Author:** ![rusagent](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@rusagent](https://discourse.processing.org/u/rusagent)\
**Post date:** [July 29, 2019, 8:20pm UTC](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094/20 "2019-07-29T20:20:26Z")

</div>

I really have no clue how to do this for the ball ☹

[Next page](https://discourse.processing.org/t/ball-movement-is-stuttery-how-to-achieve-smooth-movement/12094.md?page=2)