It's quite simple.  Draw the image as a grid of polygons.  You can use the vertex() method with u and v coordinates to specify a piece of the original image, then simply use a nested for loop to draw all the squares that make up the full image.

For warping, simply displace the coordinates of the grid points.

Marcello

The answer is... textures.

While mapping the image to a polygon surface and then deforming the surface will work, that is IMHO a very overkill method.

Image warping is really just a process for taking each coordinate in the destination image, mapping it through some function to yield coordinates in the original image, then copying the pixel at the mapped coordinates in the original image to the proper coordinates in the destination image.

If your goal is to play with image warping and get a sense for how that works, IMHO, don't distract yourself with all this business of building a polygon mesh and texture mapping the image onto it.  That technique certainly has its place in the world, but a more straightforward method of mapping pixels from source image to destination image gives you a much more direct appreciation for what's going on, it's a lot shorter to code, and makes it a lot easier for you just to play around with different formulas to see what happens to the image.  Here's a quick example to get you started:

PImage source, destination;

void setup()
{
 source = loadImage("liberty_3.jpg");  // fill in your own image here
 size(source.width, source.height);
 noLoop();
 destination = warp(source);
}

void draw()
{
 image(destination, 0, 0);
}

// implement a simple vertical wave warp.
PImage warp(PImage source)
{
 float waveAmplitude = 20, // pixels
       numWaves = 5;       // how many full wave cycles to run down the image
 int w = source.width, h = source.height;
 PImage destination = new PImage(w,h);
 source.loadPixels();
 destination.loadPixels();

 float yToPhase = 2*PI*numWaves / h; // conversion factor from y values to radians.

 for(int x = 0; x < w; x++)
   for(int y = 0; y < h; y++)
   {
     int newX, newY;
     newX = int(x + waveAmplitude*sin(y * yToPhase));
     newY = y;
     color c;
     if(newX >= w || newX < 0 ||
        newY >= h || newY < 0)
       c = color(0,0,0);
     else
       c = source.pixels[newY*w + newX];
     destination.pixels[y*w+x] = c;
   }
 return destination;
}

This thread might interest you: Help: making a 'caricature' of an image

Thanks, I know that for most of the image, newX = x and newY = y, and by changing those values the whole image can be warped. But as i said earlier, I want to be able to warp any coordinates inside the image.

i have this code that loads a blurred black and white image , then according to the gray values of the loaded image creates line warps that define the surface with a z vaule of elevation.

i want achieve a similar effect. however,  except rather than defining the surface with lines i want to load a second image and have it warp according to the gray values in 1st image.

cutting my teeth on processing. any help would be awsome!

here is the initial code for the line warping:

import processing.opengl.*;

int gap;
int num_lines;
float z_value;
PImage img;
float value;
color[] myarr;
boolean dosave=true;


void setup(){
size(1000, 800, OPENGL);
background(0);
strokeWeight(0.2);

noLoop();

gap = 8;
z_value = 50;
num_lines = floor(height/gap);


PImage img = loadImage("image.jpg");// black and white image with a blur for  smooth warping lines
image(img,0,0);
loadPixels();

myarr= new color[pixels.length];

for (int i=0; i <(width*height) -1; i++){
float brg = brightness(pixels[i]);
myarr[i] = abs ((int) brg);
}
}

void draw(){
background(0);
stroke(255);
strokeWeight(1);
fill(0);
smooth();
pushMatrix();

translate(width/2, height/2);

rotateX(PI/6);
rotateZ(0);

scale(1);
translate(-width/2,-height/2);

for (int i=0; i < num_lines; i++){
beginShape();
for ( int j=0; j < width; j++){ // x resolution

value = map (myarr[i*gap*width+j],0, 255, 0, z_value);
vertex(j, i*gap, value);

}
endShape();

}

popMatrix();
save("image.tif");

if(dosave) {
endRaw();
dosave=false;
}

}