├── README.md
└── image_explode_3d.pde


/README.md:
--------------------------------------------------------------------------------
1 | # image-explode-3d
2 | Image explodes according to mouse movement.
3 | 


--------------------------------------------------------------------------------
/image_explode_3d.pde:
--------------------------------------------------------------------------------
 1 | // Your image must be placed in data folder
 2 | 
 3 | PImage img;       // The source image
 4 | int cellsize = 1; // Dimensions of each cell in the grid
 5 | int cols, rows;   // Number of columns and rows in our system
 6 | 
 7 | void setup() {
 8 |   size(200, 200, P3D);
 9 |   img = loadImage("xxx.jpg"); // Load the image
10 |   cols = width/cellsize;              // Calculate # of columns
11 |   rows = height/cellsize;             // Calculate # of rows
12 | }
13 | 
14 | void draw() {
15 |   background(255);
16 |   image(img, 0, 0);
17 |   img.loadPixels();
18 | 
19 |   // Begin loop for columns
20 |   for (int i = 0; i < cols; i++ ) {
21 |     // Begin loop for rows
22 |     for (int j = 0; j < rows; j++ ) {
23 |       int x = i*cellsize + cellsize/2; // x position
24 |       int y = j*cellsize + cellsize/2; // y position
25 |       int loc = x + y*width;           // Pixel array location
26 |       color c = img.pixels[loc];       // Grab the color
27 |       // Map brightness to a z position as a function of mouseX
28 |       float z = map(brightness(img.pixels[loc]), 0, 255, 0, mouseX);
29 |       // Translate to the location, set fill and stroke, and draw the rect
30 |       pushMatrix();
31 |       translate(x, y, z); 
32 |       fill(c);
33 |       noStroke();
34 |       rectMode(CENTER);
35 |       rect(0, 0, cellsize, cellsize);
36 |       popMatrix();
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------