Processing adding a logo

Introduction (work in progress)

In this short tutorial we will show you how to add your own logo to your processing sketch. This can be particularly useful for presentations or it can be used as a watermark to show the credits of the sketch if you want to publish your sketch. Processing can display .gif, .jpg, .tga, and .png images.

We will add the logo to the sketch from the previous tutorial Processing_Buttons_and_Sliders. If you didn't complete this tutorial yet or you want to skip this tutorial. Copy the complete sketch at the bottom of the tutorial page.

Preparing the logo

The image file we will use in this is a png file. The advantage of a png file is that it can store transparency of an image with the use of a alpha channel. This is useful in the case of our logo because we want to make the background completely transparent of the image file and let processing later define the background color.

We will use a logo of the TU Delft. But you can also try your own logo. Use Photoshop to delete the background and save the image as PNG. When the PNG options dialog screen appears, check interlaced.

Save the image in the data folder of the processing sketch from the previous tutorial. If there is no data folder yet, you have to create it yourself. Name the file logo.png.

Loading the logo in Processing

The first thing we do in processing is defining a global PImage variable. PImage is a datatype for storing images.

Type the following in the beginning of your sketch before the setup and draw function etc:

PImage TOI_image;

TOI_image is the variable name we will use to store the image.

Then in the setup function we load the logo.png from the data folder and store it in the TOI_image variable.

TOI_image = loadImage("logo.png");