Explode

Explode

(3D->Image->Explode)

2D画像を3Dに配置し、マウスで爆発したように見せるアニメーション。

ピクセルの輝度が3D座標中の奥行きZになっている。

/**

* 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 columns, rows; // Number of columns and rows in our system

void setup() {

size(640, 360, P3D);

img = loadImage("eames.jpg"); // Load the image

columns = img.width / cellsize; // Calculate # of columns

rows = img.height / cellsize; // Calculate # of rows

}

void draw() {

background(0);

// Begin loop for columns

for ( int i = 0; i < columns; 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*img.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]) - 20.0;

// Translate to the location, set fill and stroke, and draw the rect

pushMatrix();

translate(x + 200, y + 100, z);

fill(c, 204);

noStroke();

rectMode(CENTER);

rect(0, 0, cellsize, cellsize);

popMatrix();

}

}

}