Open TinderBox and create a new project with the name BasicImages. Open xcode/BasicImages.xcodeproj project file. Windows users should open the project file vc10BasicImages.sln. Open BasicImagesApp.cpp in the editor.

First we are going to include some header files that declare functionality that is required to perform the things we want to get done.

Navigate to a point in the code where there are #include statements and add the following lines of code just after #include "cinder/gl/gl.h":

#include "cinder/ImageIo.h"
#include "cinder/gl/Texture.h"

The first include statement loads code header that is responsible for the Cinder image input/output functionality, the second code header include allows us to use OpenGL textures for drawing images on the screen.

Next we need to declare a variable of type gl::Texture that will contain the actual image data. You can chose your own name for that, but I will call it imgTexture:

gl::Texture imgTexture;

Add the highlighted line of code just after void draw(); in the BasicImagesApp class declaration:

class BasicImagesApp : public AppBasic {
public:
  void setup();
  void update();
  void draw();
  gl::Texture imgTexture;
};

Next, we need to select an image to be loaded into the application. So we are going to use some random image from the internet as it is the fastest way to get a visible image on the screen if you have an internet connection.

Add the following highlighted line of code in the setup method declaration:

void BasicImagesApp::setup() {
  imgTexture = gl::Texture( loadImage( loadUrl( Url("http://rijnieks.lv/projects/cinder_begin_creative_coding/images/image.png") ) ) );
}

The reason why we load it in the setup() is that we need to load the image just once. As loading images from the net takes some time, we don't want to delay our draw() or update() operations because the image is still loading. Cinder is about speed and we don't want to sacrifice it.

Now we need to add some code that will take care of displaying the image. Go to the implementation of the draw() method and add this code just after the gl::clear( Color( 0, 0, 0 ) ); function:

gl::draw( imgTexture, getWindowBounds() );

Here we tell Cinder that we want to draw our imgTexture within the application window bounds (the image will be stretched so its width equals the window's width and its height equals the window's height). Try to compile and run the application. After a short delay an image should appear. If you try to resize the window, you can see that the image is being resized with it.

The member function getWindowBounds() returns an Area object and instead of using this function we can define the drawing area by ourselves. Try this:

gl::draw( imgTexture, Area(100,100,540,380) );

If you try to resize the window now, you will see that it does not affect the image as now it's display position and size is hardcoded in Area(100,100,540,380).