PFA:003 – If This Then That

Inspiration

Tweak Mode

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.

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.

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

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

if-else

You can also use else together with if to have two separate blocks of code be 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
}

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: >=

The equality operator == is probably going to be the most common one.

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 and the evaluated expression is simple enough. 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.

3rd Assignment

Create a simple Sketch that uses the if conditions. Either experiment a bit further with our bouncing ball example or make something of your own. (Hint: check the keyboard and mouse examples in the reference, if you want to have more interaction).

Add your code to our OpenProcessing class.