Loading and drawing an image

For loading and drawing an image, you need to declare the image object, load the image from a file, and add a drawing function call in the testApp::draw() function. Perform the following steps:

  1. Declare the image as an ofImage object:
    ofImage image;

    The best way is to declare images in the testApp class declaration in the testApp.h file. For simplicity, sometimes we will declare them right on top of the testApp.cpp file.

  2. Load an image from a file using the loadImage function:
    image.loadImage( fileName );

    Here, fileName is a string value specifying the filename; for example, sunflower.png. Normally, images should be located in the bin/data folder of your application. If you want to use an image from another folder, it is possible to use absolute paths; for example, image.loadImage( "C:\myimage.png" ) in Windows.

  3. Draw the image using the image.draw( x, y ) function inside the testApp::draw() function. Here, x and y are float values specifying the top-left corner of the image on the screen.

Let's implement these steps in a project. It just draws a single image on the screen. The project is based on openFrameworks' emptyExample example. Copy the folder with the example and rename it. Then place the image sunflower.png into the bin/data folder of the project. Now, replace the beginning of the testApp.cpp file with the following code:

#include "testApp.h"

ofImage image;      //Declare image object

void testApp::setup(){
  //Load image file
  image.loadImage("sunflower.png");
}

void testApp::update(){
}

void testApp::draw(){
  //Set up gray background
  ofBackground(128, 128, 128);

  //Draw image with top left corner x=100, y=50 pixels
  image.draw( 100, 50 );
}

Note

This is example 04-Images/01-ImageDraw.

Run the project; you will see the image shown in the following screenshot on the screen:

Loading and drawing an image

As you can see, we used an image in PNG file format. Besides, openFrameworks allows us to load and save images in JPG, BMP, and TIFF file formats. Among these, PNG is the most usable because it keeps the high quality of the original image, can maintain transparency, has small file size, and decodes very fast. JPG is good for smooth and realistic images such as photos. This format can reduce visible image quality, and does not work with transparency, but has smaller file size in case of real-life photos. BMP and TIFF store images in uncompressed form. They are good for holding and processing images without losing quality. They are rarely used in interactive applications because their file sizes are too large and image loading from such files is slow.

You can not only load images but also save them to PNG, JPG, BMP, or TIFF files. For such purposes, use the image.saveImage() method. See the following example:

image.saveImage( "test.png" );

It is possible to move, scale, and stretch images on the screen using the overloaded version of the draw() method: image.draw( x, y, w, h ). It draws the image object, additionally specifying the width w and the height h in pixels.

Also, there are overloaded versions of the image.draw() method which allows us to simplify the code:

  • image.draw( p ) – draws image using point p of type ofPoint
  • image.draw( rect ) – draws image using rectangle rect of type ofRectangle

For retrieving the original image size in pixels, you can use its width and height fields, image.width and image.height, having type int. The following are examples of using these:

  • Drawing an image that is 50 percent of its size with top-left corner at ( 0, 0 ):
    image.draw( 0, 0, image.width*0.5, image.height*0.5 );
  • Drawing an image with width equal to 300 pixels and proportional height:
    image.draw( 0, 0, 300, 300.0*image.height/image.width );
  • Drawing an image with arbitrary proportions; for example, width 100 and height 200:
    image.draw( 0, 0, 100, 200 );
  • Images can be flipped using a negative value for width or height. For example, for vertical flipping use the following code:
    image.draw( 0, image.height, image.width, -image.height);

Tip

Instead of writing big formulas inside the arguments of the image.draw( x, y, w, h ) method, you can use the ofTranslate( x, y ) and ofScale( scaleX, scaleY ) methods for translating and scaling the coordinate system, which is used for drawing everything on the screen. (See the Coordinate system transformations section in Chapter 2, Drawing in 2D for details.) You can call ofTranslate() and ofScale() in the required succession to obtain the desired transformations. If you are not very familiar with coordinate transformations, it will seem harder. But, trust me, it makes your code cleaner and easy to read and maintain. Also, see the next section for details.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset