Processing-07. Data Type : Variables-02

Image

  Processing can load .gif, .jpg, .tga, and .png images. Images can be displayed in 2d or 3d space. In order for an image to be used, a variable for an image must be defined by PImage() function and the image must be loaded with loadImage() function.

1. Load and Display an image
  The same way that intergers are stored in variables of the int data type and true/false values are stored in the boolean data type, images are stored in variables of the PImage data type.
e.g.) PImage img;     // define a variable 'img' as an image variable.

  In order to load an image into the defined variable, loadImage() function is used to load an image into the sketch. You need to be sure to include the file format extension as a part of the name and to put the entire name in quotes. Be careful to use the correct capitalization and do not use spaces in image names, which can cause error.
e.g.) img=loadImage("apple.jpg");      // load apple.jpg into an image variable 'img'.

  For an image to be loaded, it must be in the data folder of the current sketch. You can add an image file in the data folder by using Sketch-Add File function in the processing menu, or you can just simply drag and drop an image to the Processing window, which will automatically create a data folder and put the image file into it.
  The image loaded by loadImage() function can be displayed in the display window with image() function. image() function can contain the following parameters.

image(name, x, y, width, height);

  The name parameter must be a PImage variable, and the x and y parameters define the position of the upper-left corner of the image. The width and height parameters set the size of the image displayed.

  You can change the displaying mode of an image using imageMode() function. imageMode() function has CORNER, CORNERS, and CENTER as sub parameters. The default mode is CORNER. The syntax imageMode(CORNERS) uses the second and third parameters of image() to set the location of one corner of the image and uses the fourth and fifth parameters to set the opposite corner. Use imageMode(CENTER) to draw images centered at the given x and y position.

2. Image Color / Transparency

  The same way that fill() and stroke() functions are used in creating geometries, images can be colored with tint() function.

tint(gray)

tint(gray, alpha)

tint(R, G, B)

tint(R, G, B, alpha)

tint(color)

  All images drawn after running tint() will be tinted by the color specified in its parameters, and can go back to the original color using noTint() function. 

  In order to make the image transparent, set the gray value to 255(white), and lower the alpha value.

  .gif and .png images retain their transparency when loaded and displayed in Processing. This allows anything drawn before the image to be visible through the transparent sections of such images.