Your first video game: Move the blob!

Step 1. Look at a computer code for a blob that can only move in the x-direction! [Click here to open up the computer code in the browser](http://alpha.editor.p5js.org/ChrisOrban/sketches/SkgBnZBJf) In the top left corner, press and you'll see something like this: Do what it says! Click the screen! Press the arrow keys on your keyboard to see if the blob moves! The blob will only move when you press right arrow! Your job will be to modify the computer program to make it move in other directions. Optional Step 2. In the top right corner of the screen click "Sign up" (if you want to save your work) If you want to save your work then create an account and confirm a password. Unfortunately you have to create an account in order to save your changes to the code. (Don't worry you won't get spam emails from your new account.) Please note that if you do not want to create an account the only way to save your code is to highlight your code with the mouse and copy paste it into a text file in MS Word or some other program. After you log in click Duplicate to copy a version of the code to your account. Note: This step is unnecessary if you don't want to save your work. Step 3. Look at the code! Read the //comments in the code Here's the code. Each section does something important. Bear in mind that draw() is run over and over again, 60 times per second in fact. This means that 60 times per second, the code will update the $x$ position, and check if the keyboard keys are being pressed.

function draw(){

    // Update location
    x += vx*dt;

    // velocity is zero unless keys are pressed
    vx = 0;

    // Turn or thrust the ship depending on what key is pressed
    if (keyIsDown(LEFT_ARROW)) {
        // Do nothing
    }
    if (keyIsDown(RIGHT_ARROW)) {
        vx = 10;
    }
    if (keyIsDown(UP_ARROW)) {
        // Do nothing
    }
    if (keyIsDown(DOWN_ARROW)) {
        // Do nothing
    }

    // Draw axes and other stuff
    // This will clear the screen and re-draw it
    display();

    drawBlob(x,y,vx,vy);

    // Add more graphics here before the end of draw()

} // end draw()

Your job will be to replace the "// Do nothing" with something that will allow the blob to move in both the $x$ and the $y$ directions. Step 4. Make the blob move to the left! What happens when you change this section:

    if (keyIsDown(LEFT_ARROW)) {
        // Do nothing
    }

to this:

    if (keyIsDown(LEFT_ARROW)) {
        vx = 10;
    }

Now when you press the left arrow does it move the blob to the left? Why or why not? How might you fix this? (Hint: this seems to only move the blob in the positive x direction. If only there were some way to make it move in the negative x direction.) Change the program until you can move the blob to the left or right as in this example

Step 5. Modify the program to get the blob to move in the y direction

Step 5a. Modify the code so that vy = 10 if you press the up arrow By now you've noticed that to get the blob to move in the +x direction when you press the right arrow, there is a section of the code that sets vx to 10 when you press the right arrow:

    if (keyIsDown(RIGHT_ARROW)) {
        vx = 10;
    }

Let's make sure something like this happens when you press the up arrow. Find this part of the code:

    if (keyIsDown(UP_ARROW)) {
        // Do nothing
    }

and replace // Do nothing with vy = 10;. Can this move the blob in the y direction when you press one of the arrow keys? (Hint: maybe not!) Comment: Leave the down arrow section alone for now. We'll work on that later. Step 5b. Make sure the x AND y position are getting updated! In order for the blob to move in BOTH the x AND the y directions, we need to make sure that both the x and y positions are getting updated. This task has to do with this part of the code:

    // Update location
    x += vx*dt;

Let's talk about this line of code before we add anything to it: Comment #1 x += vx*dt is how a computer thinks about this equation: $$d = vt$$ We like to think about the total distance ($d$) traveled after the total time ($t$) elapsed. Computers like to think about short periods of time that last dt seconds long, so that the total time is $t = N \cdot dt$ where $N$ is the number of short periods of time and $dt$ is the number of seconds (or fraction of a second) of one of these short periods of time. Comment #2 dt is short for "delta t" = $\Delta t$. In other words the "d" in dt comes from the greek symbol for "delta". dt is not a distance, it is a short period of time. Let's look at the section in the code again:

    // Update location
    x += vx*dt;

You'll notice that there is nothing about y here. The only thing that gets updated is the x position. This is why in the previous step the y position didn't change even though the we set vy = 10 in Step 4a. Add a line to the code above make sure the y position gets updated if vy is non-zero (Hint: it will look a lot like how we update the x position of the blob.) If you do this successfully your code should behave like this Step 6. Fix the drift (if you haven't already) If you play around with the code at the end of Step 5 you will probably notice that once the blob starts moving in the y direction, there's nothing you can do to stop this. In other words, even when you're not pressing the up arrow, the blob will drift upwards. Look closely at the code and see if you can figure out what's causing this. (Hint: there's a section between the "update location" and the keyboard section that we haven't modified yet). You should only need to add one line of code to fix the drift! If you can fix the drift, your code should behave like this Step 7. Let the blob move in the negative y direction! If you haven't already, modify the code so that pressing the down arrow moves the blob in the negative y direction. You would need to modify this part of the code:

    if (keyIsDown(DOWN_ARROW)) {
        // Do nothing
    }

Hint: This is basically the same problem we ran into in Step 4. If only we could make the blob move in the negative y direction instead of the positive y direction. If you make the right change your code should behave like this Step 8. Add code to show the path of the blob After display(); you can add this code and it will show the path of the blob:

    for( i = 0; i < xhistory.length ; i+= 1) {
     drawPoint(xhistory[i],yhistory[i]); 
    }

Press the button above to copy the code to the clipboard. In the code editor press Control+V to paste it into the code. When the blob changes direction is the path smooth and curvy or does the path have sharp corners? How realistic is this for real life? Step 9. Add a graph of $v_x$ versus time! You can add a plot of $v_x$ versus time by adding this code to the program. You can put it anywhere after the display() function

graph1.addPoint(vx);
graph1.display();

Press the button above to copy the code to the clipboard. In the code editor press Control+V to paste it into the code. Look at the plot. Why does it look like a bunch of flat lines or rectangles? Step 10. Give the blob an initial velocity! Try this out: At the beginning of the program change this code:

x = 375;
y = 250;

vx = 0;
vy = 0;

to this:

x = 0;
y = 0;

vx = 25;
vy = 25;

In the draw function comment out or delete these lines:

// velocity is zero unless keys are pressed
vx = 0;
vy = 0;

If you follow these steps the blob should move towards the top right at constant velocity

Done!

Challenge Question:

1. Why does it seem like the arrows are longer when the blob is moving in a diagonal direction? Is the blob really moving at a faster speed?

Next Exercise: Accelerate the blob!

Here is the link to the next exercise: [Accelerate the blob!](https://www.compadre.org/PICUP/exercises/exercise.cfm?I=302&A=AccelerateTheBlob)