Until now, we drew images as rigid rectangles of arbitrary shapes. But there is a possibility to draw an image as if it were made from rubber. To achieve this effect, the image is decomposed into a mesh consisting of a number of triangles or quadrangles (quads). Each triangle or quad is rendered with an arbitrary position on its vertices while preserving adjacency relation in the mesh. This gives a rubbery effect to the image.

Such methods can be used for implementing the video mapping technology; also known as projection mapping. This technology involves the use of projectors for projecting images on non-flat surfaces and objects such as sculptures, buildings, and custom-made constructions such as polyhedrons. In this technology, one or several projectors are mounted in a way that the desired object's surfaces are illuminated by the projector's light. Then the computer generates and sends images to the projectors to draw solid colors, textures, or even moving objects on this surfaces. Often, it is achieved by rendering normal images and then warping these on the object's surface. The parameters of warping are tuned manually or automatically on the stage when projectors and objects are physically mounted and fixed.

The following screenshot shows an example of video mapping onto a real head sculpture using one projector (project by Igor Sodazot, 2010):

You can mention what edges of the image ideally fit the edges of the sculpture. This was achieved by warping the image's edges interactively, by manually shifting mesh vertices in the video editor.

Here we consider the simplest example of warping and video mapping; that is, warping a rectangular image. This model will be mapped onto a flat rectangular surface that is rotated in 3D with respect to the projector.

The example allows you to arbitrarily move the corners of the image that is displayed on the screen. To select one of the four corners of the image, press the key 1, 2, 3, or 4. To move the selected corner, press any cursor key. The corners' enumeration is shown as follows:

The code's basic function is texture.draw( p[0], p[1], p[2], p[3] ), which warps the texture to the selected corner points.

#include "testApp.h"
ofTexture    texture;
ofPoint p[4];            //Corners
int ind = 0;             //Index of selected corner, 0..3

void testApp::setup(){
  //Load texture image
  ofLoadImage( texture, "sunflower.png" );

  //Set up initial corners
  p[0].x = 100;  p[0].y = 100;
  p[1].x = 300;  p[1].y = 100;
  p[2].x = 300;  p[2].y = 300;
  p[3].x = 100;  p[3].y = 300;
}

void testApp::update(){
}

void testApp::draw(){
  ofBackground( 255, 255, 255 );

  ofSetColor( 255, 255, 255 );

  //Draw texture by specifying its target corners points
  texture.draw( p[0], p[1], p[2], p[3] );
}

//Process keys
void testApp::keyPressed(int key){
  //Select corner to edit by keys 1,2,3,4
  if ( key == '1' ) { ind = 0; }
  if ( key == '2' ) { ind = 1; }
  if ( key == '3' ) { ind = 2; }
  if ( key == '4' ) { ind = 3; }

  //Move selected corner by cursor keys
  if ( key == OF_KEY_LEFT ) { p[ ind ].x -= 10; }
  if ( key == OF_KEY_RIGHT ) { p[ ind ].x += 10; }
  if ( key == OF_KEY_UP ) { p[ ind ].y -= 10; }
  if ( key == OF_KEY_DOWN ) { p[ ind ].y += 10; }
} 

Run the project; you will see the sunflower image. Then press keys 1, 2, 3, or 4 to select a corner and move the corner with the cursor keys. If you have a projector, you can get video mapping of the sunflower image to any rectangular surface; for example, on the side of a carton.

If you move corners a lot, the image distortion will be high. You can see that warping is not very good along the diagonal, as there will be some unwanted additional distortion. The reason for this is that the texture.draw() method in the example performs warping by drawing two triangles. So the mapping mesh here consists of two triangles with a common (diagonal) edge. For smoother results, we need to construct a more complex mesh that consists of least 50 triangles and recalculate its vertices when the corners move. It can be done using bilinear interpolation and drawing a mesh using the ofMesh class, but it is out of the scope of this chapter. See the Using ofMesh section in Chapter 7, Drawing in 3D, for details on mesh drawing.