DA1:003 – If This Then That


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.


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.


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.


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


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
  //do something else if it is not


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.

Simple Example

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

Logical Operators

! (logical NOT)

You will also need to sometimes check for something that is not true. For that you can use the logical NOT operator. It is written using the ! character.

&& (logical AND)

Use the && (logical AND) operator if you need to check if two expressions are both true.

|| (logical OR)

Use the || (logical OR) operator if you need to check if one or both expressions are true.

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.

You can also combine some of the multiple if statements together using || (OR). See the code on this example below to see how to do that.

And here is the same thing with some simple “gravity” and “friction” added.

Loading an Image and Creating a Button

Tips & More Advanced Topics

If you feel like you understand all the topics covered today, please check out these additional tips that might be useful and inspiring for you.