Having Fun With the Camera (part 1)

Let's have a little fun with the camera movement, and at the same time learn a new technique called oscillation.  The general idea is that we would like to move the camera backwards, then forwards, then backwards, then forwards, and so on.  Anything that goes back and forth like this is said to be in an 'oscillation'.  That's just a fancy name for moving back and forth.  
Remember that we used the '+' sign to increase the distance between us and the green cube and the '-' sign to shrink the distance.  So what we need is a way of changing periodically between these positive and negative movements, and then we will have an oscillating camera.  If you are new to game programming, you might think, "Ok, let's just put both lines of code back-to-back, like so":

camera.position.z = camera.position.z + 0.1;
camera.position.z = camera.position.z - 0.1;

But you would quickly realize that this adds and subtracts too fast, actually resetting the camera each pass through the loop.  To get a smooth back-and-forth motion, we need to go positive (using '+') for a while and then, at some later point in time, flip the sign and go negative (using '-'), then at a later point, repeat the process and go positive, and so forth.  To do this right, we need to use the branching 'if' statement.  Branching is a fancy word for decision-making; yes or no, true or false, on or off.  The JavaScript keyword 'if' will test a condition inside its parentheses and if this condition is met, it will execute whatever code that is right below it.  However if the condition is not met, it will skip right over the code that is underneath it.  Let's see the design of the 'if' code:

if(condition){
   //if the condition was met, execute this code
   //inside the curly braces
}

//if the condition was NOT met, skip to here and resume flow

It is time to discuss 'true' and 'false' in JavaScript.  If you are familiar with Boolean values, you can skip this explanation.  Otherwise, JavaScript allows us to specify a variable as a Boolean value.  Boolean is a fancy name for 'switch' or 'flag', as I like to call it.  A flag variable is either on or off, true or false, 1 or 0, yes or no. Flag variables are immensely helpful in games and we will see them a LOT in our game programming journey.  For now let's use a flag that sets the forward motion of our camera either to 'true' (yes, we want to move forward) or 'false' (no, we want to move backward).  This will allow us to essentially flip a switch on and off, on and off, and thus move the camera forward and backward, forward and backward. Here is how we will declare our new flag variable:

var forwardFlag = false;

First I used the 'var' keyword whenever we declare a variable.  Next we give a descriptive name to our flag, which is 'forwardFlag'.  JavaScript convention is to have lowercase for the first word and Upper-case for the remaining words, all mashed together into a compact name without any spaces.  Since you are not allowed to put spaces in your names anyway, this alternating lower and upper-case convention helps you read the words that are all mashed together.  This mix of lower and Upper-case is appropriately called Camel-Case, because of the 'humps' caused by the occasional Capital letters. 
Anyway, after we type the name of our flag, we should fill it with a value.  And since we want this to be an on/off switch, we set it equal to 'false', which means off or no, for now.  We could have easily set it to 'true' also.  In this case, it doesn't really matter because we don't care whether the camera goes forwards first or backwards first, just as long as it does both alternatively over and over again.

Now, inside the animate() function that quickly loops, we can test the condition of this forwardFlag repeatedly.  If it is true, we move the camera forward.  If it is false, we move the camera backward.  Remember, we learned how to test a condition by using the 'if' keyword.  Now the complete 'if' condition looks like this:

if(forwardFlag == false){
   camera.position.z = camera.position.z + 0.1;
}

If you are new to JavaScript, you might be asking, "Why is there a double equals sign ( == ) in the condition?"  Well, if you just use one equals sign ( = ), you will accidentally fill our forwardFlag with the value of 'false' over and over again!  That is not what we want.  We just want to test it.  So, the first line in the above code actually reads aloud:  "if forwardFlag is equal to false".  The == stands for "is equal?" and is a safe way to test the variable without changing it.  If we forget to add the extra equals sign, the statement will "assign or fill the variable with this value" and will definitely change the value of the variable, which messes up our program.  Try to get used to this, because we will encounter both types of equals sign usage ( = and == ) many times in our game programs.  Just remember; one equals ( = ) means assign or 'fill' the variable.  Double equals ( == ) means 'only test' the variable against a value, but do NOT change it.  
To get the hang of this, let's try this once more with the opposite camera condition.  We need to have a test for the forwardFlag being 'true' and execute the appropriate camera action if that condition is met.  Do you remember how to change the camera movement?  Yes, by changing the plus ( + ) to a minus ( - ).  Here's how the other test condition looks now:

if(forwardFlag == true){
   camera.position.z = camera.position.z - 0.1;
}

In this manner we can safely test 'forwardFlag' over and over again as the program loops, without accidentally changing its value.  If 'forwardFlag' turns out to be false, we pull the camera backward with the ' + ' sign.  If it is true, we push the camera forward with the ' - ' sign.  Recall that in an 'if' statement, if the condition is met, it will execute the statement(s) right below the condition. If the condition is NOT met and that test fails, the code right below it will be safely skipped over, and the program will keep flowing after that.  In this way, we the programmers can accurately control the flow of the program by switching things 'true' and 'false' whenever we want.  

Great, so now we have the appropriate camera movement to match the appropriate tests, but how and when do we switch the forwardFlag on and off, or 'true' and 'false' , so that the camera indeed goes smoothly back and forth?  The 'how' answer is easy:  by typing forwardFlag = true; and forwardFlag = false;  Notice I only used one equals sign ( = ), which means 'fill the variable with a new value'.  This will definitely change it.
The 'when to change' forwardFlag answer is a little more involved and requires one more 'if' condition statement in order to switch the camera movement just at the right time.  We will learn how in the next post!

Continued in part 2....