Fixed Steps and Tweening

Here is the sample with X and Y directions. You can use the arrow keys to change the direction. No diagonals.

What I notice is, with the code to get the user input in the update function, there is some delay before it happens. I am not sure what that means. But I guess if it were running at a frequency of 60 then it wouldn't be noticeable.

edit: small change to offset the white ball.

Graphics(640, 480, 32)

Global UPDATE_FREQUENCY = 10 ' times per second
Global update_time = 1000 / UPDATE_FREQUENCY
Global t , dt , execution_time = 0

' boucing ball
Global x# , oldX#
Global y#, oldY#
Global dirX# = 1
Global dirY# = 0

t = MilliSecs()
While Not KeyDown(KEY_ESCAPE)
	dt = MilliSecs() - t
	t = MilliSecs()

	execution_time:+ dt
 
	' fixed interval update loop    		
 While execution_time >= update_time		
		Update()
		execution_time:- update_time
	Wend
	
	' calculate the remainder for motion interpolation
	Local et# = execution_time
	Local ut# = update_time
	Local tween# = et / ut
	
	Render(tween)
Wend

Function Update()
	' time independent speed
	If KeyHit(KEY_LEFT)
		dirX=-1
		dirY=0
	End If
	If KeyHit(KEY_RIGHT)
		dirX=1
		dirY=0
	End If
	If KeyHit(KEY_UP)
		dirY=-1
		dirX=0
	End If
	If KeyHit(KEY_DOWN)
		dirY=1
		dirX=0
	End If
	
	Local Speed# = 150.0 / (1000.0 / Float(update_time)) ' 150.0 pixels per second
	
	' record the old position for tweening
	oldX = x
	oldY = y
	
	' move the ball
	x:+ (Speed * dirX)
	y:+ (Speed * dirY)
	
	' reverse directions if ball is out of screen bounds
	If x < 0 dirX=1
	If x > 640 dirX = -1
	If y < 0 dirY=1
	If y > 480 dirY = -1
End Function

Function Render(tween#)
	Cls
	' interpolate between old and actual positions
	Local tx# = x * tween + OldX * (1.0 - tween)	
	Local ty# = y * tween + oldY * (1.0 - tween)	
		
	' draw second bouncing ball WITHOUT tweening
	SetColor(255,255,255)
	DrawOval x - 16 , y - 16 + 50, 32 , 32
	
	' draw bouncing ball with interpolated values
	SetColor (255,0,0)
	DrawOval tx - 16 , ty - 16 , 32 , 32
	
	
	Flip
End Function