Part 3: Bellicose birds!

If you have finished tinkering with the Lunar descent lab you can continue with this lab where we will configure the game to shoot a bird-shaped projectile. We call this game Bellicose Birds.

From a physics perspective, bellicose birds is essentially the same as lunar descent except that there is no rocket thrust. The kinematic equations look like this: $$ x(t) = x_0 + v_{x0}t $$ $$ y(t) = y_0 + v_{y0}t + \frac{1}{2} g t^2 $$

where $g = -9.8$.

Step 0. Open up Lunar Descent in an editor

Click on this link to open the Lunar Descent code in a p5.js editor

Press play there to run the code. It should look the same as it did with the at the end of the lunar descent exercise

Very Important: Sign in to your account! Then click "Duplicate" so you can have your own version of the code!!!

Step 1. Change the starting point

After you click Duplicate, instead of starting the ship's position in the middle of the screen you'll want to configure it to start at the bottom left. Edit the code to change the initial position from this:

x = 375;
y = 250;

to this:

x = 95;
y = 25;

The ship should now start close to the bottom of the screen. Check to see that this works.

Step 2: Configure the game so that gravity is turned off until you press spacebar

The easiest way to do this is to set g = 0 near the beginning of the code where the variables are all initialized. Then set g = -9.8 inside of the if statement for the spacebar.

Finally, in order to prevent the rocket from sticking to the ground, remove this statement:

  if ( abs(y - 0.03*height)  < 0.1) {
    deltaVx = 0;
    deltaVy = 0;
    vx = 0;
    vy = 0;
    theta = 3.141/2;
Once you do this the game should behave like this.

Step 3. Give the rocket an initial velocity

Add a variable for the initial velocity near the beginning of the code

vinit = 65;

Then add two lines after g = 9.8 to set the initial velocity:

   if (keyIsPressed && key == ' ') { // spacebar
      g = -9.8;
      vx = ?????;
      vy = ?????;

It is up to you to figure out what goes in the question marks (think: trigonometry). When finished the game should behave like this

Note: For a more authentic bellicose birds experience you can turn off the thrusters by setting Fthrust = 0.0; at the top of the page.

Step 4: Show the expected trajectory

You should be able to calculate the trajectory of the rocket from the kinematics equations we used towards the beginning of the course. In this step you will calculate this trajectory and draw it on the screen using drawPoint(xdraw,ydraw); You may recognize this as the same function we used to do the projectile in the planetoids lab.

Just after drawLine(0,0,width,0); add these variables which are the initial x and y position of the rocket:

x0 = 95;
y0 = 25;

Immediately after this write:

  t = (i-1)*dt;
  xdraw = x0 + ?????;
  ydraw = y0 + ?????;

Fill in the ???? with the terms that give the right trajectory. The two equations at the beginning of this exercise should be a big help! The main problem is how to put this in the code and what to use for $v_{x0}$ and $v_{y0}$.

Advice #1: Expressions like t^2 won't work in this case (or in most other programming languages). Instead use t*t for $t^2$

Advice #2: Don't use vx or vy here because those variables will change after the object is launched.

Advice #3: Remember that the initial speed is v0

Advice #4: You may want to use some trig functions like cos(theta) and sin(theta). It's important that your trajectory is correct for different values of theta.

Once you have figured this out the program should behave like this

Step 5. Check that 45 degrees gives the longest distance

Add these lines somewhere after display() but not inside any of the if statements:

drawText(x,width/2,height/2 + 20);
drawText(theta,width/2,height/2 + 40);

The first line tells you the x value where the rocket landed. The second line gives the angle in radians.

Modify the code to write the angle in degrees instead of radians! Then check to see that 45 degrees gives the farthest distance. (Helpful hint: change the line where the angle of the ship changes so that it doesn't rotate so much every time you press the arrow.)

When finished, the game should behave like this

Final step

Chose one or both of these two options: (1) Replacing the ship with an bellicose bird, or (2) configure the game so that pressing the spacebar only works the first time.

Note that Option 1 is easier because there is a step-by-step guide.

How to replace the ship with an bellicose bird

Make the lab more fun by replacing the rocket with an bellicose bird. The easiest way to do this is with a red ellipse. After display(); add this:


The problem is that the oval is drawn on top of the ship. We can fix this by making the size of the ship zero. Look at the beginning of functions.js and change this:

//Size of the ship
r = 12;
to this:
//Size of the ship
r = 0;

Once you have made these changes, the game should behave like this. Make sure to just tap the spacebar as briefly as you can!

Challenge: Step 6: Figure out a way so that pressing the spacebar only works the first time

You may notice that the rocket/bird only follows the trajectory if you tap the spacebar as briefly as you can. Configure the game so that pressing the spacebar only works the first time.

Once you have made this change, the game should behave like this

How to get full credit on this programming lab!!!

1. Make sure the bird flies through the air like a projectile would (Steps 1-3)

2. Make sure that the drawn trajectory (dotted line) follows the path of the bird (Step 4)

It doesn't need to be perfect, but it should be pretty close (like this).

3. Make sure 45 degrees gives the longest distance (Step 5)

Make sure to modify the code so that it writes the angle in degrees to the screen instead of radians

In the comments on the dropbox in carmen write down the exact angle (ex. 45.1274) and the distance the bird traveled before hitting the ground. Say something like "this was the furthest distance that the bird traveled for any angle".

4. Make sure to replace the ship with a picture of a bellicose bird (Final Step)

There are step by step directions for how to do this. Just copy and paste into your code.

5. If you want extra credit figure out how to make the spacebar only work the first time as discussed in step 6