# Help me add the Explode java example to a program

**URL:** <https://discourse.processing.org/t/help-me-add-the-explode-java-example-to-a-program/26345>\
**Category:** Coding Questions\
**Created:** [December 17, 2020, 8:57pm UTC](https://discourse.processing.org/t/help-me-add-the-explode-java-example-to-a-program/26345 "2020-12-17T20:57:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![megang](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@megang](https://discourse.processing.org/u/megang)\
**Post date:** [December 17, 2020, 8:57pm UTC](https://discourse.processing.org/t/help-me-add-the-explode-java-example-to-a-program/26345/1 "2020-12-17T20:57:25Z")

</div>

**Here is my program:**

PImage img0;

PImage img1;

PImage img2;

PImage img3;

ArrayList images;

int width = 1280;

int height = 850;

void setup() {

size(1280, 850);

noFill();

stroke(255);

frameRate(15);

images = new ArrayList();

img0 = loadImage(“cat.jpg”);

img1 = loadImage(“cat.jpg”);

img2 = loadImage(“cat.jpg”);

img3 = loadImage(“cat.jpg”);

img0.resize(img0.width / 2, img0.height / 2);

img1.resize(img1.width / 2, img1.height / 2);

img2.resize(img2.width / 2, img2.height / 2);

img3.resize(img3.width / 2, img3.height / 2);

images.add(img0);

images.add(img1);

images.add(img2);

images.add(img3);

}

void draw() {

```
set(0, 0, images.get(0));

set(0, height / 2, images.get(1));

set(width / 2, 0, images.get(2));

set(width / 2, height / 2, images.get(3));

```

}

**Here is the code I want to add**

/\*\*

- 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(“cat2.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();  
}  
}  
}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 18, 2020, 10:12am UTC](https://discourse.processing.org/t/help-me-add-the-explode-java-example-to-a-program/26345/2 "2020-12-18T10:12:12Z")

</div>

Hi,

Welcome to the forum! 😉

Remember that you can format your code by using the `</>` button in the message editor.

Let’s start with the basics :

- When initializing an [`ArrayList`](https://processing.org/reference/ArrayList.html), it’s better to provide the type of object you actually want to store. In this case, use `ArrayList<PImage>`. It ensures that the compiler will know which type of object you can and can’t put into the array and make it more clear for you and the reader

- In Processing, you already have global variables called [`width`](https://processing.org/reference/width.html) and [`height`](https://processing.org/reference/height.html) so you don’t need to define them outside of the `setup()` function.

- If you are using an `ArrayList` of images, you don’t need to store them in separate variables, just access them in the array or don’t use an array if you don’t need to iterate over them and keep separate variables.

- The four images are actually the same (as for the filename) so you are duplicating data here which is useless. Java can work by reference which means that if you have one image, you can get it’s reference without copying it’s data and use it whenever you want.

- Instead of using the `set()`, you can also use the [`image()`](https://processing.org/reference/image_.html) function since the size of the image is 1 / 4 of the total screen

Then after that you can start to integrate Shiffman’s code to your code. But remember that code is not just putting things together, it’s thinking about the logic and how to build blocks of logic and data 😉