Numerical Expressions - Review

3 + 4 is an expression that evaluates to 7

4 + (9 * 2) is an expression that evaluates to 22

12 % 10 is an expression that evaluates to 2 (We covered % in last week’s review session, it is the modulus operator. It determines the reminder if the two numbers were divided. (12/10 is 1 with a remainder of 2… i.e. a modulus of 2)

Boolean Expressions

There is a certain type of expression which evaluates to a result of either true or false.

3 > 4 # Evaluates to **false**
3 <= 4 # Evaluates to **true**
3 == 3 # Evaluates to **true**
3 == 2 # Evaluates to **false**

# You can also use Boolean Logic such as AND and OR
# && (Two Ampersands) is the equivalent of AND
# || (Two Pipes) is the equivalent of OR
# On a Mac and most PCs, the Pipe **|** is located on key above RETURN/ENTER

(5 > 4) && (3 < 4) # Evaluates to true because both expressions are true
(5 > 4) && (3 > 4) # Evaluates to false because (3>4) is false 
(5 > 4) || (3 > 4) # Evaluates to true because (5>4) is true

# &&

# true && true evaluates to true
# true && false evaluates to false
# false && true evaluates to false
# false && false evaluates to false

# ||

# true || true evaluates to true
# true || false evaluates to true
# false || true evaluates to true
# false || false evaluates to false

# Note that you can also assign the result of a Boolean expression to a variable

x = (3 > 4);  # After this statement x will be equal to false

# So far all examples we have done in class have shown variables containing numbers
# In the above example we introduce another type of data, Booleans, which can also
# be stored in Variables. In summary, x is now a Boolean variable

# You can also initialize a variable with a boolean value

let x = true;
let y = false;

# You can store the result of an expression into a variable
let x = (5>4);   # x is equal to true
let y = (3<4);   # y is equal to true
let z = (3>4);   # z is equal to false

let a = (x && y)  # a is true because both x and y are true
let b = (x && z)  # b is false because x is true and z is false (they are not both true)

# There are some global P5 variables that are boolean
# mouseIsPressed  returns true if mouse is pressed
# keyIsPressed    returns true if a key on your keyboard is pressed

Conditionals

#Examples of Expression Operators

if (x>12) { console.log("x is greater than 12"); 
if (x>=12) { console.log("x is greater than or equal to 12");
if (x<12) { console.log("x is less than 12"); 
if (x<=12) { console.log("x is less than or equal to 12"); 
if (x==12) { console.log("x is 12"); }

# IMPORTANT
# (x=12) is a very different from (x==12)
# x=12 is an assignment statement. It causes x to equal 12.

Example 1 - Ball in Box example

https://editor.p5js.org/des8963/sketches/S0XUuq_el

Ball moves when mouse is pressed and is constrained to the box.

function setup() {
  createCanvas(400, 400);
}

let circleXPos=50;
let circleYPos=200;

function draw() {
  background(220);
  
  // gray fill
  fill(160);
  rect(50,100,300,200);
  
  
  if (mouseIsPressed) {
    fill(50,50,200,60);
    if ((mouseX > 50) && (mouseX<350)) {
    // update circle position
      circleXPos=mouseX;
    } else if (mouseX < 50) {
      circleXPos=50;
    } else if (mouseX > 350) {
      circleXPos=350;
    } else {
      
    }

    if ((mouseY>100) && (mouseY <300)) {
      circleYPos=mouseY;
    } else if (mouseY < 100) {
      circleYPos=100;
    } else if (mouseY > 300) {
      circleYPos=300;
    }
  }
  
  ellipse(circleXPos,circleYPos,50);
}

Loops