WEEK: 7
Active: February 21st - February 27th
Work Due: February 28th @ 9:00AM

Alternating Boolean States

Hopefully, you realized from the last example, that if we can tell a Boolean variables to alternate its value between true and false, we could easily change the state of a sketch. We could use this changing state to alternate or flicker the color fill of the ellipse form the last page between red and blue.

There are two easy ways of alternating a Boolean variables state or value between true and false;

  1. Use an if statement.
  2. Use the logical not operator.

Alternating States through IF

If we can check a variable’s Boolean state, we can change it to the opposite state. To do this, after checking it, we can re-assign the variable to false in the true function block or true in the false function block. In other words,

  • if the variable equals true
    • set the variable to false
  • else if the variable equals false
    • set the variable to true

In code, this would like like;

sketch.js
1
2
3
4
5
6
7
8
9
10
11
12
var boolState = true;

function draw() {
    // check the variable's Boolean state
    if( boolState ) {
        // if true, set to false
        boolState = false;
    } else {
        // if false, set to true
        boolState = true;
    }
}

In the above code, we;

  1. Declare and initialize a variable boolState to be true
  2. In line 5, we pass the value of the variable to the if statement function.
  3. If the value passed equals true, then we alternate the state of boolState to false in line 7.
  4. Likewise, if the value passed equals false, then we alternate the state of boolState to _true in line 10.
  5. With each passing of the draw() loop, the state of boolState will alternate between true and false.

This is also demonstrated more fully in the below code. The following example builds on the previous, by using the value of boolState to also change the value of a variable holding onto color values fillColor, between 'red' and 'blue'. This is then passed to the fill() function, which results in the alternating color of the ellipse. The value of the Boolean variable, boolState, is also displayed as text.

[ Code Download ] [ View on GitHub ] [ Live Example ]

Logical Not

Before we look at the second method for alternating Boolean state, we need to discuss another operator first.

The new operator is the Logical Not Operator. This new operator is similar to the Unary Negative Operator. The Unary Negative Operator flips the sign of a Number value. The Unary Negative Operator (-) is proceeded by a Number or a variable holding a Number, (i.e. -10 or -num_var).

A unary operator is called as such, because it only effects a single parameter or value. As opposed to a binary operator (i.e. +, -, *, /, %), where with a value on each side, the program tries to computer the arithmetic result of both numbers together.

// negative 10
-10

// store -22 in a variable.
var num_var = -22;
// the following returns +22
-num_var;

The Logical Not Operator is another unary operator, that is applied or used with a single Boolean value. This operator returns the opposite of the Boolean state. In other words, using this operator with a Boolean value of true, returns not true or false. Likewise, using this with a Boolean value of false return not false or true.

The Logical Not Operator is the exclamation mark (!). As with the Unary Negative Operator, the Logical Not Operator is used by preceeding the value it is to act on.

!true // ⇒ would result in "not true" or false.

In the below code example, not true (!true) is passed to the if statement. As a result the false function block is the one executed by the program.

[ Code Download ] [ View on GitHub ] [ Live Example ]

In the following sketch, the value of !false, is added to a string and printed. This further demonstrated that the use of the Logical Not Operator returns the opposite of a Boolean value state.

[ Code Download ] [ View on GitHub ] [ Live Example ]

Using Logical Not to Alternate Boolean Value State

Following from everything just presented, we can use the Logical Not Operator to return the opposite of a Boolean values state. If the result of this is reassigned back to the same variable, the state of the Boolean variables value has been “flipped”. Let’s alter the above example that demonstrated how to flip the state of a Boolean variable value using if statements.

Now, instead of reassigning the value in an if statement, we will use the Logical Not Operator to return the opposite of the current state, and then reassign that to the same boolState variable. This will occur at the top of the draw loop (line 21). Then we can reduce the number of extraneous lines in the if statement.

[ Code Download ] [ View on GitHub ] [ Live Example ]

Previous section: