Time and Animation

The execTm function returns the execution time of the program.

While the program is running, try pressing the 'Pause' button to observe how it affects the execution time.

This program draws a disc moving at a speed of 100 pixels per second.

The screen image might be unstable. This happens because the computer will sometimes refresh the screen before the program has finished drawing the image.

If, for demonstrational purposes, the screen image is not sufficiently unstable , try decreasing the argument of the sleepMs function to value 0.03.

Here is an improved version of the program with a stable image.

The vsync function waits for the computer to finish refreshing the screen. The computer refreshes the screen at the display device's frame rate.

After the vsync function completes, the program can draw to the screen again.

After running and studying the program, change the number (i.e. literal expression) 100 to some other value and observe how it affects the output. Try values 10 and 300.

* * *

This program calculates and displays the time elapsed between last two animation frames.

An animation frame is one complete image drawn to the computer screen.

This program draws one animation frame on each iteration of the while loop.

The elapsed time varies on different computers and display devices. It is usually in the range of 8–50 milliseconds (0.008 – 0.050 seconds), corresponding to the frame rates of 20-125 Hz.

After running and studying the program, add a new variable i at the beginning of the source code. Make this variable increase by one in each iteration of the while loop. Also, in the while loop, add another println statement that displays the value of variable i.

Here is a program that moves a ball left and right according to the presses of the arrow keys.

The speed of the ball is the same on any computer running this program, and equals 300 pixels per second.

Run the program and then examine it.

The ball can move outside the screen. Prevent this by adding the following two statements before the disc statement: x = x.atleast(50); x = x.atmost(960-50);

After that, add a new variable y of type num with an initial value of 360 at the beginning of the source code. Then, add a functionality that enables the ball to also move in the up and down direction when the appropriate arrow keys are pressed.

This program can move the ball in all directions.

After running and studying the program, add a new variable velocity of type num with an initial value of 300 at the beginning of the source code. Then replace the literal value 300 by the variable velocity in all four places where ball's coordinates x and y get modified.

After that, try some other initial values for the variable velocity.

The variable elapsedTime contains a value of time that has elapsed since the previous animation frame, which is commonly also called the frame time. Examine how the program accomplishes this, what is the purpose of the variable prevTime and how it's value gets computed.

After that, print out the value of the variable elapsedTime immediately after it gets introduced (i.e. after the third statement of the loop).

After running the new program, modify it to also print out the value of the variable prevTime just below the place where where the elapsedTime gets printed out.

After running the program, insert a statement println "Curent time: ", execTm(); just below the place where where the prevTime gets printed out.

Now you can examine how the elapsedTime gets computed. Printout a message "Press the Pause button to examine the output".

After running the program, add a statement sleepMs(500); as the last statement of the loop. Try several other values for the argument of this function and observe how it affects the variable elapsedTime.

Instead of making the arrow keys change ball's position, this program makes them change ball's velocity.

The variables vx and vy were introduced in a single statement. This syntax is allowed in ZedLX and most other programming languages.

The variables vx and vy together make a motion vector. The motion vector determines the velocity of the ball.

Don't lose the ball out off the screen!

After running and studying the program, change it so that variables x and y are introduced in a single statement, just like variables vx and vy.

After running the program, add a variable named acceleration with an initial value 300 at the beginning of the source code. Then use this variable in all the four required places where the number 300 occurs.

After running the program, change the initial value of variable acceleration to some other value. Try out values 50, 600 and 100.

Here is a simulation of a bouncing ball.

Press left and right arrow keys to move the ball.

After running and studying the program, change the strength of the gravity. Can you find out which number needs to be changed? Try tripling the gravitiy and then also try halving it.

Here is another simulation of a bouncing ball.

It is easy to make the ball jump higher, but it is very hard to make it steady.