DS3:003 – Conditional Statements, Images & Text in Processing

Inspiration

Artists

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

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.

Text

If you don’t care about the font of your text, you can just use the command text() to draw text on the screen with a generic sans-serif font.

text("wow",100,100);

If you would like to have more control, you can load a specific font for drawing your text. There are two ways to do it:

  • loadFont(): loads a font file from a folder called data inside your sketch folder. The font needs to be in .vlw format. You can create .vlw files with the Create Font tool (Tools–>Create Font)
  • createFont(): You can also use any font installed on your system with the createFont(). It will dynamically convert your font to the correct format.

Check the reference and the examples for more details on how to use the text tools.

Images

In order to display images in Processing, we need to use the PImage class.

PImage photo;

void setup() {
  size(640, 480);
  photo = loadImage("imageFileName.jpg");
}

void draw() {
  image(photo, 0, 0);
}

Where does the file have to be?

  • You can have the image file on your computer. It needs to be saved in a folder called data inside your sketch folder.
  • You can also use an url to load an online image.