Exporting as .gif, the Explode effect, and many more problems

Processing Coding Questions
1

Hello, clever people!
First things first, I am a design student who just started teaching herself Processing a week ago, so I have NO knowledge beyond The Coding Train tutorials.
(It’s fun! But at the same time I am just… so confused about everything.)

Here’s the thing:

I want to “explode” an image of a bee like in the Explode effect from the examples that come with Processing.
So I just copied all the code, put the bee image in the data folder and it worked fine.

But then… Then I realized:

  • I need the canvas to be 1920x1080 px, but the bee image still needs to be in the centre (which is somehow not the mathematical centre? the image is 200x200px)
  • the pixels don’t explode “far enough”, I need them to go further towards the viewer (along the z axis, right?) so they would be more immersed
  • I will need to export it in some kind of video format, like .gif, but holy moly that looks complicated
  • it would be great if the mouseX didn’t control the explode effect and it would just do it on it’s own, gradually, slowly, but how do I do that?

Here’s my code:

PImage img;       
int cellsize = 1; 
int columns, rows;   

void setup() {
  size(1920, 1080, P3D); 
  img = loadImage("drawn_bee_inv.jpg");  
  columns = img.width / cellsize;  
  rows = img.height / cellsize;  
}

void draw() {
  background(0);
 
  for ( int i = 0; i < columns; i++) {
   
    for ( int j = 0; j < rows; j++) {
      int x = i*cellsize + cellsize/2; 
      int y = j*cellsize + cellsize/2; 
      int loc = x + y*img.width; 
      color c = img.pixels[loc]; 
     
      float z = (mouseX / float(width-200)) * brightness(img.pixels[loc]) - 1.0;
    
      pushMatrix();
      translate(x + 800, y + 400, z+300);
      fill(c, 204);
      noStroke();
      rectMode(CENTER);
      rect(0, 0, cellsize, cellsize);
      popMatrix();
    }
  }
}

Any kind of help would be highly appreciated. And if I can draw anything for you in return or help you with design work I will.
Thank you!!

2

step 1
center the image and explode from there.
step 2
animate as auto explode

// https://www.hiclipart.com/free-transparent-background-png-clipart-yanja/download
String infile="data/bee_hiclipart.com.png";

PImage img;
int cellsize = 2;
int col, row;
boolean grid = false; // true;
float kz=0,dkz=0.001;

void setup() {
  size(800, 800, P3D);
  img = loadImage(infile);
  img.resize(200, 200);
  col = img.width / cellsize;
  row = img.height / cellsize;
  println("col ", col, " row ", row, " cellsize ", cellsize);
  if ( grid ) stroke(0,100,0);
  else        noStroke();
}

void draw() {
  background(0);
  translate(width/2,height/2);
  for ( int i = 0; i < col; i++) {
    for ( int j = 0; j < row; j++) {
      int loc = i*cellsize + j*cellsize*img.width; 
      color c = img.pixels[loc]; 
      int x = (i-col/2)*cellsize; 
      int y = (j-row/2)*cellsize; 
      int z = int((kz / float(width-200)) * brightness(img.pixels[loc]) - 1.0);
      kz+=dkz;
      push();
      translate(x, y, z);
      fill(c);
      rect(0, 0, cellsize, cellsize);
      pop();
    }
  }
}

step 3
https://processing.org/reference/saveFrame_.html

// https://www.hiclipart.com/free-transparent-background-png-clipart-yanja/download
String infile="bee_hiclipart.com.png";

//from https://processing.org/examples/explode.html

PImage img;
int cellsize = 4;
int col, row;
boolean grid = false; // true;
float kz=0,dkz=0.01;

void setup() {
  size(800, 800, P3D);
  img = loadImage(infile);
  img.resize(200, 200);
  col = img.width / cellsize;
  row = img.height / cellsize;
  println("col ", col, " row ", row, " cellsize ", cellsize);
  if ( grid ) stroke(0,100,0);
  else        noStroke();
}

void draw() {
  background(0);
  translate(width/2,height/2);
  for ( int i = 0; i < col; i++) {
    for ( int j = 0; j < row; j++) {
      int loc = i*cellsize + j*cellsize*img.width; 
      color c = img.pixels[loc]; 
      int x = (i-col/2)*cellsize; 
      int y = (j-row/2)*cellsize; 
      int z = int((kz / float(width-200)) * brightness(img.pixels[loc]) - 1.0);
      kz+=dkz;
      push();
      translate(x, y, z);
      fill(c);
      rect(0, 0, cellsize, cellsize);
      pop();
    }
    saveFrame("data/frame-######.png");
  }
  println(frameCount);
  if ( frameCount > 120 ) exit();
}

and use the PDE
/ Tools / Movie Maker / ( go to your sketch /data folder )
to use the frame files… for a short movie
or use a online gif maker

com-gif-maker
com-gif-maker800×800 1.73 MB

that explode in z direction code line is interesting,
ok, found it:
https://processing.org/examples/explode.html
please put a link in your code where you started from…
makes it more easy for us and shows respect for the author

3

Thank you so much, you saved me! I was very overwhelmed and your post is like a beacon of light.
I will definitely include the link to the source code in the future, I just thought it was enough if I said it was from the Example library.
Thank you again, you have my endless gratitude!

4

If you want to try related tricks with voxels rather than pixels, you could just draw each one as a box() … or you might also be interested in the PixelFlow library, which has some demos of voxel constructs being blown apart by an impactor.