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
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
Hope someone here can help me <3
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?
No it’s not empty. Maybe you’re blocking some scripts or something? I just checked and everybody is allowed to see the code.
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
So do you know how i could achieve a smoother movement of the ball/paddles?
i check frameRate and ball velocity, OK
still no idea if there is a bug in the program logic/execution
or other performance issues??
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? 
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
There is a special kind of stutter in bouncing/ at borders
When you encounter this, pm me
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. -.-
Nobody here got a clue on how to solve this? I really need some sort of smooth movement
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:
For a longer general discussion, see:
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…
It isn’t that complicated. Right now, you move your paddle like this:
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):
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;
}
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!
Exactly. Well, by the time amount.
PVector velocity;
// ...
PVector motion = PVector.mult(velocity, 60.0/fps);
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… 
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
general lerp: https://processing.org/reference/lerp_.html
you just need to add the velocity to targetPaddlePos
demonstration
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;
}
}
}
How would I do that for the ball though if you check the code for the ball? Pretty please <3
I really have no clue how to do this for the ball