PFA:003 – If This Then That

Inspiration

Tweak Mode (Does not work in Processing 3.5)

Before we go any further, let’s take a look at Tweak Mode, a very useful tool that was added to Processing recently (it used to be an external run mode). It allows us to edit values while the code is running.

Instead of running your code with the run button or the keyboard shortcut cmd+R (or ctrl+R), try running your code with the Tweak option from the Sketch menu (or use the keyboard shortcut shift+cmd+T). Note that your sketch must be saved before you can use the tweak mode.

screen-shot-2016-10-12-at-16-01-17

While you are running your program in the tweak mode, any value that is underlined can be edited by clicking and dragging. Also all the colors can be edited with a color picker in real-time.

screen-shot-2016-10-12-at-16-06-29

The tweak mode allows a more direct connection with the code and the outcome. You can choose to save all the modifications you have made after you stop running the sketch.

Conditionals (if, else, switch)

A very large part of your code will depend on being able to set rules on when certain pieces of your code will run. That is where conditionals come into play.

Comparison Operators

When setting up your conditions for if statements, you need to compare values in different ways. These are the different comparison operators that we are going to need:

  • Equal: == (note the two equal signs, don’t mix with assigning values!)
  • Not equal: !=
  • Less than: <
  • Less than or equal to: <=
  • Greater than: >
  • Greater than or equal to: >=

if

A very common structure in programming is the “if this then that” structure. You ask the code if some expression is true, if it is then we execute a specific block of code.

For example, you could ask if the x position of the mouse is less or greater than a certain value, or you could check if a specific key on the keyboard is pressed, or you could connect a light sensor to your code and trigger a sound file to play when the light level goes below a certain level.

See the reference for a more detailed explanation.

Simple Conditions – if and mousePressed

The simple drawing program we made during the last class can be extended by using mousePressed and if. Just like mouseX and mouseY, mousePressed is a system variable. It stores the information if the mouse button is pressed or not. The value is a boolean value, so it is either true or false.

In order to make your program ask if the mouse button is pressed or not, you need to use a conditional statement called if. We could for example make the program only draw the ellipse if the mouse button is pressed.

Note that inside the if statement we use two equal signs == to compare if two values are equivalent.

int eSize = 30;
void setup() {
  // Set the size of the window
  // This needs to be only done once
  size(600, 600);
  background(134, 82, 132);
}

void draw() {
  // draw an ellipse where the mouse cursor is only when the mouse is pressed
  if (mousePressed == true) { 
    ellipse(mouseX, mouseY, eSize, eSize);
  }
}

if-else

This would be the code for checking if the mouse x coordinate is greater than 200:

if(mouseX > 200){
  //do something
}

Usually, you are going to use if together with else to have two separate blocks of code executed based on if the condition is true or not.

if(mouseX > 200){
  //do something if mouseX is greater than 200
}else{
  //do something else if it is not
}

Simple Example

switch

Switch is another way to create an if..else like structure, but it is a lot more convenient when you have more than three possible options. See the reference for examples.

Bouncing Ball

Our example today uses the if statements to change the direction of a moving ellipse once it hits the edges of the window.

Combining Expressions Using Logical Operators

You can simplify the code above by combining multiple expression using logical operators. The available operators are:

Code Done in Class (03/10/2019)

Homework

No actual assignment, but feel free to add any experiments you do to the Freestyle folder on OpenProcessing (05). Some potentially interesting things to try out:

  • Make something happen each time the ellipse hits a wall (changing color or speed)
  • Try adding gravity and/or friction. (Here is one possible solution)