EE 150 Lab 4a – Watch the Bouncing Ball

1 Introduction
In this lab you will create an animation of a bouncing beach ball as it is thrown from
a specific height at a certain velocity and angle. Your program will first use the laws
of physics to model gravity, friction, and loss of momentum. Then, you will use
geometric modification techniques to create an animation of a multi-colored beach
ball moving along the calculated trajectory (including spinning and possibly
compression when bouncing).

2 What you will learn

This lab exercise will familiarize you with the mathematics required to produce and
manipulate graphics and computer animation. Linear and affine systems will be
discussed and used to create the animation. Underlying this assignment will be
Matlab’s ability to perform of matrix operations.

3 Background Information and Notes

Bouncing Ball Physics. To produce the animation of the bouncing ball we first need
to calculate the path/trajectory of the ball. Using simple physics we can calculate
the position of the ball at a time, t by tracking its velocity and using that to calculate
the x,y position. (Important: We will always track the center of the ball rather than
its exterior). For example, the y-axis position of the ball can be described with:

𝑦 𝑡 + ∆𝑡 = 𝑦 𝑡 − 𝑣𝑦 𝑡 ∙ ∆𝑡

We will track the velocity vector, v, via its x,y components: vx and vy (m/s). In this
way we will see that gravity only affects vy and not vx. However, friction and loss of
energy due to the ball hitting the ground will serve to reduce and change direction
of vy while also reducing vx. We will also track the angular velocity, ω (radians/sec),
of the ball as it spins. Again, this angular velocity will be reduced due to friction
when the ball hits the ground. To model friction and loss of energy, we will assume
that when the ball comes into contact with the ground (think about how you would
determine when the ball is in contact with the ground), we will reduce the
velocities by a certain factor, µy (say 0.75), µx (say 0.9), and µω (say 0.8). In addition,
vy will change direction (i.e. sign) when the ball hits the ground.

−𝜇𝑦 [𝑣𝑦 𝑡 − 𝑔 ∙ ∆𝑡], 𝑖𝑓 𝑏𝑎𝑙𝑙 𝑖𝑠 𝑡𝑜𝑢𝑐𝑕𝑖𝑛𝑔 𝑡𝑕𝑒 𝑔𝑟𝑜𝑢𝑛𝑑

𝑣𝑦 𝑡 + ∆𝑡 =
𝑣𝑦 𝑡 − 𝑔 ∙ ∆𝑡, 𝑜𝑡𝑕𝑒𝑟𝑤𝑖𝑠𝑒

Last Revised: 10/6/2008 1

EE 150 Lab 4a - Watch the Bouncing Ball

𝜇𝑥 𝑣𝑥 𝑡 , 𝑖𝑓 𝑏𝑎𝑙𝑙 𝑖𝑠 𝑡𝑜𝑢𝑐𝑕𝑖𝑛𝑔 𝑡𝑕𝑒 𝑔𝑟𝑜𝑢𝑛𝑑

𝑣𝑥 𝑡 + ∆𝑡 =
𝑣𝑥 𝑡 , 𝑜𝑡𝑕𝑒𝑟𝑤𝑖𝑠𝑒

𝜇𝜔 𝜔 𝑡 , 𝑖𝑓 𝑏𝑎𝑙𝑙 𝑖𝑠 𝑡𝑜𝑢𝑐𝑕𝑖𝑛𝑔 𝑡𝑕𝑒 𝑔𝑟𝑜𝑢𝑛𝑑

𝜔 𝑡 + ∆𝑡 =
𝜔 𝑡 , 𝑜𝑡𝑕𝑒𝑟𝑤𝑖𝑠𝑒

We will use the above equations to calculate the position (x- and y-coordinates of
the center of the ball) and rotation angle, Θ, for each frame of our animation. Since
the animation will run at 30 frames per second, Δt will be 1/30 seconds. For now
we will not scale the ball, but have an extra credit option to scale the ball to model
the compression experience when it hits the ground.

Geometric Modificaiton. Let us switch gears and discuss how to produce the
animation of the beach ball. We will start by assuming we can draw a beach ball
figure centered at the origin. Thus, we need to understand the transformations
necessary to move (translate), scale, and rotate the ball. As learned in class, a
linear system is one that satisfies the properties of superposition and scaling.
These two properties are illustrated below:

X1(t) System
X1(t)
H
+ System
H
Y(t)
+ Y(t)
X2(t) System
X2(t)
H
Figure 1 - Superposition Property

X1(t) x System
H
Y(t) X1(t)
System
H x Y(t)

α α
Figure 2 - Scaling Property

α•X1(t) X1(t)
System
H x
+ System
H
Y(t)
+ Y(t)
β•X2(t) X2(t)
System
H x
β

𝐻 𝛼𝑋1 𝑡 + 𝛽𝑋2 𝑡 = 𝛼𝑌1 𝑡 + 𝛽𝑌2 𝑡

Figure 3 - Linear System [Superposition & Scaling]

An advantage of a linear system is its ease of manipulation via matrix multiplication.

A linear system operating on an input point xi,yi can be represented as a 2x2 matrix

2 Last Revised: 10/6/2008

 EE 150 Lab 4a - Watch the Bouncing Ball

of coefficients and the input can be thought of as a vector (x i,yi). The output of the
system (xo,yo) can be calculated by multiplying the matrix by the point vector.

𝑥𝑜 𝐴11 𝐴12 𝑥𝑖
𝑦𝑜 = 𝐴21 𝐴22 𝑦𝑖

Scaling: Consider a graphic (e.g. a circle) that is to be scaled along the x-axis by a
factor sx and scaled along the y- axis by a factor sy. If the graphic is represented by
a set of x,y coordinates, the scaling can be easily achieved by multiplying each x
coordinate by sx and each y coordinate by sy as shown by the system of equations
below:
𝑥𝑜 = 𝑠𝑥 𝑥𝑖 + 0 ∙ 𝑦𝑖
𝑦𝑜 = 0 ∙ 𝑥𝑖 + 𝑠𝑦 𝑦𝑖

which can be represented as the matrix multiplication:

𝑥𝑜 𝑠𝑥 0 𝑥𝑖
𝑦𝑜 = 0 𝑠𝑦 𝑦𝑖

(0.5,1) xo 0.5 0 xi
=
yo 0 0.75 yi (0.25,0.75)

(0,0.5) (1,0.5)
(0,0.375) (0.5,0.375)

(0.5,0) (0.25,0)
Figure 4 - Scaling of a graphic

Rotation: Consider a graphic (e.g. a circle) that is to be rotated about the origin by
an angle Θ. With a little thought you can see that the rotation can be achieved with
the following matrix multiplication, provided the graphic is centered about the
origin:
𝑥𝑜 cos 𝜃 −sin 𝜃 𝑥𝑖
𝑦𝑜 =
sin 𝜃 cos 𝜃 𝑦𝑖

(0,1)
xo cos θ -sin θ xi (0.5 , 0.866)
= sin θ cos θ
yo yi

θ (-0.866,0.5) θ
(1,0)

Figure 5 - Rotation of a graphic

Last Revised: 10/6/2008 3

EE 150 Lab 4a - Watch the Bouncing Ball

We can combine a scaling and rotation operation by simply multiplying the

appropriate matrices. (Remember matrix multiplication should be performed right
to left.)

𝑥𝑜 𝑠𝑥 0 cos 𝜃 −sin 𝜃 𝑥𝑖
𝑦𝑜 = 0 𝑠𝑦 sin 𝜃 cos 𝜃 𝑦𝑖

Translation: While scaling and rotation can be achieved with a linear

transformation, translating an object (moving it to a new x,y coordinate by adding a
certain x,y offset) requires an affine transformation. An affine system essentially
adds an extra dimension to the matrices and vectors while still maintaining certain
properties of the 2-D relationships. An affine system allows for translation in
addition to rotation and scaling. Translation can be achieved with the operations:

𝑥𝑜 = 𝑥𝑖 + 𝑎
𝑦𝑜 = 𝑦𝑖 + 𝑏

This can be achieved with the affine transformation below:

𝑥𝑜 1 0 𝑎 𝑥𝑖
𝑦𝑜 = 0 1 𝑏 𝑦𝑖
1 0 0 1 1

We can combine the scaling, rotation, and translation operations into the following
affine transformation:

𝑥𝑜 1 0 𝑎 𝑠𝑥 0 0 cos 𝜃 − sin 𝜃 0 𝑥𝑖
𝑦𝑜 = 0 1 𝑏 0 𝑠𝑦 0 sin 𝜃 cos 𝜃 0 𝑦𝑖
1 0 0 1 0 0 1 0 0 1 1

Notice that we only care about xo and yo and can throw away the third point (i.e. 1)

Important: The graphic is rotated about the origin, so if it is not centered about the
origin, we must first translate the object back to the origin, perform the rotation,
and scaling, and translate it back to its correct position.

In this lab, you will have a vector of (x,y) points representing the circumference of
the ball centered about the origin. For this lab, we will always keep one set of x,y
coordinates of the ball centered about the origin and then apply the above
transformations to rotate, scale, and move the ball to its appropriate position along
along the path/trajectory calculated above. (In this way we avoid always having to
translate the ball back to the origin before applying the rotation and scaling
operations.)

4 Last Revised: 10/6/2008

 EE 150 Lab 4a - Watch the Bouncing Ball

We must also discuss how to create and fill an image in Matlab and also create a
movie. Using the basic plot command in Matlab simply draws lines connecting a
vector of (x,y) points. If we want to fill a shape, we can use the fill command.
Similar to plot, it will take an x- and y- vector representing the perimeter of an
enclosed shape and fill it with the specified color (‘r’ = red, ‘b’ = blue, ‘g’ = green, ‘y’
= yellow, etc.). The command has the syntax:

>> fill(x_vec, y_vec, ‘c’)

and can be further explored using the Matlab help fill command.

Since we have several sectors to draw, we can use the hold on command to
make sure that each new fill command adds to the current figure rather than
replacing it. Once we have drawn the entire frame, we can use hold off.

A movie is created by generating each frame in turn and adding it to a special movie
data structure. To initialize the movie data structure we can use the command:

>> mymovie = moviein(numframes)

Once a figure has been created we can add it to the movie with the command:

>> mymovie(: ,framenum) = getframe

Finally, to view a movie, use the command:

>> movie(mymovie,1,framerate)

The second argument of ‘1’, indicates how many times to play/repeat the movie
and the third argument is the framerate. However, the actual framerate when the
movie is viewed is often slower than what is specified in the function call and may
depend on the other programs running on the computer, so we may have to
increase the framerate.

Matlab Implementation.
Input. To establish the initial velocity vector, we will ask the user to enter a velocity
and an angle. Matlab provides an input command that can read input that the
user enters via the keyboard and assigns it to a variable. More information can be
found in Matlab by typing help input at the prompt.

Functional Decomposition. We will organize our code in a few functions that will
be called regularly. The first is a function to calculate and update the velocities and
position of the ball. It takes the current velocities and position as input and
produces the new velocities and position.

Last Revised: 10/6/2008 5

 EE 150 Lab 4a - Watch the Bouncing Ball

function [vx, vy, w, xc_o, yc_o, theta_o] =

physics_update(vx, vy, w, xc_i, yc_i, theta_i, dt, radius)

The second function should draw the ball based on x and y matrices (which are 8 x
(N/8)+1 matrices…1 row for each sector) for the sectors of the beach ball.

function draw_ball(x,y)

4 Prelab
Download the ee150_bball.m skeleton file which you will modify and add to
throughout this lab. For now, complete the assignments to vy and vx after the
input commands to initialize the velocity components. [We ask the user to enter an
initial velocity and angle. Use those values to compute the initial vx, vy velocities.]
Then, complete the physics_update function to calculate each new velocity and
ball position. Ensure that when the ball is in contact with the ground that a.) it does
not go below the ground level and b.) the velocities are updated by the friction
factors. Finally, complete the while loop condition that determines how many
times physics_update is called. The conditions for how many times it should
iterate are written in the comments. When you think you have correctly completed
the function, you should be able to call the main function, ee150_bball, and have
the bouncing ball’s center plotted to the screen. Ensure it produces a realistic plot
based on the initial velocity and angle that you enter. An example is shown below.
Bring your modified ee150_bball.m to lab where you will complete the animation
portion of the lab.

20

18

16

14

12

10

0 2 4 6 8 10 12 14 16 18 20

Figure 6 - Sample plot of ball trajectory that should be produced when the prelab is completed

6 Last Revised: 10/6/2008

 EE 150 Lab 4a - Watch the Bouncing Ball

5 Procedure
Based on the discussion above and your prelab, complete the ee150_bball.m
code.

The first several lines declare the constants and scalar values you will need
throughout your computation. Read the comments to understand each value.
Assume that all x,y units are meters and velocities are in units of m/s. The initial
angular velocity is ω=3Π radians/sec. Our movie will last 15 seconds and have
30*15=450 frames.

Next we will draw the ball in its initial position. To create the image of the ball we
create a vector of angles ranging from *0 to 2π+ representing the points around the
beach ball perimeter. Next, we have initialized two matrices, xi and yi. These 8 x
N/8+1 matrices contain one row for each sector. The additional column is for the
center point of the sector *we start each sector’s outline at (0,0)+. Set each row’s
contents to the appropriate values using 1/8th of the arg vector for each row.
Recall, the x and y value of a circle can be found using cos and sin of angles
between 0 and 2π. Once you have produced the xi and yi matrices, finish the
draw_ball function at the bottom of the file to fill each sector with a color so
that adjacent sectors are colored differently (use help fill).

Since we completed the trajectory calculations in the prelab, we now need to move
the image of the ball along its trajectory. We already setup the xi & yi matrices
representing the ball centered about the origin. Next we setup two more matrices
x & y to represent the ball at the desired position in each frame.

(X2,k,Y2,k)
(X2,1,Y2,1)
(X1,k,Y1,k)

(X1,1,Y1,1)
(xc,yc)

X1,1 X1,2 ... X1,k Y1,1 Y1,2 ... Y1,k

X2,1 X2,2 ... X2,k Y2,1 Y2,2 ... Y2,k

X8,1 X8,2 ... X8,k Y8,1 Y8,2 ... Y8,k

(Xi2,k,Yi2,k)
(Xi2,1,Yi2,1)
(Xi1,k,Yi1,k)

(Xi1,1,Yi1,1)
(0,0)

Xi1,1 Xi1,2 ... Xi1,k Yi1,1 Yi1,2 ... Yi1,k

Xi2,1 Xi2,2 ... Xi2,k Yi2,1 Yi2,2 ... Yi2,k

Xi8,1 Xi8,2 ... Xi8,k Yi8,1 Yi8,2 ... Yi8,k

Figure 7 - Xi,Yi and X,Y Matrix Meaning

Now that we have an outline of the ball, we can use the position and angle
positions calculated earlier to rotate, scale, and translate the outline of the ball to

Last Revised: 10/6/2008 7

 EE 150 Lab 4a - Watch the Bouncing Ball

its appropriate position in each frame. Create the appropriate matrices to perform
the affine transformation and apply them for each frame on each point (xi & yi
matrices). The result for each point should be written to the result (x & y) matrices.
After all points have been transformed, call the draw_ball function again. You will
also need to uncomment the movie commands, as these will not work until you
complete this section of code.

Optional (extra credit): Your task is to scale the ball when it makes contact with
the ground. The scaling factors sx and sy should be proportional to the vertical
velocity (vy) of the ball (i.e. the harder the ball hits the ground, the more it
compresses). The base scale factors of 1 should be altered appropriate based on
the vy. This can be achieved by setting sx and sy to 1 and adding or subtracting a
value proportional to vy (i.e. αvy) code such that it looks reasonable (i.e. the ball
doesn’t squish down to nothing when it touches the ground). Implement this in
your physics_update function by adding two output values to the function
definition and call.

When your program is working correctly, demonstrate it to your instructor or TA

who will record your correct demonstration.

6 Review
None

7 Lab Report
Include the following items in your lab report:
1. Initials of your TA or instructor indicating successful completion of the lab.
2. A printout of the trajectory plot.
3. A printout of the last frame of your beach ball animation
4. A printout of your code
5. If you completed the extra credit option, show your equation for s x and sy
that model the compression when the ball hits the ground.

TA/Instructor initials: ______________

8 Last Revised: 10/6/2008