Help me add the Explode java example to a program

Processing Coding Questions
1

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 = icellsize + cellsize/2; // x position
int y = jcellsize + 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();
}
}
}

2

Hi,

Welcome to the forum! :wink:

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, 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 and height 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.

    Use :

    PImage catImg = loadImage("cat.jpg");
catImg.resize(...);

set(0, 0, catImg);
set(0, height / 2, catImg);
set(width / 2, 0, catImg);
set(width / 2, height / 2, catImg);

  • Instead of using the set(), you can also use the image() 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 :wink:

1 Like