Blowing up an image using pixels[]

Programming Questions

redraw

Blowing up an image using pixels[]

in Programming Questions • 3 months ago

hello,

I was blowing up an image after looking at the examples from Processing, and it works great, however I was wondering if there was a better way to implement this, because it works fine from cellsize=5, but lower cellsizes like "3" takes a lot of work.

should I have to use libraries like "three.js"?

Here's the code, you can test it with some image.

PImage img;
int res = 5; //resolution or cellsize
boolean click = false;
float tiempo;
void setup() {
size(1024, 720, P3D);
img = loadImage("F1000009.jpg");
}
void draw() {
background(0);
//image to center
translate(width/2-img.width/2, height/2-img.height/2);
if (click) {
img.loadPixels();
for ( int x = 0; x < img.width; x+=res) {
for ( int y = 0; y < img.height; y+=res) {
color c = img.pixels[x + y*img.width];
//explotion function
float z = (log(1+tiempo/10.0)) * brightness(c);
pushMatrix();
translate(0, 0, z);
fill(c);
noStroke();
rect(x, y, res, res);
popMatrix();
}
}
tiempo++;
println(frameRate);
}
else {
image(img, 0, 0);
}
}
void mousePressed() {
click=!click;
tiempo=0;
}

Replies(10)

tfguy44

Re: Blowing up an image using pixels[]

3 months ago

I tried this out and it looks really nice. There's no directly obvious way to make it run any faster, but I let my brain process (sic) the problem a bit and hit on a solution. Give me a few minutes to code it up... you should see quite an increase...

redraw

Re: Re: Blowing up an image using pixels[]

3 months ago

;)
...i've tried saving the brightness of each pixel processed into an array from setup() function, so that it wouldn't have to calculate it on every frame on every pixel again in draw() function but it didn't make any difference at all

tfguy44

Re: Blowing up an image using pixels[]

3 months ago

Hrm, not as much of an increase as I had imagined....

PImage img;
int[] Bs; // Brightness levels per pixel in image.
float[] Zs = new float[256]; // How far
int res = 5; //resolution or cellsize
boolean click = false;
float tiempo;
void setup() {
size(1024, 720, P3D);
img = loadImage("http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png");//F1000009.jpg");
Bs = new int[img.width*img.height];
int t=0;
for (int x=0;x<img.width;x++) {
for (int y=0;y<img.height;y++) {
Bs[t] = int(brightness( img.get(x, y) ));
//println( "Bs[" + t + "] = " + Bs[t] );
t++;
}
}
noStroke();
//strokeWeight(res);
}
void draw() {
background(0);
translate(width/2-img.width/2, height/2-img.height/2);
if (click) {
// Recompute the Z distances for each brightness level.
for ( int i=0; i< Zs.length; i++ ) {
Zs[i] = (log(1+tiempo/10.0)) * float(i);
}
img.loadPixels();
for ( int x = 0; x < img.width; x+=res) {
for ( int y = 0; y < img.height; y+=res) {
pushMatrix();
int t = x+y*img.width;
translate(0, 0, Zs[Bs[t]]);
fill(img.pixels[t]);
rect(x, y, res, res);
popMatrix();
}
}
tiempo++;
println(frameRate);
}
else {
image(img, 0, 0);
}
}
void mousePressed() {
click=!click;
tiempo=0;
}

redraw

Re: Re: Blowing up an image using pixels[]

3 months ago

wow, i was replying to you with the same idea!, don't know why it doesn't makes a difference

tfguy44

Re: Blowing up an image using pixels[]

3 months ago

Hmmm this doesn't help much either....

PImage img;
float[] Zs = new float[256];
int res = 3; //resolution or cellsize
boolean click = false;
float tiempo;
ArrayList<Chunk> chunks = new ArrayList();
void setup() {
size(1024, 720, P3D);
img = loadImage("http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png");//F1000009.jpg");
for (int x=0;x<img.width;x+=res) {
for (int y=0;y<img.height;y+=res) {
chunks.add( new Chunk( x, y, img.get(x, y) ) );
}
}
noStroke();
}
void draw() {
background(0);
translate(width/2-img.width/2, height/2-img.height/2);
if (click) {
// Recompute the Z distances for each brightness level.
for ( int i=0; i< Zs.length; i++ ) {
Zs[i] = (log(1+tiempo/10.0)) * float(i);
}
tiempo++;
// Draw all chunks.
for ( int i=0; i < chunks.size(); i++ ) {
chunks.get(i).draw();
}
//println(frameRate);
}
else {
// Draw static image.
image(img, 0, 0);
}
}
void mousePressed() {
click=!click;
tiempo=0;
}
class Chunk {
color c;
int b;
int x, y;
Chunk( int _x, int _y, color _c ) {
x = _x;
y = _y;
c = _c;
b = int(brightness(c));
}
void draw() {
pushMatrix();
translate(0, 0, Zs[b]);
fill(c);
rect(x, y, res, res);
popMatrix();
}
}

tfguy44

Re: Blowing up an image using pixels[]

3 months ago

Ah! At last, a slight improvement... but only because my image is mostly black anyway. Those black pixels (and some very dark ones too) don't need to explode like brighter ones... so we just don't do the dark ones!

PImage img;
float[] Zs = new float[256];
int res = 1; //resolution or cellsize
boolean click = false;
float tiempo;
ArrayList<Chunk> chunks = new ArrayList();
int careLevel = 50; // Pixels with a brightness below this level (of brightness) will not have a Chunk added for them.
// That is, very dark pixels, which don't move much anyway, won't be drawn during an explosion.
void setup() {
size(1024, 720, P3D);
img = loadImage("http://www.freewarepocketpc.net/wp7/img/image-effecter-free.png");//F1000009.jpg");
for (int x=0;x<img.width;x+=res) {
for (int y=0;y<img.height;y+=res) {
if( brightness(img.get(x,y)) > careLevel ){
chunks.add( new Chunk( x, y, img.get(x, y) ) );
}
}
}
noStroke();
}
void draw() {
background(0);
translate(width/2-img.width/2, height/2-img.height/2);
if (click) {
// Recompute the Z distances for each brightness level.
for ( int i=0; i< Zs.length; i++ ) {
Zs[i] = (log(1+tiempo/10.0)) * float(i);
}
tiempo++;
// Draw all chunks.
for ( int i=0; i < chunks.size(); i++ ) {
chunks.get(i).draw();
}
//println(frameRate);
}
else {
// Draw static image.
image(img, 0, 0);
}
}
void mousePressed() {
click=!click;
tiempo=0;
}
class Chunk {
color c;
int b;
int x, y;
Chunk( int _x, int _y, color _c ) {
x = _x;
y = _y;
c = _c;
b = int(brightness(c));
}
void draw() {
pushMatrix();
translate(0, 0, Zs[b]);
fill(c);
rect(x, y, res, res);
popMatrix();
}
}

redraw

Re: Re: Blowing up an image using pixels[]

3 months ago

Good idea tfguy44.

is it better to make an arraylist intead of drawing the rectangles on the main loop?

edit: you've already modified 500 to 50

tfguy44

Re: Blowing up an image using pixels[]

3 months ago

It's not exactly better... I mean, it's doing the same amount of CPU operations. The real joy of doing it with an ArrayList is that it's easy to filter out the pixels that you don't need a Chunk drawn for them. And not having to drawn those does cut down on the CPU needed.

If you were looping through an array, you'd still have to do that check every frame.

PhiLho

Re: Faster method for Blowing up an Image rather than using pixels[] ?

3 months ago

Nice! Quite effective with a portrait.
Basically, I see the same frame rate whatever the parameter, between 30 and the current maximum (default) of 60.
The access to the pixels[] array is probably not the bottleneck, anyway.
A potential attempt at optimization could be to compute in setup() an array of brightness of colors: the values doesn't change over time, and this would save the pxiels[] access and the brightness() computation.

[EDIT] I shouldn't let the question opened over the night! (there was no answer yet)

redraw

Re: Blowing up an image using pixels[]

3 months ago

PhiLho, that's it! that's what we were talking about xd. however, I haven't found the way to make it work in processing.js

when I click on the image, shows black screen without any errors.

Top Reply