Logical Operators

Hopefully you now understand simple if statements. Now let’s look at including more conditions in an expression.

Logical And: &&

If my temperature is greater than 98.6 OR I have a rash on my arm, take me to the doctor.
If I am stung by a bee AND I am allergic to bee stings, take me to the doctor.

In programming: If the mouse is on the right side of the screen AND the mouse is on the bottom of the screen, draw a rectangle in the bottom right corner.

Based on what you learned about if statements, you realize you could write your code as follows:

  if (mouseX > windowWidth/2) {
    if (mouseY > windowHeight/2) {
      fill(255);
      rect(windowWidth/2, windowHeight/2, windowWidth/2, windowHeight/2);
    }
  }

if (mouseX > windowWidth/2) {

if (mouseY > windowHeight/2) {

fill(255);

rect(windowWidth/2, windowHeight/2, windowWidth/2, windowHeight/2);

}

In this case you would have to get a true answer for TWO if statements before the code is executed. This works, but there’s a simpler way to do it using “logical and” which is written using two ampersands (&&).

Complete Activity 22

Logical Or: ||

…and, “!”, logical Not.

If my temperature is NOT greater than 98.6, I won’t call in sick to work.
If I am stung by a bee AND I am NOT allergic to bee stings, I’ll be fine!

In programming: If the mouse is NOT pressed, draw a circle; otherwise if mouse IS pressed, draw a square.

  if (!mouseIsPressed) {
    ellipse(windowWidth/2, windowHeight/2, 100, 100);
  } else {
    rect(windowWidth/2, windowHeight/2, 100, 100);
  }

if (!mouseIsPressed) {

ellipse(windowWidth/2, windowHeight/2, 100, 100);

} else {

rect(windowWidth/2, windowHeight/2, 100, 100);

}

How could you write this code without the NOT so that if the mouse is pressed, draw a square; otherwise draw a circle?

Here are your newly learned Logical Operators:

  &&  logical AND
  ||  logical OR
  !   logical NOT

&& logical AND

|| logical OR

! logical NOT

Complete Activity 23
Complete Activity 24
Complete Activity 25

Rollover Button

You may be thinking “Can’t I just select ‘add button’ from a menu that already exists?” “Why do I have to do things manually?” Practicing how to program buttons, rollovers, and sliders is a way to learn the basics of variables and conditionals. It is good to care about and be interested in developing new interfaces and to be able to understand how to build interfaces from scratch is an excellent skill to have. So, let’s program a button.

A button can either be true or false. Press the button, turn the switch on; press again, turn it off. They system variable mouseIsPressed is true when the mouse is pressed and false when the mouse is not pressed.

In the code below, what do you think will happen? Walk through it carefully; it should make sense (Really, don’t just copy/paste it into OpenProcessing and watch it run…):

var button = false;
var x = 50;
var y = 50;
var w = 100;
var h = 75;

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {

    if(mouseIsPressed && mouseX > x && mouseX < (x + w) &&
        mouseY > y && mouseY < (y + h)) {
        button = true;
    } else {
        button = false;
    } 

    if (button) {
        background(255);
        stroke(0);
    } else {
        background(0);
        stroke(255);
    }

    fill(175);
    rect(x, y, w, h);  
}

var button = false;

var x = 50;

var y = 50;

var w = 100;

var h = 75;

function setup() {

createCanvas(windowWidth, windowHeight);

}

function draw() {

if(mouseIsPressed && mouseX > x && mouseX < (x + w) &&

mouseY > y && mouseY < (y + h)) {

button = true;

} else {

button = false;

}

if (button) {

background(255);

stroke(0);

} else {

background(0);

stroke(255);

}

fill(175);

rect(x, y, w, h);

}

What you will see is that if the mouse is pressed inside the rectangle, the button is true and the background will turn white. Otherwise the button is false and the background will be black. In this case, the button is only on while you press and turns off when you let go. How can you make the button operate like a switch?

You will need a variable to store the state of the button, whether it is on or off which you can store as true or false.

Complete Activity 26

Reversing Polarity (direction)

When I want to reverse the polarity of a number, I mean that I want a positive number to become negative and a negative number to become positive. This is achieved by multiplying by -1. Remember this is how it works… some examples:

  -5 * -1 = 5
   5 * -1 = -5
   1 * -1 = -1
  -1 * -1 = 1

-5 * -1 = 5

5 * -1 = -5

1 * -1 = -1

-1 * -1 = 1

If my object moves to the right edge, I want it to stop and move to the left edge and continue to bounce off both edges. So, if my variable x is greater than the windowWidth or if my variable x is less than zero, I want to reverse the speed.

  if((x > windowWidth) || (x < 0) {
    speed = speed * -1;
  }

if((x > windowWidth) || (x < 0) {

speed = speed * -1;

}

Complete Activity 27
Complete Activity 28