• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

BMS Processing Class

A Course23.com Production

"Stop, Pause, and Think..." -- Ms. Elwell
"Take your time, it isn't a race" -- Mr. Helmke

  • Home
  • Conditionals and Logic
    • Conditionals 1: Boolean Expressions and the If Statement
      • Activity 16 (IF1)
    • Conditionals 2: If/Else Statements
      • Activity 17 (IFELSE1)
    • Conditionals 3: Else If Statements
      • Activity 18 (elseif1)
      • Activity 19
      • Activity 20 (elseif3)
      • Activity 21
    • Logical Operators
      • Activity 22 (And1)
      • Activity 23
      • Activity 24 (SingleRollover)
      • Activity 25 (FourSquareRollover)
      • Activity 26 (MoveWhenPressed)
      • Activity 27 (bouncy ball 1)
      • Activity 28 (bouncy ball 2)
  • Functions
    • Moving Shapes 1
      • Activity 29 (StarBright)
      • Activity 30 (CreatureAtOrigin)
    • Moving Shapes 2
      • Activity 31 (drawCreatureFunction)
      • Activity 32 (BouncingCreatures)
    • Rotating Shapes
      • Activity 33 (RotatingCreatures)
      • Activity 34 (RotatingShapes)
      • Activity 35 (RotatingShapes2)
  • Looping and Arrays
    • Loops 1
      • Activity 36 (ShapeLoop)
      • Activity 37 (RandomLoop1)
    • Loops 2
      • Activity 38 (Deg2Rad)
      • Activity 39 (NumberLoop1)
      • Activity 40 (NumberLoop2)
    • Arrays 1
      • Activity 41
      • Activity 42
      • Activity 43
    • Arrays 2
      • Activity 44
      • Activity 45
      • Activity 46
  • Final Topics
    • Introduction
    • Particle Systems
    • Maze Game
  • Resources

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:

1
2
3
4
5
6
  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.

1
2
3
4
5
  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:

1
2
3
  &&  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…):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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:

1
2
3
4
  -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.

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

Complete Activity 27
Complete Activity 28

Primary Sidebar

Required Reading:

Course Coding Standards

Copyright © 2016–2021 Chris Elwell/Michael Helmke · This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License · Log in