Hi im new to this. Im have made a clock from the one that is in the sketchbook, when the hand gets to 12 i want it to explode an image (in the same way that image explodes in the sketchbook.

Heres my clock code

/**
* Clock.
*
* The current time can be read with the second(), minute(),
* and hour() functions. In this example, sin() and cos() values
* are used to set the position of the hands.
*
*/

void setup() {
 size(400, 400);
 stroke(255);
 smooth();
}
void draw() {
 background(0);
 fill(90);
 noStroke();
 // Angles for sin() and cos() start at 3 o'clock;
 // subtract HALF_PI to make them start at the top
 ellipse(50, 50, 80, 80);
 float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
 float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
 float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
 stroke(0);
 strokeWeight(1);
 line(50, 50, cos(s) * 36 + 50, sin(s) * 36 + 50);
int beatTime;
int beatAnimLength=1000; //1 second


}


And heres the image explosion code


/**
* Explode
* by Daniel Shiffman.
*
* Mouse horizontal location controls breaking apart of image and
* Maps pixels from a 2D image into 3D space. Pixel brightness controls
* translation along z axis.
*/

PImage img;       // The source image
int cellsize = 2; // Dimensions of each cell in the grid
int COLS, ROWS;   // Number of columns and rows in our system
void setup()
{
 size(200, 200, P3D);
 img = loadImage("eames.jpg");     // Load the image
 COLS = width/cellsize;            // Calculate # of columns
 ROWS = height/cellsize;           // Calculate # of rows
 colorMode(RGB,255,255,255,100);   // Setting the colormode
}
void draw()
{
 background(0);
 // Begin loop for columns
 for ( int i = 0; i < COLS;i++) {
   // Begin loop for rows
   for ( int j = 0; j < ROWS;j++) {
     int x = i*cellsize + cellsize/2; // x position
     int y = j*cellsize + cellsize/2; // y position
     int loc = x + y*width;           // Pixel array location
     color c = img.pixels[loc];       // Grab the color
     // Calculate a z position as a function of mouseX and pixel brightness
     float z = (mouseX / (float) width) * brightness(img.pixels[loc]) - 100.0f;
     // Translate to the location, set fill and stroke, and draw the rect
     pushMatrix();
     translate(x,y,z);
     fill(c);
     noStroke();
     rectMode(CENTER);
     rect(0,0,cellsize,cellsize);
     popMatrix();
   }
 }
}


I want to use one of my own images that will be in the centre of the screen and explode when the hand gets to 12. Hope someone can help im really stuck. Thanks