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!!